0

I've got a content script that works successfully when I load edmodo.com, but when I follow a link in the posts the script doesn't modify the new content. I know I've got to be missing something obvious, but I'm still learning how Chrome Extensions work. I appreciate any suggestions.

manifest.json

{
  "name": "Spell Check Disabler",
  "version": "1.0",
  "description": "Prevents Chrome's spell check in text boxes on Edmodo.com",

  "content_scripts": [
    {
      "matches": ["*://*.edmodo.com/*"],
      "js": ["jquery-3.1.0.min.js","page.js"]
    }
  ],

  "permissions": [
   "activeTab"
   ],

  "manifest_version": 2
}

page.js

$(document).ready(function(){

    console.log("DOM: " + Date());  //just checking to see if it loads

    $("input").focus(function(){
        $(this).attr('spellcheck', false);
    });
    $("input").blur(function(){
        $(this).attr('spellcheck', false);
    });

    document.body.style.background = 'yellow';  //another indicator to see if it loaded
});

document.title = 'spellcheck disabled'; //another indicator to see if it loaded

The page background turns yellow, and remains yellow after I click a link, but the page title changes to reflect the new page and I don't get any new entries in the console.

I've tried fussing around with background scripts and chrome.webNavigation listeners to no success.

FWIW, the URL of the page starts as https://www.edmodo.com/home#/ and the link I click on includes a button that links to href="/home#/quiz/start/quiz_run_id/12078109"

Thanks -keen

cmdr_keen
  • 169
  • 1
  • 2
  • 8
  • 2
    See [Is there a JavaScript/jQuery DOM change listener?](https://stackoverflow.com/a/39508954) – wOxxOm Sep 19 '16 at 20:58
  • have you tried $(window).load instead of $(document).ready? – Dani Sep 19 '16 at 20:59
  • @dprogramz I did try that, and I couldn't get that to trigger at all. – cmdr_keen Sep 19 '16 at 21:45
  • 1
    Thanks @wOxxOm. The solution in your link posted by apsillers that uses the MutationObserver was exactly what I needed. It's much more elegant than the methods I was trying. – cmdr_keen Sep 19 '16 at 22:10
  • wow MutationObserver is really useful, didn't even know about it, thx – Dani Sep 20 '16 at 21:11
  • Does this answer your question? [Chrome extension is not loading on browser navigation at YouTube](https://stackoverflow.com/questions/18397962/chrome-extension-is-not-loading-on-browser-navigation-at-youtube) – Shayan Jan 10 '20 at 18:45
  • Also this https://stackoverflow.com/questions/34077641/how-to-detect-page-navigation-on-youtube-and-modify-html-before-page-is-rendered – Shayan Jan 11 '20 at 12:09
  • I have the same problen, see: https://stackoverflow.com/questions/67651440/content-script-only-runs-once-temporary-addon – Demis Castro May 23 '21 at 12:47

1 Answers1

0

Clicking a link from https://www.edmodo.com/home#/ to /home#/quiz/start/quiz_run_id/12078109 won't cause navigation, so there isn't really a link to follow. All it does is change the location hash. That's why your script does not run again, it's still the same document.

Your links are most-likely being handled by JavaScript, and you need to either run your code again on those click events (or at some point afterwards, when other content is loaded), or perhaps just use event delegation so that your event listeners are applied to future elements.

Alexander O'Mara
  • 58,688
  • 18
  • 163
  • 171