Question

我想从随机网页的控制台向我的Chrome扩展程序发送消息。 chrome.extension.sendMessage似乎不起作用。

Answer 1

根据the official docs，您应该在接收方的发件人和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（不是扩展程序的一部分）将消息发布到自身，这些消息由内容脚本拦截和检查。通过类似的方式可以反过来。

要从内容脚本传递到扩展程序，您必须使用one of the available message-passing techniques。

它看起来很复杂而且有点复杂，但所有这些都非常安全。

Answer 2

以下是最新http://developer.chrome.com/extensions/messaging.html的引用，现在支持这种功能要简单得多，具体如下：

从网页发送消息

与交叉扩展消息传递类似，您的应用或扩展程序可以   接收并回复来自常规网页的消息。要用这个   功能，您必须首先在manifest.json哪个网站中指定   您想要与之通信的网站。例如：
"externally_connectable": {
  "matches": ["*://*.example.com/*"]
}
这会将消息传递API公开给任何与URL匹配的页面您指定的模式。 URL模式必须至少包含一个二级域名 - 即“”，“ .com”等主机名模式， “ .co.uk”和“ .appspot.com”和＆lt; all_urls＆gt;被禁止。在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，类似于跨扩展消息传递。只有网页可以启动连接。这是一个例子：
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);
  });

Answer 3

您可以使用页面开发人员JS控制台底部的<page context>菜单切换到内容脚本的JS执行上下文，然后使用chrome.runtime.sendMessage和其他chrome.* API你会在内容脚本中。

enter image description here

Answer 4

所以详细说明一个更具体的例子：chrome.runtime.sendMessage(...)样式的一个问题是你必须指定你所使用的pag作为external_connectable，它不会采用像“https：// <这样的全局通配符” EM> / ”。因此，如果您需要该功能，则必须使用postMessage style通信。将消息从窗口捕获到contentscript，然后从contentscript捕获，您可以将其发送到其他位置（如果需要，可以发送到background.js等。）

因此，在普通网页或您嵌入普通网页的注入来源中，从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);

Answer 5

除了@hewigovens之外，我没有足够的评论意见...... 我在解释@renatoargh和@sbichenko 如果从默认网页发送消息 -

1）需要在清单中引用网页。 e.g：

"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;
});

从网页向chrome扩展程序发送消息

5 个答案:

从网页发送消息