WebExtensionsメモ apply-css

2017/10/28-編集中

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

apply-css

https://github.com/mdn/webextensions-examples/tree/master/apply-css

ページのCSSを追加編集する方法
ページアクションの表示非表示方法
ページアクションをクリックされたときのイベント追加方法
タブが更新されたときのイベント追加方法

などの役に立つでしょう。ページアクションとはURLバーの右端にあるボタンのこと。

manifest.json

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

  "page_action": {
    "default_icon": "icons/off.svg",
    "browser_style": true
  },
  
  "permissions": [
    "activeTab",
    "tabs"
  ]

“background”: 長期的に実行し続けるスクリプト、またはページ。htmlファイルを指定する場合は”page”:[.html]

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

“page_action”:URLバーに追加するアイコン。アイコンをクリックするとポップアップでページを表示させることも可能。アイコンをクリックするとポップアップで指定したJavaScriptへクリックが送られる。ポップアップを指定しないとbackgroundで指定したスクリプトへクリックが送られる。

この場合はポップアップを指定していない。

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

“permissions”:tabsの他にactiveTabのAPIを要求。現在のタブのみに絞った権限。

background.js

const CSS = "body { border: 20px solid red; }";
const TITLE_APPLY = "Apply CSS";
const TITLE_REMOVE = "Remove CSS";

function toggleCSS(tab) {

  function gotTitle(title) {
    if (title === TITLE_APPLY) {
      browser.pageAction.setIcon({tabId: tab.id, path: "icons/on.svg"});
      browser.pageAction.setTitle({tabId: tab.id, title: TITLE_REMOVE});
      browser.tabs.insertCSS({code: CSS});
    } else {
      browser.pageAction.setIcon({tabId: tab.id, path: "icons/off.svg"});
      browser.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
      browser.tabs.removeCSS({code: CSS});
    }
  }

  var gettingTitle = browser.pageAction.getTitle({tabId: tab.id});
  gettingTitle.then(gotTitle);
}
browser.pageAction.onClicked.addListener(toggleCSS);

pageAction.setIcon()

tabId: tab.Id アクティブのIDを指定。アクティブタブというよりページアクションのIDなのかよく分かってない。

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

pageAction.setTitle()

setIcoonとほとんど同じ。クリックで送られてきたタブのIDを指定。

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

tabs.insertCSS()

tabs.removeCSS()

ページにCSSを設定できる。{code: 文字列}で文字列でCSSを追加できる。

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

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

pageAction.getTitle()

ページアクションのタイトルを取得する。

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

pageAction.onClicked.addListener()

ページアクションがクリックされたときに発生。ページアクションにポップアップを設定している場合はこのイベントは発生しない。

addListenerのコールバックには関数を引数には現在のtabが渡される。

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

background.js

const APPLICABLE_PROTOCOLS = ["http:", "https:"];

function protocolIsApplicable(url) {
  var anchor =  document.createElement('a');
  anchor.href = url;
  return APPLICABLE_PROTOCOLS.includes(anchor.protocol);
}

function initializePageAction(tab) {
  if (protocolIsApplicable(tab.url)) {
    browser.pageAction.setIcon({tabId: tab.id, path: "icons/off.svg"});
    browser.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
    browser.pageAction.show(tab.id);
  }
}

var gettingAllTabs = browser.tabs.query({});
gettingAllTabs.then((tabs) => {
  for (let tab of tabs) {
    initializePageAction(tab);
  }
});

browser.tabs.onUpdated.addListener((id, changeInfo, tab) => {
  initializePageAction(tab);
});

function protocolIsApplicable(url)

渡されたurlのプロトコルが”http:”か”https:”かを判定する関数。真理値で返す。

insertCSSとremoveCSSが使えないプロトコルのページがあるので。

function initializePageAction(tab)

送られてきたタブを初期化する関数。

pageAction.show(tab.id)

指定されたタブでページアクションを表示。これを指定しないとページアクションアイコンが表示されないから必須の命令のような気がするがデフォルトの設定をどこかで変えられるのか不明。

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

17-22行目ブラウザがロードされたときに全てのタブを取得してページアクションを更新。

tabs.onUpdated.addListener()

タブが更新されたときに呼び出されるイベント。引数にはid, changeInfo, tabが渡される。

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