Question

无法在 chrome 扩展清单版本 3 中的 service_worker js 中导入脚本

2021-08-16

2521

google-chrome-extension chrome-extension-manifest-v3

我在 chrome 扩展清单版本 2 中有多个后台脚本。现在我需要迁移到清单版本 3，因此需要进行必要的更改。

根据文档，我在 service_worker 中只保留了一个文件，如下所示：

"background": {
    "service_worker": "background.js"
},

在 background.js 中我写了以下 javascript 语句：

try {
importScripts('js/google-analytics.js', 'js/google-analytics-bundle.js', 'js/eventSender.js', 'js/api-gsc.js', 'js/api-sm.js', 'js/lib/jquery.js');
} catch (e) {
console.error(e);
}

google-analytics.js 中的代码有以下代码：

window.onload = startApp;

此外，在 background.js 中我使用了 localStorage 。

当我尝试加载扩展时，它给出了以下错误：

background.js:16 ReferenceError: window is not defined
at google-analytics.js:23
at background.js:14

Error in event handler: ReferenceError: localStorage is not defined
at chrome-extension://<ExtensionId>/background.js:99:28

TypeError: Cannot read property 'createElement' of undefined
at ja (jquery.js:2)
at jquery.js:2
at jquery.js:2
at jquery.js:2
at jquery.js:2
at background.js:14

Error handling response: ReferenceError: XMLHttpRequest is not defined
at getUserStatus (chrome-extension://<extensionId>/js/api-gsc.js:9:19)
at chrome-extension://<ExtensionId>/background.js:112:17

以及许多其他错误。

似乎无法正确导入 javaScript 文件。

可能是一个问题问了好多。但是，有人能帮我看看我哪里输入了错误的代码吗？如果有人能帮我解决的话。

提前谢谢了。

Answer 1

为了在后台 js 中导入脚本，您需要将其与主应用程序分开捆绑，并使用特定于每个应用程序的导入，如果您使用 vite 作为捆绑器，那么您可以添加一个名为 crxjs 的包来管理内容和后台脚本

按照以下步骤让您的后台脚本在 vite 中运行

1.将 crxjs 添加到您的项目中

npm install @crxjs/vite-plugin -D

2.添加后台 js/ts

import xyz from "xyz"
// you can use package now 
console.log(xyz)

3.创建或更新 manifest.json

{
  "manifest_version": 3,
  "name": "CRXJS React Vite Example",
  "version": "1.0.0",
  "action": { "default_popup": "index.html" },
  "background": {
        "service_worker": "background.js",
        "type": "module"
    },
}

4.使用 manifest 路径更新您的 vite.config.ts 文件

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'

export default defineConfig({
  plugins: [
    react(),
    crx({ manifest }),
  ],
})

运行您的项目后，现在 config.js 将被捆绑，您可以在其中导入包

Answer 2

尝试使用 fetch() 替换 XMLHttpRequest

我认为你可以在此页面跨源 XMLHttpRequest

中找到答案

Answer 3

据我所知，服务工作线程上下文与主浏览器上下文完全分开，因此窗口不是选项。您可以使用 chrome.tabs api 访问 dom 对于本地存储，同样使用 chrome.storage