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

时间:2018-10-28 08:34:48

标签: google-chrome-extension

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

我的manifest.js

{
"manifest_version": 2,

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

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

3 个答案:

答案 0 :(得分:1)

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

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

方法1:使用清单文件中的scripts键的background

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

示例:

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

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

方法2:使用清单文件中的page键的background

有时候,将2.5MB的库文件保存在项目目录中只是效率不高。

使用此方法,您将构建自己的后台页面,并使用script标签从远程加载所需的后台脚本和库。

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'"

答案 1 :(得分:0)

如果您的脚本不在content_scripts中,我认为Airlancer有一个关于库冲突的观点。

它还从SO post中说:

  

您不应使用background标记添加js库。你比较好   下载扩展并将其与所需的库捆绑在一起   并将其作为content_script

答案 2 :(得分:0)

如果要在后台脚本中添加库,则可以包括HTML并加载HTML中的所有库,然后将该HTML添加到manifest.js的后台选项中。

manifest.json

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

background.html

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