如何在 Chrome 扩展程序中包含库

Question

我想将 ethereumjs-tx.js 包含在不带 content_scripts 的 manifest.js` 中。

我的manifest.js：

{
"manifest_version": 2,

"name": "MyExtension",
"version": "1.0",    
"background": {
    "scripts": ["background.js"]
  },

 "permissions": [
    "tabs",
    "notifications",
    "http://*/",
    "https://*/"
  ]
}

Answer 1

有两种方法可以将外部库包含到 Chrome 中扩展程序的后台脚本中。我说后台脚本，因为该脚本最有可能需要外部库。

需要澄清的是，您的后台脚本在与用户正在使用的任何网页不同的范围内运行。因此，在后台脚本中加载外部库不会覆盖正在使用的网页中的任何内容。

方法一：使用manifest文件中的keyscripts的keybackground

在键的值内scripts，添加一个数组，其中包含对所需库和后台脚本的引用。请注意，数组内部的顺序很重要。首先列出的脚本将首先加载。

例子：

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

在这里，您的背景页面将由 Chrome 自动构建。

方法二：使用manifest文件中的keypage的keybackground

有时，在项目目录中保存 2.5MB 的库文件效率并不高。

通过这种方法，您将构建自己的后台页面，并使用脚本标签远程加载所需的后台脚本和库。

script从文件background中的密钥中删除该密钥manifest.json，并将其替换为page. 你可以拥有script钥匙，也可以page拥有钥匙，但不能两者兼得。的值page是对后台 html 页面的引用。

但这还不够。Chrome 的安全策略禁止您远程下载资源。

因此，修改content_security_policy密钥以放宽默认安全策略并指定后台页面下载库的 URL。

例子：

//...
"background": {
  "page": "background.html",
  "persistent": true
},
//...
"content_security_policy": "script-src 'self' http://code.jquery.com; object-src 'self'"

Answer 2

如果您想在后台脚本中添加库，您可以包含 HTML 并加载 HTML 中的所有库，然后将该 HTML 添加到 manifest.js 的后台选项中。

清单.json

"background": {
    "page": "background.html", 
    "persistent": false
  }

背景.html

<script src="./lib/moment/moment.min.js"></script>
<script type="module" src="./js/background.js"></script>