Chrome扩展新建标签页注入脚本，code生效file不生效且报undefined错误

问题原因及解决方案 #

1. 打包产物缺失content-script.js

基于Vue开发浏览器扩展时，默认打包配置只会处理Vue入口依赖的文件，你单独存放的content-script.js不会被自动复制到最终的扩展输出目录（通常为dist文件夹），扩展运行时找不到对应文件，自然注入失败。你之前传入code参数能成功，是因为不需要读取本地文件，直接注入字符串代码即可。
解决方法：

• 将content-script.js放到项目的public目录下，Vue的打包工具会自动把public目录下的所有文件原样复制到输出根目录
• 加载扩展到Chrome之前，打开输出的dist文件夹，确认content-script.js确实存在于根目录

2. 注入时机错误

chrome.tabs.create的回调触发时，标签页仅完成初始化，目标网页还未加载完成，此时注入文件大概率失败。而且你循环打开多个标签页时，popup会因为失去焦点自动关闭，popup的执行上下文直接销毁，后续的executeScript调用都会中断，这也是你看到chrome.tabs.executeScript(...) is undefined错误的主要原因。
解决方法：
将注入逻辑完全移到background中执行，增加标签页加载完成的判断，修改后的background代码如下：

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    if(request.message === "Popup") {
        const targetTabId = request.tabId;
        // 监听标签页更新事件
        chrome.tabs.onUpdated.addListener(function tabUpdateListener(tabId, changeInfo) {
            // 仅在目标标签页加载完成后执行注入
            if (tabId === targetTabId && changeInfo.status === 'complete') {
                // 移除监听避免重复触发
                chrome.tabs.onUpdated.removeListener(tabUpdateListener);
                chrome.tabs.executeScript(targetTabId, { 
                    file: "/content-script.js",
                    runAt: "document_idle"
                }, () => {
                    // 输出具体错误信息方便排查
                    if (chrome.runtime.lastError) {
                        console.error('注入失败原因：', chrome.runtime.lastError.message);
                    }
                });
            }
        })
    }
});

3. Manifest语法错误修正

你当前的manifest.json中browser_action配置末尾多了一个多余的逗号，可能导致扩展加载时出现警告，修正为：

{
  "manifest_version": 2,
  "name": "Example",
  "description": "Performs common searches based on input",
  "default_locale": "en",
  "permissions": [
    "<all_urls>",
    "tabs"
  ],
  "background": {
    "scripts": [
      "js/background.js"
    ]
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_title": "Example"
  }
}

排查注意事项

background的运行日志需要打开扩展管理页面的「背景页」专属控制台查看，不要和popup控制台、网页控制台混淆，修改代码后重新加载扩展再测试。

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