从弹出窗口到 content.js 的 sendMessage 在 chrome 扩展中不起作用答案

【问题标题】：sendMessage from popup to content.js not working in chrome extension从弹出窗口到 content.js 的 sendMessage 在 chrome 扩展中不起作用
【发布时间】：2015-07-07 17:27:38
【问题描述】：

我正在尝试为 chrome 扩展程序制作弹出界面。我似乎无法从 popup.html/popup.js 向 content.js 脚本发送消息。这是我到目前为止所拥有的。当我单击扩展图标时，我会看到一个显示 clickme 的按钮。我单击它并没有任何反应，chrome javascript 控制台中没有错误，也没有向 content.js 发送消息。

清单

{
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
  "manifest_version": 2,
  "name": "extensiontest",
  "version": "0.2",
  "content_scripts": [
  {
    "matches": [
      "<all_urls>"
    ],
    "js": ["content.js"]
  }
],
"browser_action": {
  "default_icon": "Beaker.png",
    "default_popup":"popup.html"
},
"background": {
  "scripts": ["background.js"]
},
"permissions": [
    "tabs"
  ]
}

popup.html

<html>
<head></head>
<script src="popup.js"></script>
<body>
<input id="button1" type=button value=clickme>
</body></html>

popup.js

function popup(){
    alert(1);
      chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {"message": "start"});
  });

button1=document.getElementById("button1");
button1.addEventListener('click', popup)
}

content.js

   chrome.runtime.onMessage.addListener(
      function(request, sender, sendResponse) {
        if( request.message === "start" ) {
         start();
             }
      }
    );

    function start(){
        alert("started");
    }

【问题讨论】：

标签： google-chrome-extension popup sendmessage

【解决方案1】：

我修改了您的 popup.js 并使用了 DOMContentLoaded 作为 Chrome 扩展建议，如下所示：

popup.js：

 function popup() {
    chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {"message": "start"});
   });
}

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("button1").addEventListener("click", popup);
});

content.js：

chrome.runtime.onMessage.addListener(
      function(request, sender, sendResponse) {
        if( request.message === "start" ) {
         start();
             }
      }
    );

    function start(){
        alert("started");
    }

popup.html：

<!DOCTYPE html>
<html>
<head></head>
<script src="popup.js"></script>
<body>
<input id="button1" type=button value=clickme>
</body></html>

我已经测试过它可以工作。

【讨论】：

嗨@gui47 我知道你在 2015 年发表了那篇文章，但我想知道从那时起 chrome 扩展 api 或政策是否有任何重大变化，因为我尝试了你的确切代码但我没有收到任何错误，但内容脚本似乎没有执行 onMessage。
@Nina 同样发生在这里
不工作...我认为政策发生了一些变化
它适用于我的 Chrome 版本“版本 85.0.4183.121（官方构建）（64 位）”
对于像我这样急于立即看到结果的人，不要忘记在实施此（或任何其他）修复后重新加载您的扩展。然后就可以了。

【解决方案2】：

2015 年的答案仍然适用于 chrome 版本 88.0.4324.104。我刚刚测试了这个。我要更新的一件事是：

alert("started"); 在 content.js 中使用 console.log("started");

你有你的证明（点击F12，控制台选项卡）它对你持续有效，你可以验证 x 次点击会产生 x 次“启动”日志条目。

确保每次“Load Unpacked”时都重新加载目标页面，这让我卡了一会儿。

我的manifest.json 看起来像这样：

{
"name":"Chr Ext",
"description":"blah blah",
"version":"2",
"minimum_chrome_version": "46",
"manifest_version":2,
  "content_scripts": [
  {
    "matches": [
      "<all_urls>"
    ],
    "js": ["content.js"]
  }],
    "permissions": [
        "tabs"
    ],
    "browser_action": {
        "default_popup": "popup.html"
    }
}

【讨论】：