Google chrome extension 从网页向chrome扩展发送消息

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

根据您应该在发送方中使用，而在接收方中使用事件侦听器

以下是一个例子：

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

您网站的页面.html

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

内容脚本：（使用

chrome.tabs.executeScript（tabid，{code:…

）注入）

这里

page.html

（它不是扩展的一部分）向自身发布消息，内容脚本会截取和检查这些消息。通过类似的方法也可以实现相反的效果

要从内容脚本传递到扩展，必须使用

---

它看起来很复杂，也有点复杂，但所有这些乱七八糟的东西都是非常安全的。

您可以使用页面开发者JS控制台底部的

菜单切换到内容脚本的JS执行上下文，然后使用

chrome.runtime.sendMessage

和其他

chrome.

API，就像您想要的那样d在内容脚本中

---

这里引用了最新的一段话，现在支持这种功能要简单得多，下面介绍如何：

从网页发送消息 与跨分机消息传递类似，您的应用程序或分机可以 接收和响应来自常规网页的消息。若要使用此 功能，您必须首先在

manifest.json

中指定哪个网站 要与之通信的站点。例如：

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

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

这将向与URL匹配的任何页面公开消息传递API 您指定的模式。URL模式必须至少包含 第二级域-即，主机名模式，如“.com”， 禁止使用“.co.uk”和“.appspot.com”和。 在网页中，使用runtime.sendmages或runtime.connect API 向特定应用程序或扩展发送消息。例如：

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

// 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.onConnect外部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);
  });

---

除了@hewigovens，我没有足够的观点来评论。。。 我在解释renatoargh和sbichenko 如果从默认网页发送消息-

1） 该网页需要在清单中引用。例如：

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

2） background.js（后台页面） 使用onMessageExternal调用除外，例如（调用分机）：

---

因此，要详细说明一个更具体的示例：

chrome.runtime.sendMessage（…）

样式的一个问题是，您必须将您所在的pag指定为可外部连接的pag，该pag不采用“https://”之类的全局通配符。因此，如果您需要这种功能，您必须使用

postMessage

通信。将消息从窗口捕获到

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

例如，您可以将其添加到如下按钮：

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

---

我可以试着在网站的html中插入代码，以便通过“chrome.tabs.executeScript（）”命令发送事件吗？我厌倦了，它不起作用了……它说，“端口错误：无法建立连接：接收端不存在：谢谢。我想知道如何比window.postMessage更安全地执行此操作。这肯定会有较少的副作用，但不幸的是，可能会被恶意网页篡改。我期待这将允许更安全的（希望）渠道communication@kzahel内容脚本在它们自己的上下文中运行，因此它与网页上下文隔离。内容脚本可以访问DOM（HTML元素），基本上，如果您想在上下文之间传递数据，您可以附加侦听器，您可以通过事件来实现。请注意，有3种不同的上下文：扩展、自定义脚本和网页脚本。第一个链接提到使用

windows.postMessage（…）

显然你甚至不需要自定义myCustomEventDiv，因为它…很高兴在一个小时的搜索后找到它。感谢您的编写！这对我很有用。但是，我有一个问题。人们如何找到他们的扩展ID？目前我只是硬编码。如何查看扩展接收到的消息，我正在使用Unpacket扩展名。我目前正在开发它。@user1311069扩展名生成机制在这里解释：使用

chrome.runtime.onMessageExternal.addListener（）侦听事件

请注意，从FF 54开始，该方法目前在Firefox中不起作用。有关可能的解决方案，请参阅：如果屏幕截图中显示的执行上下文切换菜单没有出现（Chrome v 39.0.2171.95 m，Windows 7），原因是什么？仅供参考-我可以通过打开扩展页面访问扩展上下文控制台（

chrome://extensions

）并单击Inspect views:background page链接，因此缺少上下文切换菜单并不是一个大问题。在最近的版本中，Chrome将执行上下文菜单与框架菜单相结合。如果您的扩展在页面中有一个内容脚本，您现在应该会看到它列在

下。感谢您提供的提示。不幸的是，我只有ee

当我单击下拉列表时，即使页面脚本能够与扩展通信没有问题。但由于我可以使用扩展页面的后台页面链接，这只是一个表面问题。@mrts