特定网页与 chrome 扩展程序之间的通信答案

【问题标题】：Communication between specific web page and chrome extension特定网页与 chrome 扩展程序之间的通信
【发布时间】：2014-03-13 13:05:52
【问题描述】：

我尝试在特定网页（例如：www.website.dev）和我创建的 chrome 扩展之间创建一个通信渠道。

通过使用 postMessage，它可以从网页到扩展，但我不能从扩展到网页。

我尝试了 Google 示例，但它使用背景页面

感谢您的帮助

编辑：抱歉，我不明白 content_script 和 background.js 之间的区别在我的清单中，我有 content script = test.js “背景”是什么？

【问题讨论】：

标签： javascript google-chrome google-chrome-extension

【解决方案1】：

如果您知道扩展程序 ID，则可以按照文档将消息传递给您的扩展程序： https://developer.chrome.com/extensions/messaging#external-webpage

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

扩展名：

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

【讨论】：

【解决方案2】：

您将在文档https://developer.chrome.com/extensions/messaging中找到所有详细信息

你可以让一个片段使用 sendMessage 函数，而另一个片段正在监听事件，它可以是网页或内容脚本。

网页的内容脚本应该启动通信（因此您将获得标签 ID），或者您可以对具有特定 url 的标签进行后台查询，然后使用 sendMessage。注意这里使用了两个独立的函数chrome.extension.sendMessage 和chrome.tabs.sendMessage。

以下代码适用于我：

content_script.js：

chrome.extension.sendMessage({"msg":"hello"});

background.js：

chrome.extension.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.msg == "hello"){
    senderTab = sender.tab.id;
    chrome.tabs.sendMessage(senderTab, {"msg": "ehlo"});
  };
})

【讨论】：

我相信用户问的是如何在页面和内容脚本之间进行通信，而不是在内容脚本和后台脚本之间。