contentscripts.js からHTML内にタグを挿入することで動作します。
質問の状況を整理すると、
と読むことができますが、この認識で良いでしょうか。
拡張機能の仕様として、見かけ上は同じページにスクリプトが挿入されていても互いに干渉することができないため、代替の手段を取る必要があります。
引数を渡したい場合、data属性を利用するなど、いくつかの方法があります。
※参考として、以前サンプルとして用意したはてなブログの一部分に挿入するものもご確認ください。
はてなブログのエディタ画面で何かを表示させるサンプル拡張機能
▽2
●
a-kuma3 ●300ポイント ベストアンサー |
公式ページでは、window.postMessage() を使う例が挙げられています。
ただ、window.postMessage() の説明では、以下のようなことも書かれています。
Window.postMessage() - Web APIs | MDN #Using window.postMessage in extensions
Content scripts should use runtime.sendMessage to communicate with the background script. Web context scripts can use custom events to communicate with content scripts (with randomly generated event names, if needed, to prevent snooping from the guest page).
質問の追記に書かれているはてなダイアリーで紹介されている方法です。
ただ、括弧内に書かれているようにイベントの名前を送る側(Web content script) と受ける側(Content script)で握っておかなければいけないので、先の MDN のサンプルコードのように、送信するデータに決まった目印を入れて、それを受け取る側でチェックをすれば、window.postMessage() とあまり変わらないような気もします。
// page-script.js var messenger = document.getElementById("from-page-script"); messenger.addEventListener("click", messageContentScript); function messageContentScript() { window.postMessage({ direction: "from-page-script", message: "Message from the page" }, "*");
// content-script.js window.addEventListener("message", function(event) { if (event.source == window && event.data && event.data.direction == "from-page-script") { alert("Content script received message: \"" + event.data.message + "\""); } });
因みに、Developer.chrome.com のサンプルのように、送り元を特定するなら "type" のような属性名にするのが自然だろうに、何故に "direction" というのは、先の MDN のサンプルコードの末尾にある ”visit the demo page on GitHub” を見ると分かります。
そのサンプルでは、Content script → Web content script への通信も併せて書いてあるからです。