as I've seen last month manifest V3 is now ready for production as google development team says. But I think that documentation is not complete (https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration) or is not up to date. I am trying to learn how to develop an extension using angular,typescript and Webpack, but also , I want the extension to use manifest v3. I am using this tutorial as reference (https://medium.com/angular-in-depth/chrome-extension-with-angular-why-and-how-778200b87575). I somehow want to keep the same steps from this tutorial and not divert very much. My extension is a generated angular project and my background in written in typescript and is compiled in js using Webpack.
manifest.json
{
"name": "Great Extension",
"version": "1.0",
"description": "Build an Extension with Angular",
"manifest_version": 3,
"permissions": [
"activeTab",
"webNavigation",
"storage"
],
"background": {
"service_worker":"background.js"
},
"action": {
"default_popup": "index.html"
},
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self' "
}
}
background.ts
chrome.storage.sync.set({ color: '#3aa757' });
chrome.webNavigation.onCompleted.addListener(() => {
chrome.tabs.query({ active: true, currentWindow: true }, ([{ id }]) => {
chrome.pageAction.show(id);
});
}, { url: [{ urlMatches: 'google.com' }] });
});
custom-webpack.config.js
module.exports = {
entry: { background: 'src/background.ts' },
}
My background.js looks like this:
if (window === null || typeof window !== "object") {
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["background"],{
/***/ "EtE5":
/*!***************************!*\
!*** ./src/background.ts ***!
\***************************/
/*! no static exports found */
/***/ (function(module, exports) {
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
chrome.runtime.onInstalled.addListener(function () {
chrome.storage.sync.set({ color: '#3aa757' });
chrome.webNavigation.onCompleted.addListener(function () {
chrome.tabs.query({ active: true, currentWindow: true }, function (_a) {
var _b = __read(_a, 1), id = _b[0].id;
chrome.pageAction.show(id);
});
}, { url: [{ urlMatches: 'google.com' }] });
});
/***/ })
},[["EtE5","runtime"]]]);
//# sourceMappingURL=background.js.map
}
window is not defined
I searched and found that window is not supported in service workers.
TypeError: Failed to execute 'addAll' on 'Cache': Request scheme 'chrome-extension'
I know that the background.js needs to be a service worker, but I just can't find any solution to fit my problem and help me.
Is there any solution for doing this in manifest V3 that actually works ?
Adding optimization.runtimeChunk = false
works in my case.
custom-webpack.config.js
module.exports = {
entry: { background: 'src/background.ts' },
optimization: {
runtimeChunk: false
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With