=====================================

Question

我正在尝试制作简单的Chrome扩展程序。如果有人可以提供帮助，我会很高兴。

目标：当您点击扩展程序弹出窗口（popup.html）中的按钮时，当前网页的标题会显示在div中（ID为'div1'）。

问题：我已经在互联网上搜索了这一点，发现传递消息可以用来实现同样的目的。所以我尝试了一下。但它不起作用。我想知道出了什么问题。

状态：

=扩展程序已在Chrome中成功导入。

=单击扩展图标时，会显示正确的弹出窗口。

=单击按钮时没有任何反应。

=开发者控制台显示没有错误。

文件：

=====================================

 //manifest.json
    {
      "manifest_version": 2,
      "name": "some_name_extension",
      "version": "0.0.1",
      "content_scripts": [
        {
          "matches": [
          "<all_urls>"
          ],
          "js": ["jquery-3.2.1.js", "content_script.js"]
        }
      ],
      "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
       }
    }

=====================================

<!-- popup.html -->
<! doctype html>
<html>
<head>
    <title>
    </title>
    <script type="text/javascript" src="popup.js">
    </script>
    <style>
        html
        {
            height: 200;
            width: 200;
        }
    </style>
</head>
<body>
    <button id="btn1">
        click me!
    </button>
    <div id="div1">
        (title will be displayed here)
    </div>
</body>
</html>

=====================================

//content_script.js
document.addEventListener('DOMContentLoaded', function() {
var title1=document.getElementsByTagName("title")[0].innerHTML;

chrome.extension.onMessage.addListener(

function(msg, sender, sendResponse) {
    if(sender=="popup")
    {
        chrome.extension.sendMessage(title1,"content","1");
    }
   });
 });

=====================================

//popup.js
document.addEventListener('DOMContentLoaded', function() {
    var mainBtn = document.getElementById('btn1');
    mainBtn.addEventListener('click', function() {
        chrome.extension.sendMessage("button_clicked","popup","1");
    });

    chrome.extension.onMessage.addListener(

    function(msg, sender, sendResponse) {
        if(sender=="content")
        {
            document.getElementById("div1").innerHTML=msg;
        }
    } 
   );
 });

=====================================

链接到jquery脚本文件：https://code.jquery.com/jquery-3.2.1.js

Answer 1

sender是一个由浏览器自动设置的对象，而不是您自己可以传递的字符串。使用devtools调试器通过在回调中设置断点来检查代码和变量，不要盲目地编写代码。
在这种情况下无需检查sender，因为内容脚本无论如何都无法互相发送消息。

从弹出窗口向内容脚本发送邮件的正确方法是chrome.tabs.sendMessage，其中tabId为第一个参数：

chrome.tabs.query({active: true, currentWindow: true}, ([tab]) => {
  chrome.tabs.sendMessage(tab.id, {
    action: 'setTitle', 
    title: title1,
  });
});

要一次发送多个值，请使用对象：{action: 'setTitle', title: title1}或{action: 'buttonClicked', data: 1}，依此类推。
chrome.extension进行消息传递，请使用chrome.runtime
您的代码不使用jQuery，因此无需在manifest.json

sendMessage在chrome扩展中不起作用

=====================================

=====================================

1 个答案: