Chrome 扩展从 Background.js 向内容脚本发送消息答案

【问题标题】：Chrome Extension Send Message From Background.js to Content ScriptChrome 扩展从 Background.js 向内容脚本发送消息
【发布时间】：2014-02-04 13:16:34
【问题描述】：

我已阅读有关如何将消息从后台 javascript 文件 (main.js) 发送到内容脚本 (content.js) 的文档，但我无法让 onMessage 打开我的警报。

Manifest.json

{
   "name": "Example",
   "version": "1.0.1",
   "manifest_version" : 2,
   "description": "Example Description",
   "background" : {
     "scripts" : ["main.js"]
   },
   "page_action" : {
      "default_icon": {
         "19": "icons/19.png",
         "38": "icons/38.png"
      },
      "default_title" : "Example Title"
   },
   "content_scripts": [{
      "matches": ["<all_urls>"],
      "js": ["lib/jquery-1.8.3.min.js","scripts/content.js"],
      "run_at": "document_idle",
      "all_frames": false
   }],
   "permissions": [
       "tabs",
       "geolocation"
   ],
   "icons": {
       "16": "icons/16.png",
       "48": "icons/48.png",
       "128": "icons/48.png"
   }

}

后台 javascript 文件 (main.js)

chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
    chrome.tabs.sendMessage(tabs[0].id, {action: "SendIt"}, function(response) {});  
});

内容 javascript 文件 (content.js)

chrome.extension.onMessage.addListener(function(msg, sender, sendResponse) {
   if (msg.action == 'SendIt') {
      alert("Message recieved!");
   }
});

【问题讨论】：

我认为你需要从你的popup.js and not from background调用它
我的猜测是在加载内容脚本之前后台正在发送消息。您可以使用页面操作的 onclick 来发送消息吗？
Teepeem 的猜测很合理。上面显示的代码是否在 background.js 中？如果不是什么触发将消息发送到选项卡？
后台页面中的代码执行一次（Chrome 启动时）。加载背景页面后，没有任何文档包含内容脚本。因此，您看不到任何警报消息。
我对 RobW 和 @Teepeeemm 的洞察力给予了加分。我在发送消息之前添加了选项卡加载完成的触发器。

标签： google-chrome-extension manifest content-script

【解决方案1】：

感谢@Teepeemm 的洞察力，我在向内容脚本发送消息之前包含了一个选项卡加载完成。

等待标签完全加载

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {          
   if (changeInfo.status == 'complete') {   
      chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
         chrome.tabs.sendMessage(tabs[0].id, {action: "SendIt"}, function(response) {});  
      });
   }
});

【讨论】：

发现这一点的未来程序员应该知道，您不应该在每个页面加载后立即使用页面操作来执行某些操作；在这方面，浏览器操作或内容脚本会更好。但我认为在您的情况下，您的页面操作过度活跃，因为这就是您的 SSCCE 最终的结果。

【解决方案2】：

如果您让每个脚本都宣布其存在（我更喜欢 console.log 而不是 alert），您会看到后台脚本运行一次（在安装或启动时），而内容脚本随每个新页面运行。这意味着您需要一些外部事件触发消息。类似的东西

chrome.pageAction.onClicked.addListener(function(tab) {
    chrome.tabs.sendMessage(tab.id,{action:"SendIt"});
});

别忘了酌情致电chrome.pageAction.show(tabId);。

【讨论】：

【解决方案3】：

旁注：chrome.extension.onMessage 已弃用，您应该使用chrome.runtime.onMessage - 尽管我不相信这会解决您的问题。

我记得我在使用内容脚本注入缩小的 jquery 文件时遇到了问题。尝试使用未缩小的版本（即 jquery-1.8.3.js）。完成此操作后，还要在清单文件中添加 jquery-1.8.3.js 到 web_accessible_resources。（阅读here）

如果它仍然不起作用，我的最后一个建议是将"<all_urls>" 添加到清单中的权限数组中。

【讨论】：

+1 用于建议正确的chrome.runtime.onMessage。 -1 表示它不会解决问题（如果它取决于其他事情，但这不是重点） -1 表示缩小版本会导致问题（如果缺少源映射可能会出现问题，但那是另一个故事）-5 建议 web_accessible_resources 与问题无关 -10 建议 <all_urls> ！完全不相关且安全方面的大错误！