Question

importScripts 时，某个脚本抛出了错误

2021-04-08

3559

google-chrome-extension import

在我的 chrome 扩展程序（manifest V3）中，我想导入一些脚本，例如 jquery 等。

在我的 backgound.js 中，我有：

try {
    importScripts('/js/jquery-3.4.1.min.js', '/js/common.js');
} catch (e) {
    console.error('importScripts: ' + e);
}
...
calling to getCookie...

在 common.js 中，我有如下函数：

async function getCookie(key) {   
    return ...;
}

但是当我加载扩展程序时，出现错误：

background.js:22 importScripts: TypeError: Cannot read property 'createElement' of undefined

此错误来自 Jquery 库

之后我收到另一个错误：

Uncaught (in promise) ReferenceError: getCookie is not defined

因为 jquery 中的错误，它不会加载通用脚本？我该如何修复它？

是否有更稳定的解决方案来导入脚本？以便一个脚本中的错误不会导致其他脚本失败？

Answer 1

发布对我有用的解决方案： 将脚本从 npm 导入后台服务工作者：

在我的 manifest.json 中将 "type": "module" 添加到我的后台脚本：

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

在我的 background.js 中，只需导入所需的模块脚本：

import Dexie from "/node_modules/dexie/dist/modern/dexie.min.mjs"

修改：

请注意，从 Manifest Version 3 开始，为了从您的 后台服务工作者 调用脚本到网页中，您需要使用 chrome.scripting.executeScript 。示例：

//background.js
let [tab] = await chrome.tabs.query({active: true, currentWindow: true})

      //invoke function
      await chrome.scripting.executeScript({
        target: {tabId: tab.id},
        function: colorSelectedText,
        args: [tab.title]
      })
  });
//OR
      //invoke file
      await chrome.scripting.executeScript({
        target: {tabId: tab.id},
        files: ['your_script.js']
      })
  });

所需脚本必须与 manifest.json 位于同一父文件夹中（当我尝试使用两个点 ../path 时不起作用）

Answer 2

您可以将扩展应用程序与要使用的 jquery 版本一起打包。然后将其添加为服务工作者的一部分。这是我的 manifest.json 的样子

{
    "name": "Foo Bar",
  "description": "NA",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": [
    "storage"
],
"action": {
    
    "default_popup": "popup.html"
},
"background": { "service_workers": ["bg-loader.js","/js/jquery-3.6.0.min.js" ]}

}

我有一个 bg-loader.js，我用它来导入我的 js 逻辑脚本，其中有我的 jquery 函数

try {
    importScripts('/js/index.js' /*, and so on */);
} catch (e) {
    console.error(e);
}

然后在我的 index.html 中，我将 jquery 脚本添加到我的 popup.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test</title>

  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
 


</body>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>

<script type="text/javascript" src="js/index.js"></script>


</html>