Chrome扩展中Contents.js阻塞页面加载，如何在页面完全加载后运行？

该需求完全可以实现。你当前遇到的阻塞问题，是因为即使函数放在window.onload中触发，CPU密集型的同步运算依然会占用页面主线程，导致交互卡顿，可通过以下步骤调整：

1. 调整扩展注入时机（manifest.json配置） #

Chrome扩展的内容脚本（content script）支持通过run_at字段控制注入执行时机，显式配置为document_idle，浏览器会在页面完全加载、且处于空闲状态时才执行脚本，优先级低于页面交互任务。

Manifest V3 示例配置： #

{
  "manifest_version": 3,
  "name": "EAN提取工具",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["*://*.google.com/*"],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ]
}

Manifest V2 示例配置： #

{
  "manifest_version": 2,
  "name": "EAN提取工具",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["*://*.google.com/*"],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ]
}

配置matches后，脚本只会在谷歌域名下注入，代码中可省略域名判断逻辑。

2. 代码层面优化避免阻塞主线程 #

核心优化点： #

• 用requestIdleCallback替代window.onload，该API会在浏览器空闲时段执行回调，不会抢占交互所需的主线程资源
• 修复原async函数无效问题：原函数仅标注async但无任何await逻辑，执行时完全是同步阻塞的
• 优化正则表达式，删除会造成灾难性回溯的冗余规则，大幅降低运算负载

优化后代码示例： #

function getEAN() {
    const bodyText = document.body.innerText;
    const eanPos = bodyText.indexOf('EAN');
    if (eanPos === -1) return false;
    // 仅截取EAN前后100位文本做匹配，减少运算量
    const targetText = bodyText.slice(eanPos, eanPos + 100);
    // 优化后正则，无回溯问题，匹配EAN后的12-15位标准编码
    const eanRegex = /EAN\D*(\d{12,15})/i;
    const matchResult = targetText.match(eanRegex);
    return matchResult ? matchResult[1] : false;
}

// 仅在浏览器空闲时执行，timeout参数保证任务最长2秒内得到调度
requestIdleCallback(() => {
    console.log(getEAN());
}, { timeout: 2000 });

3. （可选）更高负载场景的优化方案 #

如果EAN提取逻辑的运算量依然很高，可将计算逻辑迁移到扩展的后台Service Worker（Manifest V3）或Background Page（Manifest V2）执行，内容脚本仅负责发送截取的文本片段，后台运算完成后再返回结果，完全不占用页面主线程。

内容的提问来源于stack exchange，提问作者DeadSec