React Chrome Extension: Send message from popup.tsx to content script error
I'm trying to make a chrome extension and I want to send a message to a content script by clicking a button in popup.tsx but I'm getting this error: Error handling response: TypeError: Cannot read property of undefined (read "goodbye")
This is my code:
Button component:
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>
);
};
Content script:
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" });
}
});
Manifest 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"]
}
]
}
The error I get: Chrome extension error
