AngularJs support for manifest V3

Sagar Mittal

unread,

Jun 26, 2023, 11:32:23 AM6/26/23

to Chromium Extensions

Hi team,

I have a browser extension (currently in MV2) that is built using AngularJs. I wanted to check if AngularJs is supported by MV3? Is there anything specific that I should keep in mind while migrating to MV3?

Thanks

Patrick Kettner

unread,

Jun 26, 2023, 11:36:02 AM6/26/23

to Sagar Mittal, Chromium Extensions

There is nothing specifically with Angular that would not work with MV3. If you hit specific issues, feel free to ask about them!

patrick

--
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/30b167c1-d014-40a9-a069-4220d10e79b4n%40chromium.org.

Sagar Mittal

unread,

Jun 26, 2023, 1:00:46 PM6/26/23

to Chromium Extensions, Patrick Kettner, Chromium Extensions, Sagar Mittal

Thanks Patrick,

I am running into the following issue, and dont know how to proceed since I am a newbie.

I am calling the following html file with my action key in manifest.json file:

Popup.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Test & Feedback</title>
    <link href="Style/PopupUnified.css" rel="stylesheet" />
</head>
<body ng-csp>
    <div ng-include="'templateCache_shell.html'"></div>
    <script src="../Scripts/outer.js"></script>
    <script src="../Scripts/q.min.js"></script>
    <script src="../Scripts/dexie.min.js"></script>
    <script src="../Scripts/angular.min.js"></script>
    <script src="../Scripts/angular-route.min.js"></script>
    <script src="../Scripts/angular-animate.min.js"></script>
    <script src="../Scripts/ui-grid.js"></script>
    <script src="../Scripts/ui-bootstrap-collapse.min.js"></script>
    <!--Make sure the order of ngStorage is the same . After angular and before require-->
    <script src="../Scripts/ngStorage.min.js"></script>
    <script src="../Scripts/jquery.min.js"></script>
    <script src="../Scripts/typeahead-0.11.1.min.js"></script>
    <script src="../Popup2/main.js"></script>

</body>
</html>

the main.js looks like this:

require([
    <other angular modules>
],
() => {
    angular.bootstrap(document, ['Popup']);
});

I gather that I cannot use requireJS as this might not be supported with manifest V3 (Confirmed from one of the previous discussions in this group). Hence, I replaced the "require([...])" syntax with "import * as abc from 'abc.js'"

import angular from 'angular';

angular.bootstrap(document, ['Popup']);

However, on using the import I am getting the following error on the console:

Uncaught SyntaxError: Cannot use import statement outside a module

Could you please help me with this issue?

Thanks,

Sagar

Deco

unread,

Jun 26, 2023, 1:05:09 PM6/26/23

to Sagar Mittal, Chromium Extensions, Patrick Kettner

You need to use <script type="module" src="../Popup2/main.js"></script>, to use export and import you must specify your script as a module in your HTML file.

Cheers,

Deco

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/439fada0-9fb2-4ec8-adca-c561828be2ben%40chromium.org.

Patrick Kettner

unread,

Jun 26, 2023, 1:05:45 PM6/26/23

to Sagar Mittal, Chromium Extensions

For "Uncaught SyntaxError: Cannot use import statement outside a module", can you add "type": "module" to your manifest.json's of background section?

Sagar Mittal

unread,

Jun 26, 2023, 2:11:00 PM6/26/23

to Chromium Extensions, Deco, Chromium Extensions, Patrick Kettner, Sagar Mittal

Thanks Patrick for the suggestion. I have already specified "type": "module" to my manifest.json's of background section.

Thanks Deco for this solution. I tried it out and it indeed resolved the "import" syntax related errors, although it has now started throwing some angular related errors :(