Chrome extension only runs on refresh, not on page navigation [duplicate]

Question

I have a chrome extension that I want to manipulate some of the DOM on GitHub. All works as expected when I refresh any given page, but if I navigate to that page normally the script isn't executed.

manifest.json

{
    "manifest_version": 2,

    "name": "Name",
    "description": "Detailed description",
    "version": "1.3.5",
    "content_scripts": [{
        "matches": ["https://github.com/*/*/issues/*"],
        "js": ["jquery-2.1.0.min.js", "index.js"]
    }],
    "browser_action": {
        "default_icon": "icon.png"
    },
    "permissions": [
        "activeTab",
        "https://ajax.googleapis.com/"
    ]
}

index.js

$(document).ready(function() {
    // DOM manipulating code
    // removed for brevity
});

Answer 1

When you navigate to a GitHub page from another, a container in the page is updated, not the entire page.

So, from my experience... if you start from a repo's main page and switch to the issues page, the extension doesn't always take note of this change. Therefore I would suggest changing the manifest matches to all of github and not just the issues:

{
    "manifest_version": 2,
    "name": "Name",
    "description": "Detailed description",
    "version": "1.3.5",
    "content_scripts": [{
        "matches": ["https://github.com/*"],
        "js": ["jquery-2.1.0.min.js", "index.js"]
    }],
    "browser_action": {
        "default_icon": "icon.png"
    },
    "permissions": [
        "activeTab",
        "https://ajax.googleapis.com/"
    ]
}

If that doesn't work, then within your code, monitor the document for a "pjax:end" event:

document.addEventListener("pjax:end", function() {
    // run code/call function
});