Table of Contents
ブラウザの拡張機能（Chrome Extension）を作成するチュートリアル（Getting Started Tutorial – Google Chrome）に従うと、マニフェスト（manifest.json）に pageAction を使用することになります。
...
"permissions": ["activeTab", "storage", "declarativeContent"],
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
...
pageAction は、特定のページでしか拡張機能を有効にしたくないという場合に使用するオプションです。チュートリアルでは、その条件を background.js で以下のように declarativeContent を使用して定義しています。
...
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostEquals: 'developer.chrome.com'},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
...
ハイライトした部分が、実際に拡張機能を有効とするURLを指定している部分です。この例では developer.chrome.com が含まれるURLのみ拡張機能が有効になります。指定外のURLのページでは、アイコンが灰色の状態となります。
しかし、あらゆるページで拡張機能を有効化したいという場合、上記のコードを削除するだけでは解決しません。そこで pageAction を browserAction へ変更する必要があります。
browserAction に変更後のファイル
マニフェストでは、以下2つのに変更を行います。
- page_action の部分を browser_action に変更
- permissions の declarativeContent を削除
変更後のマニフェストの中身は以下のようになります。
...
"permissions": ["activeTab", "storage"],
"browser_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
...
そして background.js の以下の部分を削除します。
chrome.runtime.onInstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log('The color is green.');
});
// この部分を削除
// chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
// chrome.declarativeContent.onPageChanged.addRules([{
// conditions: [new chrome.declarativeContent.PageStateMatcher({
// pageUrl: {hostEquals: 'developer.chrome.com'},
// })
// ],
// actions: [new chrome.declarativeContent.ShowPageAction()]
// }]);
// });
});
以上の変更によって、全てのページで有効な Chrome Extension を作成することができます。
チュートリアルのミス
この記事の執筆時点では、チュートリアルの option.js に以下の一文が抜けているためエラーになります。ダウンロードした拡張機能のサンプルでも同様でした。
const page = document.getElementById("buttonDiv");
変数 kButtonColors の定義文の下などに書き加えて下さい。