I am learning to make chrome extensions. I ran into a problem where context scripts that I want to run, even just alert("test");, are unable to when onload is not activated. This also occurs when you press the back arrow to visit the last visited page. I notice that the url changed, but nothing activates. How do I detect this? If the answer is with service workers, a detailed explanation would be greatly appreciated.

I am learning to make chrome extensions. I ran into a problem where context scripts that I want to run, even just alert("test");, are unable to when onload is not activated. This also occurs when you press the back arrow to visit the last visited page. I notice that the url changed, but nothing activates. How do I detect this? If the answer is with service workers, a detailed explanation would be greatly appreciated.

• javascript
• html
• google-chrome-extension

• 2 Use MutationObserver, example. – woxxom Commented May 27, 2021 at 17:38
• @wOxxOm thanks for providing that, it works just how I needed it to. However, I have 2 questions: 1. Do I need jQuery to call other js files in my project? (scripting.executeScript doesn't work with context scripts I think) 2. When using the onUpdated listener as suggested in the response by Samu, it works also, but only after clicking the button (there is no onClick either). Do you know how to avoid that? Because I'd assume even if I don't need to now, I might want to use onUpdated in the future. – methaneBrain Commented May 28, 2021 at 19:16

1 Answer 1

manifest version 2.0

Try using chrome.tabs.onUpdated.addListener((id, change, tab)=>{}). This should run every time the URL changes! Here is a minimalistic example of some code that injects js to a site when the URL changes.

background.js:

// inject code on change
chrome.tabs.onUpdated.addListener((id, change, tab) => {

    // inject js file called 'inject.js'
    chrome.tabs.executeScript(id, {
        file: 'inject.js'
    });
});

manifest version 3.0

You can do this by using chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {}). However, this will actually trigger multiple times when a page URL is changed. So you need to add a check for the URL in the changeInfo variable to only trigger once.

manifest.json:

{
    "name": "URL change detector",
    "description": "detect a URL change in a tab, and inject a script to the page!",
    "version": "1.0",

    "manifest_version": 3,
    "permissions": [
        "scripting",
        "tabs"
    ],
    "host_permissions": [
        "http://*/*",
        "https://*/*"
    ],

    "background": {
        "service_worker": "background.js"
    }
}

background.js:

// function that injects code to a specific tab
function injectScript(tabId) {

    chrome.scripting.executeScript(
        {
            target: {tabId: tabId},
            files: ['inject.js'],
        }
    );

}

// adds a listener to tab change
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {

    // check for a URL in the changeInfo parameter (url is only added when it is changed)
    if (changeInfo.url) {
        
        // calls the inject function
        injectScript(tabId);

    }
});

inject.js:

// you can write the code here that you want to inject
alert('Hello world!');