I am trying to write my first Chrome extension and I require the background.js file to listen for reloads on the Netflix website and run a script that interacts with the DOM in content.js.

I am unable to set up the connection between the two files so I have commented everything out and I am trying to make only a console.log run in my content.js file but cannot to do that either.

content.js:

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === "hello") {
        console.log("Hello from content script");
        sendResponse({ status: "done" });
    }
});

background.js:

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
    if (changeInfo.status === "complete" && tab.url && tab.url.includes("netflix.com/watch/")) {
        console.log("Netflix watch page loaded in tab", tabId);
        chrome.tabs.sendMessage(tabId, { action: "hello" }, () => {
            if (chrome.runtime.lastError) {
                console.error("Sending message failed:", chrome.runtime.lastError.message);
            } else {
                console.log("Message sent to content script successfully");
            }
        });
    }
});

manifest.json:

{
    "manifest_version": 3,
    "name": "MyTudum",
    "description": "",
    "version": "1.0",
    "action": {
        "default_popup": "templates/popup.html",
        "default_icon": "images/logo.png"
    },
    "content_scripts": [
        {
            "js": [
                "scripts/content.js"
            ],
            "matches": [
                "https://*/*",
                "http://*/*"
            ],
            "run_at": "document_end"
        }
    ],
    "background": {
        "service_worker": "scripts/background.js"
    },
    "icons": {
        "16": "images/logo.png",
        "32": "images/logo.png",
        "48": "images/logo.png",
        "128": "images/logo.png"
    },
    "permissions": [
        "storage",
        "activeTab",
        "scripting",
        "tabs"
    ],
    "host_permissions": [
        "*://*.netflix.com/*"
    ]
}

Directory strucutre for reference:

directory structure image

The output I get is:

Netflix watch page loaded in tab 317397541
Message sent to content script successfully

There is no error. Shouldn’t I also be getting the output files from content.js?

I am trying to fix this code so that the output also has the console.log() lines from content.js in the console, so that I can understand how to get the function in content.js to run properly.