I'm trying to build an extension to monitor the xhr portion of the devtools network tab. With some help , I have been able to get the requests to be displayed on the service-worker console and I can log the Post requests. My next step is to send some post info to the extension popup. However I am getting:
Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.
manifest.json:
{
"manifest_version": 3,
"version": "1.0",
"name": "Hello World!",
"description": "Learning how to make a chrome extension!",
"icons": {
"16": "images/puppy16.png",
"48": "images/puppy48.png",
"128": "images/puppy128.png"
},
"action": {
"default_icon": "images/puppy.png",
"default_popup": "popup.html"
},
"background": {
"service_worker": "background.js"
},
"host_permissions": ["*://*.cnn.com/", "],
"permissions": ["webRequest", "activeTab","tabs"],
"content_scripts": [
{
"matches": ["*://cnn.com/*"],
"js": ["contentScript.js"]
}
]
}
In my background.js:
(function () {
var tab
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
tab = tabs[0];
console.log(tab);
chrome.webRequest.onBeforeRequest.addListener(
function (details) {
// Use this to decode the body of your post
const postedString = decodeURIComponent(String.fromCharCode.apply(null,
new Uint8Array(details.requestBody.raw[0].bytes)));
console.log(postedString)
const body = JSON.parse(postedString);
console.log(body.CenterPoint.Point);
},
{ urls: [url] },
["requestBody"]
);
console.log(tab);
chrome.tabs.sendMessage(tab.id, "your message")
});
}());
My content script is:
console.log("Hi from content script");
chrome.runtime.onMessage.addListener(function (response, sendResponse) {
console.log(response);
});
How do I fix this?