Rerun addon's script on URL dynamic change

Add-ons Development
#1

To simplify the scenario, lets say I’m working on an extension that just contains: alert("Hello") whenever you load a page in example.com. Relevant manifest.json part:

"content_scripts": 
        [
            {
            "matches": ["*://*.example.com/*"],
            "js": ["script.js"]
            }
        ]

When I first visit the website, it works fine. But the problem is some of the links in the website don’t reload the page, they just manipulate the DOM. So a link for example will take you to example.com/foo, the script doesn’t run. Even when I return to the home page, it doesn’t run again, and all the edits that were made the first time are removed.

How do I make the add-on recognize that the page has changed, and rerun the script?

#2

Single page application (SPA) doesn’t reload the page, so your script won’t be re-executed, but it’s still running!

So if you register some listeners, they will still fire even when user navigates around the page.
For example this will react to hash changes (if the SPA is using hash change):

window.addEventListener('hashchange', onHashChange, false)

Or something like this if it’s modifying the location:

1 Like
#3

After spending hours on this, I was finally able to achieve what I want, though not in the way I expected it would be. This is my solution:

 document.addEventListener("click", function(){
    editStuff();
});

This works just fine for the website I’m making the add-on for. There is some wasted computational power, as some clicks don’t really require the function to work again, but its minimal in my use case.

1 Like