如何在加載頭之后但在DOM之前運行腳本？

Question

制作Google Chrome擴展程序並在加載磁頭后需要運行腳本，因為頭部有腳本，我需要它們才能運行。 在加載DOM之前，因為那里有一個我需要擊敗的內聯腳本。

我該怎么做？ 如何檢測頭部負載？

Answer 1

當您注入內容腳本時，在清單中您可以將“run_at”參數聲明為“document_start”，文件將在來自css的任何文件之后注入，但在構造任何其他DOM或運行任何其他腳本之前。 更多信息可以在這里找到。

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

*編輯，添加了一個例子。 可以使用其中一種突變事件類型。

例

的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（在網上某處）

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

結果

您將按以下順序發出兩個警報：

網上好！
您好，來自分機！

Answer 2

只需將它放在<body>標簽的頂部即可。 腳本執行它們所處的位置並將阻止頁面的其余部分，因此正文頂部的腳本將知道頭部中的所有內容，但不知道仍在加載的其余DOM。 如果將它放在<body>的底部，它仍然會在DOMReady之前和頁面加載事件之前加上你應該能夠訪問腳本之前的DOM元素。 如果你需要動態地將腳本附加到<head>這種方法很有用 - 你不能用<head>的腳本來做到這一點，所以你必須在<body>做到這一點。

[編輯]我的答案通常適用於任何HTML文檔，但Mohamed的答案更直接適用於Google擴展程序。 我傾向於在我的前面接受他的回答，盡管兩者都可能是正確的。

如何在加載頭之后但在DOM之前運行腳本？

問題描述

2 個解決方案

解決方案1
4 2010-06-05 03:56:09

例

cs.js

test.html（在網上某處）

結果

解決方案2
2 2010-06-05 03:50:24

如何在加載頭之后但在DOM之前運行腳本？

問題描述

2 個解決方案

解決方案1 4 2010-06-05 03:56:09

例

cs.js

test.html（在網上某處）

結果

解決方案2 2 2010-06-05 03:50:24

解決方案1
4 2010-06-05 03:56:09

解決方案2
2 2010-06-05 03:50:24