Chrome extension only runs on refresh, not on page navigation

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
});

Github uses the history api for site navigation, you would have to hook the history pushState function, [How to get notified about changes of the history via history.pushState?](http://stackoverflow.com/questions/4570093/how-to-get-notified-about-changes-of-the-history-via-history-pushstate) — Patrick Evans, Sep 21 '16 at 23:15
@ZigMandel the suggested solution in that post doesn't work in my situation, so I opened a new question. — James, Sep 21 '16 at 23:17
@James, If you have tried something and it didn't work then you should mention it in your question. Not doing so just wastes the time of the people you are asking to help you. — Makyen, Sep 21 '16 at 23:30
@james indeed, we cant help if you dont show exactly what you tried and what failed. — Zig Mandel, Sep 22 '16 at 22:47

score 4 · Accepted Answer · answered Sep 21 '16 at 23:31

4

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
});

answered Sep 21 '16 at 23:31

Mottie

84,355
30
126
241

When is the "pjax:end" event fired? I've tried implementing both of your suggestions and the problem still persists – James Sep 22 '16 at 05:18
This solution should work, I use the same approach. @James, make sure you've reloaded the entire extension and the site (to reinject new content script with pjax:end). – wOxxOm Sep 22 '16 at 07:22
"pjax:end" is fired after GitHub finishes loading new content into the targeted container. – Mottie Sep 22 '16 at 12:27
I was not able to get this solution to work. I reloaded the extension multiple times, restarted chrome, restarted my computer, but I could never get a console.log() message to print on "pjax:end" event firing. – James Sep 23 '16 at 17:25
1

It should fire when you change the page, click a tab, go to an issue, etc. You may have to use pure javascript as I show in my example, instead of binding with jQuery. – Mottie Sep 23 '16 at 18:05

Chrome extension only runs on refresh, not on page navigation

1 Answers1