Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Migrating an angular written extension to manifest V3

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
   
}
  1. But if I try to load it in Google Canary chrome://extension I get an error saying that
window is not defined

I searched and found that window is not supported in service workers.

  1. I tried using workbox with Webpack but again I get some google error saying.
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 ?

like image 637
Bogdan12344321 Avatar asked Oct 14 '22 22:10

Bogdan12344321


1 Answers

Adding optimization.runtimeChunk = false works in my case.

custom-webpack.config.js

module.exports = {
  entry: { background: 'src/background.ts' },
  optimization: {
    runtimeChunk: false
  }
}
like image 78
BlueNC Avatar answered Oct 18 '22 09:10

BlueNC