我正在尝试做一个 chrome 扩展,我想通过单击 popup.tsx 的按钮来发送消息到内容脚本,但我收到此错误: 错误处理响应:TypeError:无法读取未定义的属性(读取“再见”)
这是我的代码:
按钮组件:
function TWCredibility() {
const ValidateTwitterTweets = () => {
// Send message to content script to perfom Twitter Api validation
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.tabs.sendMessage(
tabs[0].id as number,
{ sender: "www", instruction: "api" },
function (response) {
alert(response.farewell);
}
);
});
};
return (
<div id="PageSensitiveButtons" className="flex justify-center">
<button
id="VerifyPageButtonTwitterApi"
type="submit"
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
onClick={ValidateTwitterTweets}
>
Verify Page Tweets with Twitter Api
</button>
</div>
);
}
Popup.tsx:
const Popup = () => {
return (
<div className="container max-h-60 p-2.5 w-[480px]">
<h2 className="title text-3xl font-bold my-1 text-center py-2">
T-CREo v2.0.0
</h2>
{/* Plain Text Credibility */}
<PlainTextCredibility />
<hr id="firstHorBar" className="my-2.5" />
<h6 id="currentPage" className="flex justify-center text-base">
{" "}
</h6>
{/* TW Credibility */}
<TWCredibility />
{/* Spinner */}
</div>
);
};
内容脚本:
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
// If sender is 'www' and instruction is 'api', then scraping
if (msg.sender === "www" && msg.instruction === "api") {
console.log("Message received from www");
alert("Message received from www");
sendResponse({ farewell: "to-do" });
}
});
清单 v3:
{
"manifest_version": 3,
"name": "T-CREo v2.0",
"description": "sí",
"version": "1.0.0",
"action" : {
"default_popup": "popup.html",
"default_title": "T-CREo v2.0",
"default_icon" : "icon.png"
},
"permissions": [
"activeTab",
"background",
"contextMenus",
"declarativeContent",
"tabs",
"storage",
"scripting"
],
"icons": {
"16" : "icon.png",
"48" : "icon.png",
"128" : "icon.png"
},
"options_page": "options.html",
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["contentScript.js"]
}
]
}
我得到的错误: Chrome 扩展程序出错
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
更新扩展程序后您是否刷新了选项卡?您是否还尝试在 HTTP/HTTPS 网站上打开扩展程序?