5

I want to include ethereumjs-tx.js in manifest.js` without content_scripts.

my manifest.js: 

{
"manifest_version": 2,

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

 "permissions": [
    "tabs",
    "notifications",
    "http://*/",
    "https://*/"
  ]
}
Jessica Rodriguez
  • 2,899
  • 1
  • 12
  • 27
Самир Шахмурадлы
  • 127
  • 1
  • 9
  • To what end? I don't think it's possible. It is intended for your extension not to overwrite an existing lib used by the website you are interacting with. Imagine your extension using jquery version 1.3 but the website is using jquery version 1.2. If the scripts in your extension don't run in a content script those libraries would collide. – AirLancer Oct 28 '18 at 09:04
  • i include lib with "background", look down – Самир Шахмурадлы Oct 28 '18 at 09:16

3 Answers3

6

There are two ways to include an external library to the background script of an extension in Chrome. I say background script, because that script is the most likely candidate for needing an external library.

To clarify, your background script runs in a different scope from any web page that your users are using. So loading an external library inside the background script won't overwrite anything in the web page in use.

Method 1: Use the scripts key of the background key in the manifest file

Inside the value for the scripts key, add an array which contains reference to the library that you require, and the background script. Note that the order inside the array matters. Script listed first will be loaded first.

Example:

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

Here, your background page will be constructed automatically by Chrome.

Method 2: Use the page key of the background key in the manifest file

Sometimes, it's just not efficient to save a 2.5MB library file inside your project directory.

With this method, you will construct your own background page, with script tag that loads the required background script and libraries remotely.

Remove the script key from the background key in the manifest.json file, and replace it with page. You can either have the script key, or the page key, but you can't have both. The value for the page is a reference to your background html page.

But that's not enough. Chrome's security policy forbids you from downloading resources remotely.

Hence, modify the content_security_policy key to relax the default security policy and specify the URL where your background page will download the library.

Example:

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

I think Airlancer has a point about the colliding of libraries if your scripts is not in a content_scripts.

It also says from this SO post that:

You shouldn't use background tag to add a js library. You're better off downloading and bundling your extension with required libraries and getting it as a content_script.

Jessica Rodriguez
  • 2,899
  • 1
  • 12
  • 27
1

You can include an HTML and load all the libraries in HTML and add that HTML in background options in manifest.js if you want to add a library in background script.

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>
Musaddiq R. Mashrur
  • 101
  • 5