WebExtensionsメモ menu-demo

2017/10/28-編集中

水色背景文字は未確認の部分

bookmark-it

https://github.com/mdn/webextensions-examples/tree/master/menu-demo

コンテキストメニューに新たな項目の追加削除する方法
コンテキストメニューをクリックしたときに処理を追加する方法
指定したタブのページにスクリプトを追加編集する方法
非同期処理のエラーを取得する方法

などの役に立つでしょう。

manifest.json

  "permissions": [
    "menus",
    "activeTab"
  ],
  
  "icons": {
    "16": "icons/page-16.png",
    "32": "icons/page-32.png",
    "48": "icons/page-48.png"
  },

  "sidebar_action": {
    "default_icon": "icons/page-32.png",
    "default_title" : "My sidebar",
    "default_panel": "sidebar/sidebar.html"
  }

“permissions”: “menus”

コンテキストメニュー（右クリック）を操作するためのAPIを要求

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/menus

“sidebar_action”:

“default_panel”: “sidebar/sidebar.html”

サイドバーを構成するhtmlファイルへのパス。これは必須プロパティ。

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/sidebar_action

background.js

function onCreated() {
  if (browser.runtime.lastError) {
    console.log(`Error: ${browser.runtime.lastError}`);
  } else {
    console.log("Item created successfully");
  }
}

function onRemoved() {
  console.log("Item removed successfully");
}

function onError(error) {
  console.log(`Error: ${error}`);
}

function onCreated()

コンテキストメニューを作ったときのエラー監視用関数。

function onRemoved()

コンテキストメニューを削除したときのエラー監視用関数。

function onError(error)

エラーが発生したとき用のエラー監視用関数。

runtime.lastError

非同期処理のときのエラーを保存している。コールバック関数内で呼ばないとnullになる。

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/runtime/lastError

background.js

browser.menus.create({
  id: "log-selection",
  title: browser.i18n.getMessage("menuItemSelectionLogger"),
  contexts: ["selection"]
}, onCreated);

browser.menus.create({
  id: "remove-me",
  title: browser.i18n.getMessage("menuItemRemoveMe"),
  contexts: ["all"]
}, onCreated);

browser.menus.create({
  id: "separator-1",
  type: "separator",
  contexts: ["all"]
}, onCreated);

browser.menus.create({
  id: "greenify",
  type: "radio",
  title: browser.i18n.getMessage("menuItemGreenify"),
  contexts: ["all"],
  checked: true,
  icons: {
    "16": "icons/paint-green-16.png",
    "32": "icons/paint-green-32.png"
  }
}, onCreated);

browser.menus.create({
  id: "bluify",
  type: "radio",
  title: browser.i18n.getMessage("menuItemBluify"),
  contexts: ["all"],
  checked: false,
  icons: {
    "16": "icons/paint-blue-16.png",
    "32": "icons/paint-blue-32.png"
  }
}, onCreated);

browser.menus.create({
  id: "separator-2",
  type: "separator",
  contexts: ["all"]
}, onCreated);

var checkedState = true;

browser.menus.create({
  id: "check-uncheck",
  type: "checkbox",
  title: browser.i18n.getMessage("menuItemUncheckMe"),
  contexts: ["all"],
  checked: checkedState
}, onCreated);

browser.menus.create({
  id: "open-sidebar",
  title: browser.i18n.getMessage("menuItemOpenSidebar"),
  contexts: ["all"],
  command: "_execute_sidebar_action"
}, onCreated);

browser.menus.create({
  id: "tools-menu",
  title: browser.i18n.getMessage("menuItemToolsMenu"),
  contexts: ["tools_menu"],
}, onCreated);

menus.create()

新しいコンテキストメニュー項目を作る。第二引数にコールバック関数を設定できる。引数にはruntime.lastErrorが渡される。

id:は固有のものを指定。

context:はコンテキストメニューに表示する場所を指定。allならどこでコンテキストメニューを表示しても表示される。

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/menus/ContextType

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/menus/create

i18n.getMessage()

引数に指定されたメッセージのローカライズされた文字列を取得します。messages.jsonファイルで指定されているメッセージの名前を指定する。

ローカル分けする方法、messages.jsonの構文ルールはどこにある？

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/i18n/getMessage

background.js

var blue = 'document.body.style.border = "5px solid blue"';
var green = 'document.body.style.border = "5px solid green"';

function borderify(tabId, color) {
  browser.tabs.executeScript(tabId, {
    code: color
  });
}

function updateCheckUncheck() {
  checkedState = !checkedState;
  if (checkedState) {
    browser.menus.update("check-uncheck", {
      title: browser.i18n.getMessage("menuItemUncheckMe"),
    });
  } else {
    browser.menus.update("check-uncheck", {
      title: browser.i18n.getMessage("menuItemCheckMe"),
    });
  }
}

browser.menus.onClicked.addListener((info, tab) => {
  switch (info.menuItemId) {
    case "log-selection":
      console.log(info.selectionText);
      break;
    case "remove-me":
      var removing = browser.menus.remove(info.menuItemId);
      removing.then(onRemoved, onError);
      break;
    case "bluify":
      borderify(tab.id, blue);
      break;
    case "greenify":
      borderify(tab.id, green);
      break;
    case "check-uncheck":
      updateCheckUncheck();
      break;
    case "open-sidebar":
      console.log("Opening my sidebar");
      break;
    case "tools-menu":
      console.log("Clicked the tools menu item");
      break;
  }
});

function borderify()

ページ内のCSSを追加編集する関数。tabs.insertCSS()とtabs.removeCSS()を使っていないところがポイントか。

tabs.executeScript()

指定したタブのページのスクリプトを追加編集。

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/executeScript

function updateCheckUncheck()

コンテキストメニューのチェック、アンチェック時のエラー対策用関数。

menus.update()

コンテキストメニューを更新する。

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/menus/update

menus.onClicked.addListener()

コンテキストメニューがクリックされたときに発生するイベント。コールバック関数にはinfoとtabが引数として渡される。