[feat]: extension facelift

[nicolas377]

Right now, the chrome extension is pretty unreliable at injecting scripts. We can fix this, and on our way, we have the opportunity to make the extension look better as well (it looks atrocious, just look at the settings page). #141 implements this issue. Below this is a list of the things we'll be implementing.

• [x] Use tailwindcss for all extension pages
• [ ] Have a settings page with tabs that applies settings
• [x] Bundle scripts using webpack (x.ts and x.config.js exports a function that returns a webpack config)

[nicolas377]

Right now, let's have this be a planning issue until 3.3.0 is released and we're ready, and then we can go about implementing the facelift. @GeoFS-Extensions/authors while you get ideas for this, drop them here!

[nicolas377]

We could use tailwind css for styling our extension pages. Also, we could bundle our .ts files to the .js files without tsc, using webpack. What I'm thinking right now is us having a .ts file, and a .config.js file that exports a function that returns a webpack config. We could then bundle the .ts files. With that, we could also import functions from other ts files.

[nicolas377]

I'm thinking we could bundle the extension pages into just one html file, with inline <script></script> tags and inline <style></style> tags. Webpack can't do that though, so we'd need to find another bundler for that. We'd still use webpack to bundle to a .js file, then use another bundler to take the .html, .css (not sure how that would work with tailwind yet), and .js files into a single .html file to use.

[nicolas377]

When we build the extension, we'll also build the .css files to include the tailwind styles we're using. Webpack has a plugin that can output the .css file for us. Here's a tutorial I found.

[nicolas377]

In the last commit I made to the facelift branch (1cc17b9d026fb2115fde6aa28b44c7589387f013), I removed testing infrastructure, since I found it too hard to get tests working. I was making shots in the dark though, and I've found a tutorial I can use.

[nicolas377]

We need to fake specific parts of the chrome api for our testing regiment. Here's a way we can do that. We'll also have to get around the type defs for chrome. We might be able to use multiple tsconfigs to keep the chrome defs out of .test.ts files.

[nicolas377]

I'm actually going to use jest as our testing library, since it's less packages to take care of, and we don't need to import testing infrastructure.