浏览器扩展 - 如何在 background.js 文件中包含第三方库答案

【问题标题】：Browser extension - how to include third part library inside background.js file浏览器扩展 - 如何在 background.js 文件中包含第三方库
【发布时间】：2021-01-04 00:57:04
【问题描述】：

如何在不使用 webpack 的 chrome 扩展中包含 npm 库？我想在我的 background.js 文件中调用一个库，但如果我在清单后台脚本部分中声明该库，它将无法在后台脚本中使用，并且会记录此错误：background.js:8 Uncaught ReferenceError: lamejs is not defined

有什么帮助吗？

manifest.json

{
  "manifest_version": 2,
  "name": "test extension",
  "description": "test",
  "permissions": [
    "https://*",
    "webRequest",
    "activeTab",
    "downloads"
  ],
  "background": {
    "scripts": [
      "js/background.js",
      "js/lame.min.js"
    ],
    "persistent": true
  },
  "browser_action": {
    
  },
  "version": "1.0.0",
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

background.js

const mp3encoder = new lamejs.Mp3Encoder(1, 44100, 128);
// other code here

【问题讨论】：

你的包需要支持浏览器。这意味着它将有一个缩小（或没有）版本，您可以在网站中使用它。您必须将该脚本包含在清单的后台脚本部分中。最后，如果您的包有任何依赖项，请将其添加到后台脚本中。
该库在 npm 和浏览器版本中可用。问题是它无法识别，请参阅更新后的问题
在"js/background.js"之前移动"js/lame.min.js"

标签： javascript google-chrome-extension

【解决方案1】：

请记住，脚本是线性加载的。这意味着加载脚本的顺序非常重要。始终将您的 background.js 放在该数组的末尾。这部分代码 const mp3encoder = new lamejs.Mp3Encoder(1, 44100, 128) 在您使用它时将不可用，因为您在加载 background.js 之后加载 lamejs。

这是你的代码：

"background": {
    "scripts": [
      "js/background.js",
      "js/lame.min.js"
    ],

改为这样做：

"background": {
    "scripts": [
      "js/lame.min.js",
      "js/background.js"
    ],

【讨论】：