Chrome content scripts do not work: DOMContentLoaded listener does not execute

Question

I am trying to copy an extension that fixes spelling errors in 1 forum.

I am trying to access the <p> with the contents of a script, but it does not change anything (using the code below):

 document.addEventListener("DOMContentLoaded", function() { document.getElementsByTagName("P")[4].innerHTML = "correct_word"; }); 

This does not change anything when added as an extension, apparently, if I wget page and there is a script, everything works. Any thoughts?

My manifest.json file:

 { "manifest_version": 2, "name": "Extension", "description": "Description", "version": "1.0", "content_scripts": [{ "run_at": "document_end", "matches": ["http://example.com/"], "js": ["script.js"] }], "web_accessible_resources": ["Filedeleted(really).html"] } 

I know that content scripts and WWW pages have different sandboxes, maybe the content script cannot access the page (and tag)?

Answer 1

You enter your script after the event you are listening for fires (in this case, DOMContentLoaded ). This way, any code that you have in the listener will not be executed because the event never fires after you add the listener.

In Chrome extensions and Firefox web applications, when you specify the time for the content script to enter, you can specify "document_start" , "document_end" or "document_idle" . ¹ In manifest.json, this is the value specified for the run_at property. For tabs.executeScript() this is a runAt property.

• document_start
  Injection is performed before creating the DOM or scripts from the executed page. This means that document.body and document.head do not exist yet. The DOMContentLoaded and window load events are not fired yet. You can add things to the DOM by adding them to document.documentElement . You may need to use MutationObserver to keep track of which items you are interested in, adding to the DOM or waiting for events like DOMContentLoaded to indicate that the DOM is available.
• document_end (default)
  Injection occurs after the completion of the DOM, but before loading sub-resources (for example, images and frames). This usually happens after DOMContentLoaded , but before the window load event occurs.

• document_idle
  Injection occurs some time after document_end and immediately after the window load event occurs. The answer is "When is run_at: document_idle content script executed?" indicates it was before:

  • At the end of the window load or
  • 200 ms after the DOMContentLoaded event.

  This means that your script content will be entered after DOMContentLoaded run, but the window load event may or may not already be fired.

When listening to DOMContentLoaded or window load you should check document.readyState first

Each time you use a DOMContentLoaded or a window load listener, you should always check document.readyState before adding a listener to make sure you add a listener before the DOMContentLoaded event DOMContentLoaded (or before the load event DOMContentLoaded , if that is what you are listening to) . This should be a normal habit when you want to listen to these events. If you add a listener after the event has been fired, the listener will never be fired.

To add a DOMContentLoaded listener DOMContentLoaded you should use something like:

 if(document.readyState === 'loading') { document.addEventListener('DOMContentLoaded',afterDOMLoaded); } else { afterDOMLoaded(); } function afterDOMLoaded(){ //Everything that needs to happen after the DOM has initially loaded. } 

To add a window load listener, you can use something like:

 if(document.readyState !== 'complete') { window.addEventListener('load',afterWindowLoaded); } else { afterWindowLoaded(); } function afterWindowLoaded(){ //Everything that needs to happen after the window is fully loaded. } 

---

• If you use tabs.executeScript() , the value you specify for runAt only indicates that you want the script to be entered. If you execute tabs.executeScript() before this time, then the injection is delayed until the specified time. Please note that for document_start point when executing tabs.executeScript() will be valid for a new page - this is a complex topic that deserves its own question / answer.
• Portions of this answer were copied from my answer to "Detecting and handling a button on an active HTML page . "