1

我是 chrome 扩展的新手，入门时遇到了一些麻烦。

首先，我的总体目标是能够单击弹出窗口中的按钮并在 DOM 中进行一些更改。如果我理解正确的话，这样做的方法是加载一个内容脚本并向这个内容脚本发送一条消息。这是我查看 Chrome 开发人员页面所得到的，但我在控制台日志中看不到任何内容：

清单.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);
        });
    });
});

内容.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"});
    });

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

4

2 回答 2

2

我只是将您的代码复制到我的机器上并按原样运行它，它可以按您的预期工作。不过，我认为您可能会对您期望的输出出现在哪里感到困惑。console.log

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

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

有关更多信息，请参阅Chrome 扩展调试教程。

PS。 chrome.tabs.getSelected已弃用；你应该chrome.tabs.query改用。我同意方觉的观点——你应该考虑使用程序化注入来改变你的 DOM。

于 2013-04-21T15:02:46.557 回答
-1

popup.js 脚本将在您加载 popup.html (DOMContentLoaded) 时启动该文件。但是可以肯定的是，内容将被注入脚本还没有在任何网页中，因为你还没有来​​得及打开它，并且“匹配”：[“http:// * / *”]，就可以了. 通过后台脚本更改后台内容脚本，我认为它会起作用。

于 2013-04-19T09:01:20.983 回答