如何让Chrome扩展注入脚本优先于网页JS执行？

你当前遇到的核心问题是：通过createElement添加带src的脚本标签时，脚本是异步加载执行的——即便content script设置了run_at: document_start，也没法保证注入脚本早于网页同步JS运行。

下面是两种可行的解决方法：

方案1：内联注入脚本内容（最可靠） #

不需要依赖web_accessible_resources，直接把要注入的脚本内容写在content script里，通过textContent注入，这样脚本会同步执行：

修改content.js：

console.log("CE: Content Script Loaded");

function injectScript() {
  const script = document.createElement("script");
  script.textContent = `
    console.log("CE: Injected Script Loaded");
    window.someVar = true;
  `;
  document.documentElement.appendChild(script);
  script.remove(); // 可选，清理注入的标签
}

injectScript();

同时可以删掉manifest.json里的web_accessible_resources配置，因为不需要加载外部脚本文件了。

方案2：用document.write加载外部脚本 #

如果必须保留独立的injected.js文件，可使用document.write在document_start阶段同步加载脚本——此时文档还没开始解析，document.write会阻塞后续文档解析，确保注入脚本先执行：

修改content.js：

console.log("CE: Content Script Loaded");

function injectScript() {
  document.write(`<script src="${chrome.runtime.getURL('injected.js')}"></script>`);
}

injectScript();

manifest.json的配置保持不变，确保web_accessible_resources正确配置了injected.js。

验证效果 #

修改后刷新页面，控制台输出顺序会变成：
CE: Content Script Loaded → CE: Injected Script Loaded → 网页JS的输出

这样就能保证window.someVar在网页JS运行前完成初始化。

内容的提问来源于stack exchange，提问作者Adnan Arif Sait