Manifest v3

[pooja shah]

How to add multiple background script in manifest v3 file? I just send demo of v2 file syntax. 

"background": {

"scripts": [

"assets/js/environment.js",

"assets/js/jquery.min.js",

"assets/js/request.js",

"assets/js/background.js"

]

},

in v3 

we will convert this like 

"background": {

"service_worker": "background.js"

},

But remaining files that is execute above background.js how to add? 

Give me suggestion on this.

[Cameron Eckelberry]

Any files you need, you can load as modules e.g. require('./environment.js') or import './environment.js'.

[pooja shah]

In background. Js? 

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/ba143db9-16be-4655-ae39-8e3c9ba36f2an%40chromium.org.

[Cameron Eckelberry]

Yep!

[pooja shah]

After adding it throws error like: Service worker registration failed

[Jackie Han]

1. Traditional Method - importScripts

Because service worker is a worker, you can use importScripts(). For example:

// in manifest.json

"background": {
  "service_worker": "sw.js"
}

// in sw.js

importScripts('path/a.js');

importScripts('path/b.js');

importScripts('path/c.js');

Ref: https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/importScripts

2. ES Module - import

Note: This is a very new feature, only the latest Chrome(91?, 92) can use it. See https://bugs.chromium.org/p/chromium/issues/detail?id=1194681 

// in manifest.json

"background": {
  "service_worker": "sw.js",
  "type": "module"
}

// in sw.js

import * as myModule from "path/module-name.js";

Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

3. Use any package tools, package multiple js files into one bundle file

For example, 

// in manifest.json
"background": {
  "service_worker": "sw.js"
}

// command line

cat a.js b.js c.js > sw.js

--

You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/ddcdb2d3-d6cf-4db3-ab1f-540e77ec61ffn%40chromium.org.

[Simeon Vincent]

+1 to the suggestions that Jackie shared.

> Any files you need, you can load as modules e.g. require('./environment.js') or import './environment.js'.

To be clear, this presumes you're using tooling that supports these patterns. Vanilla JS doesn't support require() – that's a pattern from the Node.js ecosystem. In order to use require, you'll either need to use a compiler or import a CommonJS module loader. The import keyword was introduced in ES6, but standard service workers don't support dynamic or static imports. As Jackie mentioned, Chrome recently shipped support for module service workers, so it is now possible to use static imports (but not dynamic) inside your extension's service worker if it is declared with "type": "module".

Simeon - @dotproto

Chrome Extensions DevRel

[Sweta Naik]

I have used in V2

chrome.tabs.executeScript(tabId, { code: "$('#xxx').remove();" });

Can you please let me know how this convert in V3?

[Simeon Vincent]

Check out the Manifest V3 migration guide or the chrome.tabs.executeScript API docs :)

Simeon - @dotproto

Chrome Extensions DevRel 

[Sweta Naik]

Hello 

I want to use eval() in background.js in manifest V3 but not able to do it getting error if I use 'unsafe-eval' :

 "content_security_policy": {

"extension_pages": "script-src 'self' 'unsafe-eval'; object-src 'self'"

}

Error : 

'content_security_policy.extension_pages': Insecure CSP value "'unsafe-eval'" in directive 'script-src'.

[Simeon Vincent]

Unlike Manifest V2, the CSP rules for Manifest V3 extension cannot be relaxed to allow eval.

Simeon - @dotproto

Chrome Extensions DevRel