Friday, January 4, 2013

document_start


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!

No comments: