web-dev-qa-db-ja.com

Webページからchrome拡張機能にメッセージを送信する

ランダムWebページのコンソールからメッセージをchrome extension。chrome.extension.sendMessageが機能しないようです。

google-chrome-extensiongoogle-chrome-devtools
46
dilpreet023

公式ドキュメント によると、送信者では postMessage を使用し、受信者では message を使用する必要があります。

以下に例を示します。

あなたのウェブサイトのpage.html

var data = { type: "FROM_PAGE", text: "Hello from the webpage!" };
window.postMessage(data, "*");

コンテンツスクリプト：（chrome.tabs.executeScript(tabid, {code:...）

window.addEventListener("message", function(event) {
    // We only accept messages from ourselves
    if (event.source != window)
        return;

    if (event.data.type && (event.data.type == "FROM_PAGE")) {
        console.log("Content script received message: " + event.data.text);
    }
});

ここに page.html（これは拡張機能の一部ではありません）は自身にメッセージを投稿し、コンテンツスクリプトによって傍受および検査されます。逆も同様の方法で可能です。

コンテンツスクリプトから拡張機能に渡すには、 利用可能なメッセージ受け渡し技術の1つ を使用する必要があります。

複雑に見えますが、やや複雑ですが、このジャンボジャンボはすべて非常に安全です。

56
Silviu-Marian

最新の http://developer.chrome.com/extensions/messaging.html からの引用です。この種の機能をサポートする方がはるかに簡単です。その方法は次のとおりです。

Webページからメッセージを送信する

拡張機能メッセージングと同様に、アプリまたは拡張機能は通常のWebページからメッセージを受信して​​応答できます。この機能を使用するには、mustで最初にmanifest.json通信するWebサイト。例えば：

"externally_connectable": {
  "matches": ["*://*.example.com/*"]
}

これにより、指定したURLパターンに一致するページにメッセージングAPIが公開されます。 URLパターンには、少なくとも第2レベルのドメイン、つまり「」、「。com」、「。co。」のようなホスト名パターンが含まれている必要があります。 uk」、「。appspot.com」および<all_urls>は禁止されています。 Webページから、runtime.sendMessageまたはruntime.connect APIを使用して、特定のアプリまたは拡張機能にメッセージを送信します。例えば：

// The ID of the extension we want to talk to.
var editorExtensionId = "abcdefghijklmnoabcdefhijklmnoabc";

// Make a simple request:
chrome.runtime.sendMessage(editorExtensionId, {openUrlInEditor: url},
  function(response) {
    if (!response.success)
      handleError(url);
  });

アプリや拡張機能から、ランタイム間メッセージングと同様に、runtime.onMessageExternalまたはruntime.onConnectExternal APIを介してWebページからメッセージを聞くことができます。 Webページのみが接続を開始できます。以下に例を示します。

chrome.runtime.onMessageExternal.addListener(
  function(request, sender, sendResponse) {
    if (sender.url == blacklistedWebsite)
      return;  // don't allow this web page access
    if (request.openUrlInEditor)
      openUrl(request.openUrlInEditor);
  });
46
hewigovens

つまり、より具体的な例を示します。chrome.runtime.sendMessage(...)スタイルの問題は、「https：///」。そのため、その機能が必要な場合は、postMessagestyle 通信を使用する必要があります。ウィンドウからcontentscriptにメッセージをキャプチャし、contentscriptからメッセージを他の場所に送信できます（必要に応じて、background.jsなど）

そのため、通常のWebページ、または通常のページに埋め込むインジェクトされたソースで、contentscript.js、次のようなメッセージを送信します。

window.postMessage({ type: "FROM_PAGE_TO_CONTENT_SCRIPT", 
     text: "Hello from the webpage!" }, "*");

例、次のようなボタンに追加できます。

document.getElementById("theButton").addEventListener("click",
    function() {
       window.postMessage({ type: "FROM_PAGE_TO_CONTENT_SCRIPT", 
                            text: "Hello from the webpage!" }, "*");
}, false);

次に、それをcontentscript.jsでキャプチャし、残りの拡張機能に「送信」するための唯一の注意点は、関心のあるメッセージと思われるメッセージのみを選択することです。

window.addEventListener("message", function(event) {
  // We only accept messages from this window to itself [i.e. not from any iframes]
  if (event.source != window)
    return;

  if (event.data.type && (event.data.type == "FROM_PAGE_TO_CONTENT_SCRIPT")) {        
    chrome.runtime.sendMessage(event.data); // broadcasts it to rest of extension, or could just broadcast event.data.payload...
  } // else ignore messages seemingly not sent to yourself
}, false);
5
rogerdpack

ページの開発者JSコンソールの下部にある<page context>メニューを使用して、コンテンツスクリプトのJS実行コンテキストに切り替えてから、chrome.runtime.sendMessageおよび他のchrome.* AP​​Iを使用できます。コンテンツスクリプト。

enter image description here

5
jaredjacobs

@hewigovensに加えて、コメントするのに十分なポイントがありません... @renatoarghと@sbichenkoを説明しています。デフォルトのWebページからメッセージを送信する場合-

1）マニフェストでウェブページを引用する必要があります。例えば。：

"externally_connectable": {
  "matches": ["http://abcde/abcde/main.aspx*"]
}

2）background.js（背景ページ）は、onMessageExternalによる呼び出しを除きます。 （拡張機能を呼び出す）：

var Host_name = "com.my_chrome_extension.com";
 chrome.runtime.onMessageExternal.addListener(function(message, sender, sendResponse) {
    chrome.runtime.sendNativeMessage(Host_name, {"run":message});
    sendResponse({"success": "success"});
    return true;
});
3
AJ AJ