实施例

Question

制作Google Chrome扩展程序，并且需要在加载磁头后运行脚本，因为头部有脚本，我需要它们才能运行。在加载DOM之前，因为那里有一个我需要击败的内联脚本。

我该怎么做？如何检测头部负载？

Answer 1

当您注入内容脚本时，在清单中您可以将“run_at”参数声明为“document_start”，文件将在来自css的任何文件之后注入，但在构造任何其他DOM或运行任何其他脚本之前。可以找到更多信息here。

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

*编辑，添加了一个例子。可以使用其中一种mutations event类型。

实施例

的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>中执行此操作。 1}}。

[编辑]我的回答通常适用于任何HTML文档，但Mohamed的回答更直接适用于Google扩展程序。我倾向于先把他的答案拿出来，虽然两者都可能是正确的。

如何在加载头之后但在DOM之前运行脚本？

2 个答案:

实施例

cs.js

test.html（在网上某处）

结果