Port to Vite and Typescript

[Saghen]

I recently discovered this fantastic project and, while getting the extension running on Firefox, I noticed the extension could use a fresh coat of paint. In general, I've attempted to improve the maintainability of the codebase through refactoring and the switch to Typescript while attempting to avoid complexity from a bundler.

• Switch to Vite and Typescript with auto-reload development environment
• Use ENVs for detection of testing and consent
• Support both Manifest V2 and V3 for Firefox and Chrome respectively
• Use package.json for all scripts
• Remove dependency on ua-parser-js
• Separate all calls to browser.storage.local into storage.ts
• Misc refactoring of background, popup and consent

Currently, I'm using a fork of aw-client-js with support for fetch. Axios uses XHR behind the scenes which has been removed in Service Workers, a requirement for Manifest V3. Fetch is only supported on Node 18+ by default so I'll need to revisit those changes. https://github.com/Saghen/aw-client-js

[ErikBjare]

Wow, awesome work. I'm a bit daunted by such a massive overhaul PR, but a few initial thoughts:

• Keep the media submodule, it's there for a reason (to keep all assets in one place and avoid having img blobs in several repos).
• Will the ua-parser-js deprecation/removal impact browser detection? (looks okay, but not sure)
• Will Vite generate a non-minified, human-readable, output file? (Mozilla/Chrome addon review requires it)
• What's the "{{chrome/firefox}}.manifest..." magic?
• To what extend have you tested it? :)

This PR will probably supersede #81 #89 #100 (and more?)

[Saghen]

Will the ua-parser-js deprecation/removal impact browser detection?

Tested on Firefox, Chrome and Opera but haven't tested on Safari

What's the "{{chrome/firefox}}.manifest..." magic?

Docs can be found here: https://vite-plugin-web-extension.aklinker1.io/guide/configuration.html#browser-specific-manifest-fields

To what extend have you tested it? :)

Tested the consent and popup on both Chrome and Firefox. Using it in a test environment alongside the production extension to see if there's any discrepancies

[Saghen]

Heads up that I haven't abandoned this! It's been working great on my machine so far but would definitely like to get a few more eyes on it when it's closer to being ready. Waiting on the axios support for fetch https://github.com/axios/axios/pull/5146 or will look to test and get my changes in https://github.com/Saghen/aw-client-js merged in before this PR can be merged.

[ErikBjare]

No worries!

Just a heads-up though, there have been a few changes to master since you made this PR. You might want to carefully rebase, or resolve them some other way.

I would also appreciate it if you avoided any change to formatting rules. Big PRs like this are difficult to review as it is, so let's keep the formatting changes as minimal as possible so that the diff is readable.

[ErikBjare]

I merged the aw-client-js PR.

Curious if you'll continue to work on this, but no pressure or rush :)

[Saghen]

Yep! Still planning to get this wrapped up

[Saghen]

Surprised by some of my choices on the original PR, like removing the Makefile :stuck_out_tongue: Rebased onto master but none of the changes, beside the README change seemed to be applicable. Other changes:

• added back the Makefile
• added precommit hook for formatting
• fixed up the gitignore

I should have waited for your review before squashing the commits, sorry about that. Firefox supports Manifest v3 now so it may be worth upgrading to that in a subsequent PR, although there's some weird caveats wrt permissions that I might have to check on.

[Saghen]

Hey @ErikBjare would you be willing to take over this PR? Seems like some pretty minor things at this point and you should have edit access to the branch. I feel that would be quicker than the back and forth

[ErikBjare]

@Saghen I haven't reviewed it properly because the diff is practically unreadable due to the formatting changes, making git not understand that files were moved and edited, not deleted and rewritten from scratch. It is possible one might be able to fix this by using rebase and adding a move commit before the other commits (as explained here), but I haven't done that before.

Given this, I don't think I could take it over in its current state without a lot of work. I would instead probably recreate the PR from scratch with inspiration taken from this, which I don't think would be faster, and which I would probably continue to procrastinate. Let's see if the above thing works first, I'll give it a shot.

Edit: Will take a little work, but this works:

#!/usr/bin/fish
git rebase -i $branch_head^  # edit first commit
git reset HEAD^

# For each moved file
set old static/popup.js && git restore $old
set new src/popup/main.ts && mv $new $new.new && git mv $old $new && mv $new.new $new

git commit --amend

[Saghen]

Gotcha, let me know how that goes! I did rewrite everything from scratch except for popup.html and a couple others iirc so that's why git has not marked them as moved. And the formatting was to match the .editorconfig that was already in the repo but I'll remove that and take care of the review comments soon

[ErikBjare]

Gotcha, let me know how that goes!

It worked, but was too cumbersome to complete.

I did rewrite everything from scratch except for popup.html and a couple others iirc so that's why git has not marked them as moved.

I realized that as I made my attempt and actually saw how significant the changes were. Even harder to review 😅, but I massively appreciate the effort of putting this together! 🥇

I'll give it another pass when the CI is passing and the formatting stuff is fixed. Might try to get another pair of eyes on this.

[ErikBjare]

@BelKed Yes, we'd have to check Brave detection and other recent commits to master (like https://github.com/ActivityWatch/aw-watcher-web/commit/0b289c4208f308050979fc729a69cf0c57dd7d8f) so that they're included correctly (as they may have disappeared in a rebase).

[Saghen]

@ErikBjare comments resolved and rebased on master!

[ErikBjare]

Really excited about this, will try to find time to review and merge in the coming days.

[powellnorma]

I am unable to load the result of make build-firefox (firefox.zip) in firefox - It says This add-on could not be installed because it appears to be corrupt.. For chrome, loading chrome.zip works fine.

https://stackoverflow.com/q/39854127

In the browserconsole (ctrl+J) I see:

addons.xpi  WARN    Invalid XPI: Error: Cannot find id for addon

I was able to load the aw-watcher-web.zip from current master just fine.

Ok, it's probably due to missing:

  "browser_specific_settings": {
    "gecko": {
      "id": "{<uuid>}"
    }
  },

in manifest.json

Fixed in https://github.com/Saghen/aw-watcher-web/pull/2