shadow-cljs 2024-05-26 | Slack Archive

Mor Gazith14:05:57

hello, we’re trying to migrate an existing chrome-extension built with shadow from manifest v2 to manifest v3. I’ve seen the demo repo https://git.homegu.com/thheller/chrome-ext-v3, which uses :target :esm but I’ve hit so many issues one after the other, and it seems like a rabbit hole that never ends. for v2 we were using :target :chrome-extension which i also seen an example of how to use that to comply with v3 https://github.com/nette-io/hacky-chromex-shadow-manifest-v2-to-v3-migration, but this approach also didn’t seem to work for us. is there any documentation on how to target a v3 extension without using :esm , which seems to require a lot of code changes? or in other words, what’s the minimal set of changes we can make to have this extension building and running in chrome?

thheller14:05:25

what issues did you have with :esm? I mean are they actual issues with ESM or just v3?

Mor Gazith14:05:23

well, the last issue i’ve been trying to resolve that drove me to post this now, after spending a day just to get my extension to build for :esm is when i click on the extension icon to run popup.html, i get: Uncaught ReferenceError: $APP is not defined in my out/browser-action.js online i can only see one reference to this issue, where the user simply said the issue was PEBKAC 😆 I’m sure most of my v3 issues so far had been PEBKAC in some way or another… :face_palm:

thheller14:05:29

did you properly switch all the html script tags to use type="module"?

thheller14:05:13

and maybe also specified that in the manifest.json where necessary?

thheller14:05:16

I'm not very experienced with chrome extensions as I have only done extremely simple ones

thheller14:05:07

it is absolutely possible some things aren't covered under :esm, just seemed to work for everything I tried

Mor Gazith14:05:02

well, i’ve just tried with both <script type="module" src="out/browser-action.js"></script> and <script type="text/javascript" src="out/browser-action.js"></script> both produce the same $APP is not defined error. the browser-action.js file, i’m not sure it’s ESM actually, it begins with:

(function(){
'use strict';...

and then has many references to $APP, but i don’t see how it gets $APP from

thheller14:05:15

I'm guessing this is a release build?

thheller14:05:51

and yes, this does not look like a :target :esm output?

Mor Gazith14:05:03

yes. it’s release

thheller14:05:12

maybe an old file from a previous build?

Mor Gazith14:05:23

ha! yes i cleared the out folder and indeed only background and shared were created, but here’s my config:

:extension-prod
  {:target :esm
   :output-dir "resources/ext-prod/out"
   :module-loader true
   :modules
   {:shared         {:entries []}
    :background     {:init-fn foo/init! :depends-on #{:shared}}}
    :front-shared   {:entries [] :depends-on #{:shared}}
    :content-script {:init-fn bar/init! :depends-on #{:front-shared}}
    :browser-action {:init-fn foobar/init! :depends-on #{:front-shared}}

so i think i’m asking it to compile browser-action.js aren’t i? also, that “front-shared” stuff, i added because it kept putting stuff in shared.js that required DOM access, which background.js would import and would break when reloading in chrome since background can’t access DOM anymore

thheller14:05:02

that config has a misplaced }, properly indented that looks like

:extension-prod
{:target :esm
 :output-dir "resources/ext-prod/out"
 :module-loader true
 :modules
 {:shared         {:entries []}
  :background     {:init-fn foo/init! :depends-on #{:shared}}}
 :front-shared   {:entries [] :depends-on #{:shared}}
 :content-script {:init-fn bar/init! :depends-on #{:front-shared}}
 :browser-action {:init-fn foobar/init! :depends-on #{:front-shared}}

thheller14:05:16

see how the other modules aren't actually part of the :modules map anymore?

Mor Gazith14:05:33

:face_palm: just noticed that

thheller14:05:31

:module-loader true is not a valid :esm option, it has no effect

Mor Gazith14:05:47

thanks so much!

Mor Gazith14:05:19

should i still be using manifest.edn to compile a manifest.json? in your extension demo repo, i see you’ve created a manifest.json directly instead

thheller14:05:54

:target :esm has no support or need to modify manifest.json, so you just write it by hand without any manifest.edn

Mor Gazith14:05:31

got it, thanks! I hope i’ll be able to make some progress…

2024-05-26

Channels