Javascript 如何在加载头部之后、DOM之前运行脚本？_Javascript_Google Chrome

Javascript 如何在加载头部之后、DOM之前运行脚本？

javascript google-chrome

Javascript 如何在加载头部之后、DOM之前运行脚本？,javascript,google-chrome,Javascript,Google Chrome,制作GoogleChrome扩展，需要在加载头部后运行脚本，因为头部中有脚本，我需要它们来运行。在加载DOM之前，因为里面有一个内联脚本，我需要击败它我该怎么做？如何检测头部何时加载？只需将其置于标记的顶部即可。脚本在其放置的位置执行，并将阻止页面的其余部分，因此位于主体顶部的脚本将了解头部的所有内容，但不了解仍在加载的DOM的其余部分。如果将它放在的底部，它仍然会在DOMReady之前和页面加载事件之前，另外，您应该能够访问脚本之前的DOM元素。如果您需要将脚本动态附加到中，这种方法很有用—

制作GoogleChrome扩展，需要在加载头部后运行脚本，因为头部中有脚本，我需要它们来运行。在加载DOM之前，因为里面有一个内联脚本，我需要击败它

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

只需将其置于

标记的顶部即可。脚本在其放置的位置执行，并将阻止页面的其余部分，因此位于主体顶部的脚本将了解头部的所有内容，但不了解仍在加载的DOM的其余部分。如果将它放在

的底部，它仍然会在DOMReady之前和页面加载事件之前，另外，您应该能够访问脚本之前的DOM元素。如果您需要将脚本动态附加到

中，这种方法很有用——您无法使用

中的脚本执行此操作，因此必须在

中执行此操作

[编辑]我的答案通常适用于任何HTML文档，但Mohamed的答案更直接适用于Google扩展。我倾向于先接受他的答案，尽管这两个答案可能都是正确的。

当您注入内容脚本时，您可以在清单中将“run\u at”参数声明为“document\u start”，这些文件在css中的任何文件之后注入，但在构建任何其他DOM或运行任何其他脚本之前。可以找到更多信息

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

例子 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 test.html（在web某处）


警报（'Hello from Web！'）；
你好，世界！

结果您将收到两个警报，顺序如下：

网上你好

分机你好

这就是我用的。但它在head中的任何脚本运行之前运行。因此，我试图找出如何检测这一点。我编辑了我的答案，并放置了一个示例。您可以利用在document_开始时运行_来查看dom中添加或删除的内容。例如，您也可以使用另一个名为“DOMNodeInserted”的事件。呃，这可能不适合您的情况，因为页面的脚本已经运行。因此，如果您有权访问该网页，请在我感谢您的努力之后立即放置JavaScript，但这对我不起作用，因为“Hello from extension！”是在页面上的所有脚本（甚至正文中的脚本）都已运行之后运行的。我无法访问该网页，这就是为什么它是一个扩展。这是一个扩展。我无法访问网站本身，也无法在服务器端对其进行编辑。如果我在客户端执行此操作，那么当我将其放在body标记的顶部时，所有脚本都已运行。

{
  "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
    }
  ]
}

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

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

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