Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I run a script right after the head is loaded, but before the DOM?

Making a Google Chrome extension and need to run a script after the head is loaded, because there are scripts in the head and I need them to run. And before the DOM is loaded, because there's an inlined script in there that I need to beat.

How would I do this? How do I detect when head loads?

like image 613
fent Avatar asked Jun 05 '10 03:06

fent


1 Answers

When you inject your content script, within the manifest you can state the "run_at" parameter to be "document_start", the files are injected after any files from css, but before any other DOM is constructed or any other script is run. More information can be found here.

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyles.css"],
      "js": ["jquery.js", "myscript.js"],
      "run_at": "document_start"
    }
  ],
  ...
}

*Edited, added an example. One of the mutations event types could be used.

Example

manifest.json

{
  "name": "Content Script test",
  "version": "0.1",
  "description": "Content Script test",
  "content_scripts": [
    {
      "matches": ["http://*/*"],
      "js": ["cs.js"],
      "run_at": "document_start",
      "all_frames": true
    }
  ]
}

cs.js

document.addEventListener('DOMSubtreeModified', OnSubtreeModified, false);

function OnSubtreeModified(event) {
  console.log('Hello from extension!');
  document.removeEventListener('DOMSubtreeModified', OnSubtreeModified, false);
}

test.html (on the web somewhere)

<html>
<head>
  <script>
    alert('Hello from Web!');
  </script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

Results

You will two alerts, in the order:

  1. Hello from web!
  2. Hello from extension!
like image 57
Mohamed Mansour Avatar answered Oct 01 '22 08:10

Mohamed Mansour