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
Avez-vous actualisé l'onglet après la mise à jour de l'extension ? Avez-vous également essayé d'ouvrir l'extension sur un site Web HTTP/HTTPS ?