Upgrading browser extension manifest version to V3
Sagar Mittal
Hi,
I am working on migrating my browser extension from manifest V2 to manifest V3. The extension follows AMD module format that uses RequireJS. I am trying to convert it to ES module (es2015) format. However, I am facing some problems with that.
Here is the old code snippet:
Manifest.json:
{
"manifest_version": 2,
"name": "Name",
.
.
.
"background": {
"page": "Background/Worker/Background.html",
"persistent": true
},
"permissions": [
"activeTab",
"clipboardRead",
"tabs",
"storage",
"desktopCapture",
"<all_urls>",
"unlimitedStorage",
"system.cpu",
"system.memory",
"system.display",
"webNavigation"
],
.
.
.
}
Background.html
<html>
<head>
<script src="../../Scripts/outer.js"></script>
<script src="../../Scripts/jquery.min.js"></script>
<script src="../../Scripts/q.min.js"></script>
<script src="../../Scripts/ai.min.js"></script>
<script src="../../Scripts/mustache.min.js"></script>
<script src="../../Scripts/dexie.min.js"></script>
<script src="../../Scripts/require.js"></script>
<script src="../../Scripts/loaderConfig.js"></script>
<script src="main.js"></script>
</head>
<body>
<canvas id="image-editor"></canvas>
</body>
</html>
Main.ts:
require(['Background']);
Background.ts:
///<amd-dependency path="<some path>" />
import test = require("./test");
function initialize() {
// Code
test.someFunction();
}
$('document').ready(() => { initialize(); });
Here is how I have changed the files for manifest V3:
Manifest.json:
{
"manifest_version": 3,
"name": "Test & Feedback",
.
.
.
"background": {
"service_worker": "service-worker.js"
},
"permissions": [
"activeTab",
"clipboardRead",
"tabs",
"storage",
"desktopCapture",
"unlimitedStorage",
"system.cpu",
"system.memory",
"system.display",
"webNavigation",
"background"
],
"host_permissions": [
"<all_urls>"
],
.
.
.
}
Service-worker.js:
importScripts
(
'<path to scripts>',
'./Background/Worker/Background.js'
)
Background.ts:
import {someFunction} from '../../Model/test'
function initialize() {
// Code
someFunction ();
}
Initialize();
Test.ts:
export function test() : void {
console.log("test");
}
With these changes, I am getting the following error: (please see attachment ErrorWithImportScripts.png).
I even tried running the code with “type”:”module” option in background.service_worker, and replacing “importScripts” with “import” in service-worker.js file, but got the following error in that case: (please see attachment ErrorWithTypeModule.png)
Could someone please help me understand what I am doing wrong, or what I am missing here?
Thanks
