React Chrome Extension: Hantar mesej daripada popup.tsx kepada ralat skrip kandungan
Saya cuba membuat sambungan krom dan saya mahu menghantar mesej kepada skrip kandungan dengan mengklik butang dalam popup.tsx tetapi saya mendapat ralat ini: Ralat mengendalikan respons: TypeError: Tidak dapat membaca sifat yang tidak ditentukan (baca "selamat tinggal")
Ini kod saya:
Komponen butang:
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>
);
}
Timbul.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>
);
};
Skrip kandungan:
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" });
}
});
Senarai semak 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"]
}
]
}
Ralat yang saya dapat: Ralat sambungan Chrome
