WebExtensionsメモ apply-css

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

 

       ____
     /⌒  ⌒\
   /  癶   癶 \
  /::::::⌒(__人__)⌒::::: \ コメント待ってるよー
  |     |r┬-|     |
  \      `ー'´     /

コメントを残す

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

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