How To Insert Content Script In Google Chrome Extension When Page Was Changed Via History.pushstate?

I'm creating a small google chrome extension for website, and I want to change some html on particular pages. The problem is that website load his content via ajax, and heavy use

Solution 1:

I was able to get this working. From the Chrome Extension docs for webNavigation:

You need to set permissions for webNavigation in manifest.json:

"permissions":["webNavigation"],

Then in background.js:

  chrome.webNavigation.onHistoryStateUpdated.addListener(function(details) {
        console.log('Page uses History API and we heard a pushSate/replaceState.');
        // do your thing
  });

Solution 2:

You can add a window.onpopstate event in content script and listen for it, when an event fires you can re-run content script again.

References

a)extension.sendMessage()

b)extension.onMessage().addListener

c)tabs.executeScript()

d)history.pushState()

e)window.onpopstate

Sample Demonstration:

manifest.json

Ensure content script injected URL and all API's tabs have enough permission in manifest file

{"name":"History Push state Demo","version":"0.0.1","manifest_version":2,"description":"This demonstrates how push state works for chrome extension","background":{"scripts":["background.js"]},"content_scripts":[{"matches":["http://www.google.co.in/"],"js":["content_scripts.js"]}],"permissions":["tabs","http://www.google.co.in/"]}

content_scripts.js

Track for onpopstate event and send a request to background page for rerun of script

window.onpopstate = function (event) {
    //Track for event changes here and //send an intimation to background page to inject code again
    chrome.extension.sendMessage("Rerun script");
};

//Change History state to Images Page
history.pushState({
    page: 1
}, "title 1", "imghp?hl=en&tab=wi");

background.js

Track for request from content script and execute script to the current page

//Look for Intimation from Content Script for rerun of Injection
chrome.extension.onMessage.addListener(function (message, sender, callback) {
    // Look for Exact messageif (message == "Rerun script") {
        //Inject script again to the current active tab
        chrome.tabs.executeScript({
            file: "rerunInjection.js"
        }, function () {
            console.log("Injection is Completed");
        });
    }
});

rerunInjection.js

Some Trivial code

console.log("Injected again");

Output

Let me know if you need more information.