WebExtensionsメモ bookmark-it

2017/10/28-編集中

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

bookmark-it

https://github.com/mdn/webextensions-examples/tree/master/bookmark-it

ブラウザのツールバーにボタンを追加変更する方法
ツールバーのボタンが押されたときに処理をする方法
ブックマークを追加削除する方法
ブックマークの中身を検索する方法
様々なタブとブックマークとウィンドウの監視方法

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

manifest.json

  "permissions": [
    "bookmarks",
    "tabs"
  ],

  "browser_action": {
    "default_icon": "icons/star-empty-38.png",
    "default_title": "Bookmark it!"
  },

  "background": {
    "scripts": ["background.js"]
  }

“permissions”:bookmarks

bookmarksのAPIを要求しています。

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

“browser_action”:

ブラウザのツールバーにボタンを追加します。ポップアップにページやJavaScriptを設定することができ、ボタンをクリックされるとポップアップのスクリプトに送られる。ポップアップを設定しないとbackgroundへクリックが送られる。

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

background.js

var currentTab;
var currentBookmark;

function updateIcon() {
  browser.browserAction.setIcon({
    path: currentBookmark ? {
      19: "icons/star-filled-19.png",
      38: "icons/star-filled-38.png"
    } : {
      19: "icons/star-empty-19.png",
      38: "icons/star-empty-38.png"
    },
    tabId: currentTab.id
  });
  browser.browserAction.setTitle({
    title: currentBookmark ? 'Unbookmark it!' : 'Bookmark it!',
    tabId: currentTab.id
  });
}

function toggleBookmark() {
  if (currentBookmark) {
    browser.bookmarks.remove(currentBookmark.id);
  } else {
    browser.bookmarks.create({title: currentTab.title, url: currentTab.url});
  }
}

browser.browserAction.onClicked.addListener(toggleBookmark);

function updateIcon()

ツールバーのアイコンを変更する関数。

browserAction.setIcon

ツールバーのアイコンを設定変更します。URLバーのアイコンはpageAction.setIcon

path: currentBookmark ?{}:{}でアイコンを分けています。

var currentBookmarkには配列もしくはundefinedが入る予定です。

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

function toggleBookmark()

ブックマークの中にブックマークを追加したり削除したりする関数。

browserAction.onClicked.addListener()

ツールバーのアイコンがクリックされたときに発生するイベント。コールバック関数を設定可能で引数には現在のtabが渡される。

右クリックのコンテキストメニューを表示させるには別のAPIが必要。

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

bookmarks.remove()

ブックマークもしくはブックマークフォルダを削除する。引数には削除するブックマークもしくはフォルダのIDを指定。

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

bookmarks.create()

ブックマークを追加する。引数にurlやtitleなどを設定可能。

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

background.js

function updateActiveTab(tabs) {

  function isSupportedProtocol(urlString) {
    var supportedProtocols = ["https:", "http:", "ftp:", "file:"];
    var url = document.createElement('a');
    url.href = urlString;
    return supportedProtocols.indexOf(url.protocol) != -1;
  }

  function updateTab(tabs) {
    if (tabs[0]) {
      currentTab = tabs[0];
      if (isSupportedProtocol(currentTab.url)) {
        var searching = browser.bookmarks.search({url: currentTab.url});
        searching.then((bookmarks) => {
          currentBookmark = bookmarks[0];
          updateIcon();
        });
      } else {
        console.log(`Bookmark it! does not support the '${currentTab.url}' URL.`)
      }
    }
  }

  var gettingActiveTab = browser.tabs.query({active: true, currentWindow: true});
  gettingActiveTab.then(updateTab);
}

function updateActiveTab()

ブックマークが存在を確認してツールバーのアイコンを変更する関数。

function isSupportedProtocol()

urlのプロトコルがブックマークに登録可能かどうかを判定して真理値を返す関数。

function updateTab()

現在のタブのurlがブックマークに存在している場合ツールバーアイコンを変更する関数。

tabs.query()

active: trueで現在のタブに絞ってtabを取得しています。

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

bookmarks.search()

送ったクエリに対応するブックマークがあるかを検索して見つかればそのブックマークをbookmarks.BookmarkTreeNodeで返す。見つからない場合は空の配列undefinedを返す。

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

background.js

browser.bookmarks.onCreated.addListener(updateActiveTab);
browser.bookmarks.onRemoved.addListener(updateActiveTab);
browser.tabs.onUpdated.addListener(updateActiveTab);
browser.tabs.onActivated.addListener(updateActiveTab);
browser.windows.onFocusChanged.addListener(updateActiveTab);
updateActiveTab();

bookmarks.onCreated.addListener()

ブックマークにブックマークもしくはフォルダが作成されたときに起こるイベント

引数にはブックマークIDなどが渡される。このアドオンではイベントを受け取る目的だけ。

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

bookmarks.onRemoved.addListener()

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

tabs.onUpdated.addListener()

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

tabs.onActivated.addListener()

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

windows.onFocusChanged.addListener()

フォーカスされてるウィンドウが変わったときに発生するイベント