引入模型导致Chrome扩展中Chrome Tabs API失效问题求助

核心问题分析 #

1. Manifest V2 不支持普通脚本使用 ES 模块语法
   你直接在脚本中使用了import语句，但 Manifest V2 扩展的常规脚本（如后台脚本）默认是传统非模块模式，浏览器会将import识别为语法错误，导致整个脚本直接终止执行——这就是chrome.tabs.executeScript完全没运行的根本原因。

2. 脚本执行上下文错误
   你把操作 popup DOM 的代码放在了后台脚本里，但后台脚本运行在独立的后台页面，根本无法直接访问 popup 的 DOM 元素（document.getElementById("new-task")），即使没有导入语句，这部分逻辑本身也无法生效。

具体修复步骤 #

1. 调整脚本执行位置 #

将获取选中文本、更新 popup DOM 的代码移到 popup 专属脚本中，只有 popup 内的脚本才能访问自身 DOM。

修改你的 HTML 文件，引入模块类型的脚本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
       <p type="text" id="new-task" class="new-task" contenteditable="true"></p>
       <!-- 引入popup脚本，指定type="module"以支持ES模块 -->
       <script type="module" src="popup.js"></script>
</body>
</html>

2. 重构脚本代码 #

创建popup.js文件，用模块模式编写逻辑：

// 静态import需放在文件顶部
import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.4.1';

// 获取选中文本并更新DOM
chrome.tabs.executeScript({
  code: "window.getSelection().toString();"
}, async function(selection) {
  document.getElementById("new-task").innerHTML = selection[0];
  
  // 后续使用Hugging Face API的逻辑
  const classifier = await pipeline('text-classification');
  // ...你的业务代码
});

如果不想用静态import，也可以用动态import（适合在回调中按需加载）：

chrome.tabs.executeScript({
  code: "window.getSelection().toString();"
}, async function(selection) {
  document.getElementById("new-task").innerHTML = selection[0];
  
  // 动态加载transformers模块
  const { pipeline } = await import('https://cdn.jsdelivr.net/npm/@xenova/transformers@2.4.1');
  const classifier = await pipeline('text-classification');
  // ...你的业务代码
});

3. 更新Manifest配置 #

添加CDN资源的访问权限，同时移除无用的后台脚本配置（如果不需要的话）：

{
  "manifest_version": 2,
  "name": "X",
  "version": "1.0",
  "permissions": [
    "activeTab",
    "storage",
    "https://cdn.jsdelivr.net/"  // 新增：允许加载CDN上的transformers脚本
  ],
  "browser_action": {
    "default_popup": "index.html"
  },
  // 如果后台脚本无实际用途，直接删除以下部分
  // "background": {
  //   "scripts": ["myscript.js"]
  // }
}

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