Chrome扩展Service Worker中如何实例化外部npm包类？

可行性说明 #

完全可行，但Chrome扩展的Service Worker（无DOM、限制Node.js API）和Content Script（沙箱环境）有特殊执行约束，需针对包的依赖做适配调整。

具体解决步骤 #

1. 适配MatomoTracker的配置

@datapunt/matomo-tracker-js默认依赖浏览器DOM API（如document.cookie），在Service Worker中必须禁用这些依赖项：

import MatomoTracker from "@datapunt/matomo-tracker-js";

// Service Worker中实例化的正确配置
const tracker = new MatomoTracker({
  urlBase: "https://example.com/",
  siteId: 1,
  linkTracking: false, // Service Worker无法监听DOM链接点击，必须关闭
  configurations: {
    disableCookies: true, // 核心：禁用Cookie相关逻辑，避免DOM API依赖
    setRequestMethod: 'POST', // 可选，改用POST发送统计请求
  }
});

// 测试事件追踪
tracker.trackEvent('test-category', 'test-action');

2. 配置构建工具（Vite/Webpack）

确保构建工具将npm包正确打包到扩展的目标文件中：

• Vite示例配置（vite.config.ts）：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        background: './src/background.ts',
        content: './src/content.ts'
      },
    },
  },
});

• Webpack示例配置：
  将Service Worker的构建target设为webworker，避免打包Node.js专属代码：

module.exports = {
  entry: {
    background: './src/background.ts',
  },
  target: 'webworker',
};

3. Content Script的额外适配

Content Script运行在页面沙箱中，需确保：

• 打包后的代码正确注入到目标页面（在Manifest的content_scripts字段中配置路径）；
• 实例化时同样禁用Cookie依赖（若无需基于Cookie的用户追踪），或确认沙箱允许Cookie操作。

4. 调试与权限检查

• 打开Chrome扩展开发者工具，查看Service Worker/Content Script的控制台，定位具体报错（如window is undefined）；
• 在Manifest的permissions中添加统计接口的网络权限：

"permissions": [
  "https://example.com/*"
]

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