Question

我是Chrome扩展的新手，我在开始时遇到了一些麻烦。

首先，我的总体目标是能够点击弹出窗口中的按钮并在DOM中进行更改。如果我理解正确，那么执行此操作的方法是加载内容脚本并向此内容脚本发送消息。这是我查看Chrome开发者页面时的内容，但我在控制台日志中看不到任何内容：

的manifest.json

{
    "manifest_version": 2,

    "name": "Test",
    "version": "1.0",

    "permissions": [
        "tabs", "http://*/*"
    ],

    "content_scripts": [
        {
            "matches": ["http://*/*"],
            "js": ["content.js"]
        }
    ],

    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    }
}

popup.html

<html>
  <body>
    <script src="popup.js"></script>
  </body>
</html>

popup.js

document.addEventListener('DOMContentLoaded', function () {
    chrome.tabs.getSelected(null, function(tab) {
        chrome.tabs.sendMessage(tab.id, {greeting: "hello"}, function(response) {
            console.log(response.farewell);
        });
    });
});

content.js

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        console.log(sender.tab ?
                    "from a content script:" + sender.tab.url :
                    "from the extension");
        if (request.greeting == "hello")
            sendResponse({farewell: "goodbye"});
    });

很多代码都直接来自文档，所以我不知道我做错了什么。

Answer 1

我只是将您的代码复制到我的机器上并按原样运行它并且它按预期工作。我想你可能会对你期望的console.log输出感到困惑。

打开任何网页并打开该页面的控制台。点击您的浏览器操作，弹出窗口显示，确定显示行from a content script:chrome-extension://fndmlopghajebfadeabnfnfmhalelokm/popup.html。

你看不到你的goodbye行 - 因为那是从popup.js注销的，而不是标签的内容脚本。让我们为弹出窗口打开一个检查器，然后在那里查找goodbye消息。右键单击浏览器操作图标，然后选择“检查弹出”菜单项。显示您的（空）弹出窗口，并出现一个新的检查窗口;选择控制台标签，您会在那里看到goodbye消息。

有关其他信息，请参阅Chrome Extension Debugging tutorial。

PS。 chrome.tabs.getSelected已被弃用;而是you should use chrome.tabs.query。我同意方觉 - 你应该考虑使用程序化注入来改变你的DOM。

Answer 2

当您加载popup.html（DOMContentLoaded）时，popup.js脚本将启动该文件。但可以肯定的是，内容将被注入脚本尚未出现在任何网页中，因为你没有时间没有时间打开它并且“匹配”：[“http：// * / *”]，没关系。通过后台脚本更改后台内容脚本，我认为它可以正常工作。

传递chrome扩展的消息不起作用

2 个答案: