I am developing a chrome extension to provide time stamps to all youtube videos, and it keeps giving me this error – “Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.”, I have just started building it,
here’s my background.js file
chrome.tabs.onUpdated.addListener((tabId, tab) => {
if (tab.url && tab.url.includes("youtube.com/watch")) {
const queryParameters = tab.url.split("?")[1];
const urlParameters = new URLSearchParams(queryParameters);
chrome.tabs.sendMessage(tabId, {
type: "NEW",
videoId: urlParameters.get("v"),
});
}
});
and here’s my contentScript.js
(() => {
let youtubeLeftControls, youtubePlayer;
let currentVideo = "";
chrome.runtime.onMessage.addListener((obj, sender, response) => {
const {type, value, videoId} = obj;
if(type === "NEW")
{
currentVideo = videoId;
newVideoLoaded();
}
});
}) ();
and lastly my manifest.json
{
"name": "YT Saver",
"version": "0.1.0",
"description": "Saving timestamps in YT videos",
"permissions": ["storage", "tabs"],
"host_permissions": ["https://*.youtube.com/*"],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["https://*.youtube.com/*"],
"js": ["contentScript.js"]
}
],
"web_accessible_resources": [
{
"resources": [
"assets/bookmark.png",
"assets/play.png",
"assets/delete.png",
"assets/save.png"
],
"matches": ["https://*.youtube.com/*"]
}
],
"action": {
"default_icon": {
"16": "assets/ext-icon.png",
"24": "assets/ext-icon.png",
"32": "assets/ext-icon.png"
},
"default_title": "YT Saver",
"default_popup": "popup.html"
},
"manifest_version": 3
}
I tried to make sure I was linking my content scripts correctly in manifest.json file, I reloaded the chrome extension page and the files, I have tried deleting the entire package, reloading it. It did not make a difference yet. I have tried approaches from other posts, but none have worked yet. Any suggestions would be helpful thanks!