Extension React Chrome : envoyer un message de popup.tsx à une erreur de script de contenu
J'essaie de créer une extension Chrome et je souhaite envoyer un message à un script de contenu en cliquant sur un bouton dans popup.tsx mais j'obtiens cette erreur : Réponse de gestion des erreurs : TypeError : Impossible de lire la propriété non définie (lire "au revoir")
Voici mon code :
Composant bouton :
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>
);
};
Script de contenu :
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" });
}
});
Liste de contrôle 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"]
}
]
}
L'erreur que j'obtiens : Erreur d'extension Chrome
