In a web extension content script, how can I inject and run a script before anything else?

Question

On certain sites, when modal dialogs are open, interacting with our content script UI is affecting the 'outside click' handlers for the webpage's modals, causing them to close

My intent is to add 'capture phase' event listeners to the root-most element before the page adds it's own listeners, thus allowing me to stopImmediatePropagation if the event.target is within our UI (preventing the page's click handlers from even knowing or running)

I'm not familiar enough with chrome apis (webNavigation?) to know if there is a time when I can add these listeners before any <script> within the served page is executed.

I attempted to add a plain text / string version of our eventTrap.js inside of a <script> tag and add it to the page, but this violates content security policy (extensions run in "isolated worlds" by default)

I have also tried using document_start and ensuring that our element is the last in the DOM (after the large click trap element), with a higher z-index and non-static position.

How can I inject a script that runs before anything on the page itself??

My current thinking is that I can somehow listen for a webNavigation event in the service worker, and somehow modify the webpage, maybe using chrome.scripting.executeScript

The current case is https://repl.it after clicking 'Create Repl' to open a modal. We need modals like this to stay open while interacting with our UI. Another website with similar, overly aggressive capturing is https://notion.so (usually with keystrokes in that case).

There's no need for webNavigation or the background script (service worker) or creating script elements as none of those will help. Declare the content script at document_start and add a listener on `window` then stop propagation as [shown here](/a/72085937). — wOxxOm, Jul 28 '23 at 05:57

score 1 · Answer 1 · answered Jul 30 '23 at 19:30

You can change run_at property in content script part inside manifest.json file.

Reference

You can set it as document_start to run when page loading.

But this doesn't guarantee nothing will run before. If 2 extensions have this, it will be random at every page reload. ( I tested this )

 "content_scripts": [
   {
     "matches": ["https://*.nytimes.com/*"],
     "css": ["my-styles.css"],
     "js": ["content-script.js"],
     "run_at": "document_start"
   }
 ],

In a web extension content script, how can I inject and run a script before anything else?

1 Answers1