扩展注入的<script>标记执行顺序

debugcn 发表于 Dev

布拉德

我有一个浏览器扩展程序，可以执行以下操作：

在执行内容脚本document_start。
该内容脚本在我的扩展程序中插入了<script>具有srcJavaScript文件属性的元素。
该JavaScript文件具有一些浏览器功能。

所有这三件事都需要在加载的页面上运行任何脚本之前发生。为此，我在自己的文件中创建了以下内容manifest.json：

  "content_scripts": [
    {
      "matches": [
        "https://example.com/*",
      ],
      "run_at": "document_start",
      "js": ["js/inject.js"]
    }
  ]

然后用于inject.js：

console.log('Inject');
const scriptEl = document.createElement('script');
scriptEl.src = chrome.runtime.getURL('js/hooks.js');
(document.head || document.documentElement).appendChild(scriptEl);

在中hooks.js，目前仅进行一些调试：

console.log('Hooks');

最后，在测试HTML页面上，我还有一些脚本：

<!DOCTYPE html>
<html>
  <head>
    <script>
      document.addEventListener('DOMContentLoaded', async (e) => {
        console.log('DOMContentLoaded');
      });
    </script>
  </head>
  <body>
    <h1>Test Page</h1>
  </body>
</html>

我期望在控制台上看到以下顺序：

Inject
Hooks
DOMContentLoaded

相反，我看到的是：

Inject
DOMContentLoaded
Hooks

如果使用浏览器的开发人员工具检查DOM，<script src=".../js/hooks.js"></script>则会看到紧接在之前插入<head>。这是注射方法所期望的。

有没有办法让此脚本在所有其他脚本之前执行？

布拉德

基于@CertainPerformance的想法，这是一种解决方法：

console.log('Inject');

const req = new XMLHttpRequest();
req.open('GET', chrome.runtime.getURL('js/hooks.js'), false);
req.send(null);
if (req.status === 200) {
  const scriptEl = document.createElement('script');
  scriptEl.textContent = req.responseText;
  (document.head || document.documentElement).appendChild(scriptEl);
}

令人讨厌的东西，但今天就完成了工作。如果有人有更合适的解决方案，请告诉我！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。