在Chrome扩展中传递的消息不起作用 [英] Message passing in chrome extension not working
问题描述
我是铬合金扩展新手，开始时遇到了一些麻烦。
首先，我的总体目标是能够点击按钮在我的弹出窗口中，并有东西在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>
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：
）;
if（request.greeting ==hello）
sendResponse（{farewell：goodbye}）;
}）;
很多代码直接来自文档，所以我不知道自己在做什么错误。
我只是将您的代码复制到我的机器上，并按原样运行，并按预期运行。不过，您可能会对 感到困惑，不过您可能会看到 console.log 输出。
打开任何网页并打开该页面的控制台。点击您的浏览器操作，弹出窗口显示，并确定内容脚本中的行：chrome-extension：//fndmlopghajebfadeabnfnfmhalelokm/popup.html 出现。
然而，您看不到再见行，因为这是从弹出式窗口中注销的.js ，而不是标签的内容脚本。让我们打开弹出式检查器，在那里查找再见消息。右键单击浏览器操作图标并选择Inspect popup菜单项。您的（空）弹出窗口显示，并出现一个新的检查器窗口;选择Console选项卡，您将在那里看到 goodbye 消息。
有关其他信息，请参阅 Chrome扩展调试教程。
chrome.tabs.getSelected 已被弃用; 你应该使用 chrome.tabs.query 。我同意方觉 - 你应该考虑使用编程注入来改变你的DOM。
I'm new to chrome extensions and I'm having a bit of trouble getting started.
First of all my overall goal is to be able to click a button in my popup and have something in the DOM change. If I understand correctly, the way to do this is to load a content script and send this content script a message. This is what I have from looking at the Chrome developers page, but I don't see anything in the console log:
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"});
});
A lot of this code is directly from the docs, so I have no idea what I'm doing wrong.
I just copied your code onto my machine and ran it as-is and it works as you expect. I think you may be confused about where the console.log output you're expecting will appear, though.
Open any web page and open the console for that page. Click your browser action, the popup shows up, and sure enough the line from a content script:chrome-extension://fndmlopghajebfadeabnfnfmhalelokm/popup.html appears.
You don't see your goodbye line appear there, though – because that's being logged out from popup.js, not the tab's content script. Let's open an inspector for the popup and look for the goodbye message there. Right-click the browser action icon and select the "Inspect popup" menu item. Your (empty) popup shows, and a new inspector window appears; select the Console tab and you'll see the goodbye message there.
For additional info, see the Chrome Extension Debugging tutorial.
PS. chrome.tabs.getSelected is deprecated; you should use chrome.tabs.query instead. And I agree with 方 觉 – you ought to consider using programmatic injection to make your DOM changes instead.
这篇关于在Chrome扩展中传递的消息不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
