昨日、初めてChrome拡張機能を公開申請しました。
現在は審査中です。
審査が通ったら改めて公開した拡張機能について記事を書きます。
審査が通りました。
【Chrome拡張機能】「Black List Site」を公開しました。 - 新米エンジニアの失敗再発防止メモ
コンソールが３つある
・background.js のコンソール
・popup.html・popup.js(ポップアップ)のコンソール
・content.js(開いているページ)のコンソール
の３つがあります。
F12で開けるコンソールは上記のうちcontent.jsの出力しか確認できません。
ポップアップのコンソールは、ポップアップを右クリックし、「検証」をクリックすることで開くことができます。
background.jsのコンソールは、chrome://extensions/ を開き、「バックグラウンドページ」をクリックすることで開くことができます。
onclickが使えない
<input id="entry" type="button" value="登録" onclick="func();">
とかやると、ポリシー違反で以下のようなエラーが表示されます。
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
同様に、onBlur, onChange, onClick, onFocus, onSelect, onSubmit などその他、on～系のは大体使えません。
下記のように、面倒くさがらずにリスナーを使いましょう。
background.js
document.addEventListener('DOMContentLoaded', function() {
var entryElement = document.getElementById('entry');
entryElement.addEventListener('click', function() {
//何かしらの処理
});
});
ストレージの共有範囲
ストレージは、2種類ありますね。
・各種ブラウザで標準で使えるlocalStorage
・chrome独自で用意しているchrome.storage
今回私が使ったのはchrome.storageなので、こちらについて説明しますね。
localStorageでも同じなんですが、chrome.storageは、ブラウザにデータを保存するデータベースのようなものです。
popup.js と background.jsのストレージ範囲は共有
content.js のストレージは上記２つと共有しない。
よって、content.jsに値を渡したい時はmessageを使うこと
例えば、
1. popup.jsで何かしらのデータを入力して登録
2. 何かしらのページを開いたときに、1で入力したデータを参照して何かしらの処理を実行する
のようなことをしたい時は、
1. popup.jsでストレージに入力データを登録
2. background.jsで、ページが開かれた時にchrome.tabs.sendMessageでcontent.jsにデータを送る
3. content.jsで、2で送られてきたデータを受け取る
のようにする必要があります。
「2. background.jsで、ページが開かれた時にchrome.tabs.sendMessageでcontent.jsにデータを送る」
これは以下のようにして実現できます。
background.js
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
chrome.storage.sync.get(['data'], function(result) {
chrome.tabs.sendMessage(tabId, {"data": result.data});
});
});「chrome.storage.sync.get」は、ストレージからデータを取り出す非同期な処理です。
ストレージにデータを保存する処理は、「chrome.storage.sync.set」を使います。
詳しくは公式ドキュメントをご覧ください。簡単です。
chrome.storage - Google Chrome
「chrome.tabs.onUpdated.addListener」は、タブの更新を検知するリスナーです。
「3. content.jsで、2で送られてきたデータを受け取る」
これは以下のようにして実現できます。
var data = '';
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
data = request.data;
// dataを使った何らかの処理
}
);「chrome.runtime.onMessage.addListener」は、メッセージの受信を検知するリスナーです。
これも当然、非同期なので、受信したデータを利用した処理をするなら、このスコープの中に書いた方がタイミングで困りません。
