Chrome extension not running on back button

Question

I am writing a chrome extension that needs to run every time certain webpages are loaded.

Currently when I first load a page the script runs. However if I then go to another page and click "Back" so it returns to the original page, the script does not run. If I then refresh the page it does run the script.

I suspect this is something to do with chrome not running extensions if it is loading a cached version of the page? (Might be total rubbish).

Currently the manifest file says to "run_at" "document_end".

Anyone have any clue how I can make it run the script even when I open the page by navigating "Back"?

Avigdor

Have same problem here. I use chrome.tabs.onUpdated.addListener(function()) and inject the code. I noticed same behavior. Very annoying. – Whopping

I eventually used tabs.onUpdated as well. Worked very well. – Awl

Answer 1

It doesn't run because, like the rest of the scripts on the page, they've already run and potentially altered the content. This behavior is native to browsers and it's called back/forward cache.

You can include a pageshow event listener into your content script. For example:

// contentscript.js

function init () {
  alert('Good soup')
}

window.addEventListener('pageshow', init);

The pageshow event is sent to a Window when the browser displays the window's document due to navigation.

This includes:

• Initially loading the page
• Navigating to the page from another page in the same window or tab
• Restoring a frozen page on mobile OSes
• Returning to the page using the browser's forward or back buttons

Sweater

Answer 2

This is indeed an issue with the cached window content. If your Chrome extension is permanently monitoring, you could try to trigger it on URL change, rather than on load. Although this might not be the best practice, and a bit a workaround.

Tomtom

Answer 3

I had the same issue, So I user this solution:

background.js

let tabURL
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if(!changeInfo.status && tab.url != tabURL){
        tabURL = tab.url
        chrome.scripting.executeScript({
            target: {tabId: tabId},
            files: ['<fileName>.js'] 
        })
    }
})

manifest.json

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

Just change the file name and it should work

Transpolar

Answer 4

I was going round the bend with all the various hacks and bodges, none of which seemed to work.

The only thing that worked in the end for me, was the pageshow event using capture mode:

function pageInit() {
    //something .....
}

window.addEventListener("pageshow", pageInit, true);

The third parameter 'capture' is:

A boolean value indicating whether events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree

See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

The more modern way uses an options object, which you can read about in the official documentation.

Whether it works for you without it or not probably relates to how many/any events are happening in your host page which could be blocking the event ever getting to your listener.

Disused