javascript - 如何在加载头部之后但在 DOM 之前立即运行脚本?

标签 javascript google-chrome

制作一个 Google Chrome 扩展,需要在加载 head 后运行脚本,因为 head 中有脚本,我需要它们运行。在加载 DOM 之前,因为其中有一个我需要击败的内联脚本。

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

最佳答案

当您注入(inject)您的内容脚本时,您可以在 list 中将“run_at”参数声明为“document_start”,这些文件在来自 css 的任何文件之后注入(inject),但在构建任何其他 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之一可以使用类型。

例子

list .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>

结果

您将按顺序收到两个警报:

  1. 来自网络的问候!
  2. 分机你好!

关于javascript - 如何在加载头部之后但在 DOM 之前立即运行脚本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2979047/

相关文章:

javascript - Chrome 62/Chrome Canary 64 中的 ES6 模块支持,在本地不起作用,CORS 错误

javascript - 将 ng-repeat 嵌套在一个元素上以进行过滤

javascript - 如何使用 MS Graph API 上传任何文件?

javascript - 使用 IE 过滤器时不应用悬停样式,无法单击元素

javascript - offsetHeight 在 Chrome 上不起作用

google-chrome - 如何查看/检查 Chrome 扩展的本地存储?

java - 有没有办法在 Chrome 或 Firefox 中修改 HTTP 请求?

javascript - 如何重定向到 chrome 中的扩展页面?

javascript - Three.js Webgl 纹理错误 - 2 的幂 - 没有视频

javascript - 在 React 中切换 aria-pressed 角色以实现 Web 可访问性的最有效方法