総合 ゲーム 画像動画

WebExtensionsメモ bookmark-it

2017.10.28

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()

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

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

 

コメントを残す。

メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。URLを含むコメントは承認待ちになります。