注意：我发布了这个问题，有人将它标记为重复问题。在那个问题中，解决方案是检查弹出窗口而不是正常的开发者工具。我的问题不是我不知道要看哪里，而是弹出窗口/背景脚本控制台的行为与我的预期不符。在我的测试中，
第一次构建清单v3扩展（或任何扩展）。
我正在尝试按照谷歌的消息传递文档进行操作。当在扩展程序加载时从我的内容脚本发送消息到我的后台服务工作者时，它能够正常工作。现在我正在尝试找出如何从我的popup.html发送消息到后台服务工作者。我在这个扩展中使用React。
content-script.js
当我右键点击扩展并选择“检查弹出窗口”，然后从App.js单击按钮时，我会加载和检查扩展后台控制台，并看到以下控制台日志。
每次我在App.js中单击按钮时，我期望看到“goodbye”与“This button was clicked”一起记录在日志中。
这个行为是由于服务工作者变得不活跃吗？我认为服务工作者上的监听器应该会触发它重新变为活跃状态？
我也认为可能是因为我没有将App.js添加为内容脚本，所以我也尝试了这样做，但没有成功。
有人知道如何让来自App.js的按钮与背景脚本通信吗？
chrome.runtime.sendMessage没有将消息传递给后台脚本。第一次构建清单v3扩展（或任何扩展）。
我正在尝试按照谷歌的消息传递文档进行操作。当在扩展程序加载时从我的内容脚本发送消息到我的后台服务工作者时，它能够正常工作。现在我正在尝试找出如何从我的popup.html发送消息到后台服务工作者。我在这个扩展中使用React。
content-script.js
console.log("Content script was loaded");
chrome.runtime.sendMessage({ greeting: "hello" }, function (response) {
console.log(response.farewell);
});
background.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" });
});
app.js
/*global chrome*/
import React from "react";
import "./App.css";
const onClick = () => {
console.log("The button was clicked");
chrome.runtime.sendMessage({ greeting: "hello" }, function (response) {
console.log(response.farewell);
});
};
function App() {
return (
<div>
<p>Hello</p>
<button
onClick={() => {
onClick();
}}
>
Click to send message
</button>
</div>
);
}
export default App;
manifest.json
{
"name": "Chrome Extension Starter Kit",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_popup": "index.html"
},
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content-script.js"]
}
]
}
当我右键点击扩展并选择“检查弹出窗口”，然后从App.js单击按钮时，我会加载和检查扩展后台控制台，并看到以下控制台日志。
每次我在App.js中单击按钮时，我期望看到“goodbye”与“This button was clicked”一起记录在日志中。这个行为是由于服务工作者变得不活跃吗？我认为服务工作者上的监听器应该会触发它重新变为活跃状态？
我也认为可能是因为我没有将App.js添加为内容脚本，所以我也尝试了这样做，但没有成功。
有人知道如何让来自App.js的按钮与背景脚本通信吗？