google-chrome-extension - importScripts 而从脚本之一抛出错误

Question

在我的 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中的错误它没有加载公共(public)脚本？我该如何解决这个问题？

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

Answer 1

为我发布工作解决方案:将脚本从 npm 导入后台服务工作人员:

1. 在我的 ma​​nifest.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时不起作用)