Chrome: Create new clients app for Chrome Extension

[birkjernstrom]

Setup the barebones structure for developing our Chrome Extension.

Tasks

• [x] Create new Next13 app in clients/apps, e.g chrome-extension It's now a plain React app
• [x] Setup "Hello World" equivalent of content scripts that detect presence on Github Issues

[hult]

There is a first stab in the linked PR (#153).

Getting react/next to load from the generated index.html file (what would effectively be the settings pane that shows if you click the extension icon) is straightforward.

However, I still haven't been able to get next to generate a suitable javascript file that would load my app and attach it somewhere in the github issues page DOM (what apps/chrome-extension/extension/content.js is currently doing). Can't really figure out how to do it. Next apps only really have entry points through pages, not through a script (?).

Did you have any ideas?

[hult]

Ok, found this https://github.com/vercel/next.js/discussions/13912, think it may lead somewhere

[hult]

The drawback of the content script being a next app is that next doesn't seem to handle the entry point not being a page (with a <div id="__next"> on it (which github won't have)).

I've managed to mount my app by specifying an additional entry point "content", and then loading all chunks generated by next as my content script

    "content_scripts": [
        {
            "js": [
                "./next/static/chunks/polyfills-c67a75d1b6f99dc8.js",
                "./next/static/chunks/webpack-8fa1640cc84ba8fe.js",
                "./next/static/chunks/framework-ffffd4e8198d9762.js",
                "./next/static/chunks/main-01078d9c97ceacb1.js",
                "./next/static/chunks/content-4849e5d3fe46dedc.js"
            ],

But I get an error as the "main" entry point is looking for that element (and not loading it makes the script not run at all).

What's the benefit of the extension (or at least the content script) being a next app at all (it won't have a backend anyway, so no SSR, for example)?

[birkjernstrom]

Interesting and good research @hult!

You're right. Since it's always going to be a content script, we won't be leveraging any of the main Next benefits. So we could "downgrade" from Next to vanilla React on the client-side.

Only challenge to keep in mind is if we use components leveraging Next APIs and I'm thinking about their router/linking primarily. That's worth quickly sanity checking in components we want to share across Chrome Extension & Dashboard.

Possible to solve of course, e.g we create our abstraction for it which offers the same API, but imports & uses the right library for the current environment. Perhaps there even is something like that open source? Hopefully, we won't need it though. Let's start simple :)

[hult]

What could actually benefit from next (exported to html+js) is an extension settings page, but I don't think it makes sense to have it just for that. Will whip up a plain react version and make sure it uses some polarkit component to try it out.