feat: port to vite, typescript, manifest v3

.editorconfig

@@ -7,7 +7,7 @@ trim_trailing_whitespace = true
 charset = utf-8
 
 # 2 spaces for JS, HTML and CSS/SASS
-[*.{js,html,css,scss,sass,less}]
+[*.{ts,js,html,css,scss,sass,less}]
 indent_size = 2
 
 # 4 spaces for markdown

.github/workflows/build.yml

@@ -1,38 +1,37 @@
-# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
 name: Build
 
 on:
-  push:
-    branches: [ master ]
-  pull_request:
-    branches: [ master ]
+    push:
+        branches: [master]
+    pull_request:
+        branches: [master]
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
+    build:
+        runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [12.x]
+        steps:
+            - uses: actions/checkout@v3
+            - name: Use Node.js 18.x
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 18.x
+                  cache: 'npm'
 
-    steps:
-    - uses: actions/checkout@v2
-      with:
-        submodules: 'recursive'
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    - name: Install
-      run: make install
-    - name: Build
-      run: make build
-    - name: Upload artifact
-      uses: actions/upload-artifact@v2-preview
-      with:
-        name: aw-watcher-web
-        path: aw-watcher-web.zip
+            - run: npm ci
 
+            - name: Build Firefox
+              run: npm run build:firefox
+            - name: Upload artifact
+              uses: actions/upload-artifact@v2-preview
+              with:
+                  name: firefox
+                  path: dist.zip
 
+            - name: Build Chrome
+              run: npm run build:chrome
+            - name: Upload artifact
+              uses: actions/upload-artifact@v2-preview
+              with:
+                  name: chrome
+                  path: dist.zip

.github/workflows/codeql.yml

@@ -1,41 +1,39 @@
-name: "CodeQL"
+name: 'CodeQL'
 
 on:
-  push:
-    branches: [ "master" ]
-  pull_request:
-    branches: [ "master" ]
-  schedule:
-    - cron: "25 4 * * 3"
+    push:
+        branches: ['master']
+    pull_request:
+        branches: ['master']
+    schedule:
+        - cron: '25 4 * * 3'
 
 jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-    permissions:
-      actions: read
-      contents: read
-      security-events: write
+    analyze:
+        name: Analyze
+        runs-on: ubuntu-latest
+        permissions:
+            actions: read
+            contents: read
+            security-events: write
 
-    strategy:
-      fail-fast: false
-      matrix:
-        language: [ javascript ]
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v3
 
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
+            - name: Initialize CodeQL
+              uses: github/codeql-action/init@v2
+              with:
+                  languages: javascript, typescript
+                  queries: +security-and-quality
 
-      - name: Initialize CodeQL
-        uses: github/codeql-action/init@v2
-        with:
-          languages: ${{ matrix.language }}
-          queries: +security-and-quality
+            - name: Use Node.js 18.x
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 18.x
+                  cache: 'npm'
+            - run: npm ci
+            - run: npm run build:chrome
 
-      - name: Autobuild
-        uses: github/codeql-action/autobuild@v2
-
-      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v2
-        with:
-          category: "/language:${{ matrix.language }}"
+            - name: Perform CodeQL Analysis
+              uses: github/codeql-action/analyze@v2

.gitignore

@@ -1,5 +1,5 @@
-aw-watcher-web.zip
-out
-build
 node_modules
+build
+
+# Editor directories and files
 .DS_Store

.gitmodules

@@ -1,6 +1,3 @@
 [submodule "media"]
 	path = media
 	url = https://github.com/ActivityWatch/media.git
-[submodule "aw-client-js"]
-	path = aw-client-js
-	url = https://github.com/ActivityWatch/aw-client-js.git

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx prettier --write .

.prettierrc

@@ -0,0 +1,4 @@
+{
+    "singleQuote": true,
+    "semi": false
+}

Makefile

@@ -1,50 +1,55 @@
 .PHONY: build install clean
 
-# This is what Google and Mozilla wants us to upload when we release a new version to the Addon "store"
-build: install
-	npm run build
-	make aw-watcher-web.zip
-
 install:
 	npm ci
-	(cd aw-client-js; npm ci; npm run compile)
 
-update:
-	npm run build
+compile:
+	npx tsc --noEmit
 
 clean:
 	rm -rf node_modules build
-	(cd aw-client-js; rm -rf node_modules)
 
-aw-watcher-web.zip: out/app.js
-	rm -f $@
-	zip -r -FS $@ manifest.json static/ out/ media/logo/logo-128.png media/banners/banner.png
+#---------
+## Building
+
+dev:
+	NODE_ENV=development npx vite build --mode development --watch
+
+# This is what Google wants us to upload when we release a new version to the Addon "store"
+build-chrome: install
+	make update-chrome
+	make zip-build
+
+update-chrome:
+	VITE_TARGET_BROWSER=chrome npx vite build
+
+# This is what Mozilla wants us to upload when we release a new version to the Addon "store"
+build-firefox: install
+	make update-firefox
+	make zip-build
+
+update-firefox:
+	VITE_TARGET_BROWSER=firefox npx vite build
+
+#---------
+## Zipping
+
+# To build a zip archive for uploading to the Chrome Web Store or Mozilla Addons
+zip-build:
+	cd build && zip ../build.zip -r *
 
 # To build a source archive, wanted by Mozilla reviewers. Include media subdir.
-srczip:
+zip-src:
 	rm -rfv build
 	mkdir -p build
 	# archive the main repo
 	git archive --prefix=aw-watcher-web/ -o build/aw-watcher-web.zip HEAD
 	# archive the media subrepo
 	(cd media/ && git archive --prefix=aw-watcher-web/media/ -o ../build/media.zip HEAD)
-	(cd aw-client-js/ && git archive --prefix=aw-watcher-web/aw-client-js/ -o ../build/aw-client-js.zip HEAD)
 	# extract the archives into a single directory
 	(cd build && unzip -q aw-watcher-web.zip)
-	(cd build && unzip -q aw-client-js.zip)
 	(cd build && unzip -q media.zip)
 	# zip the whole thing
-	(cd build/aw-watcher-web && zip -r ../aw-watcher-web.zip *)
+	(cd build && zip -r aw-watcher-web.zip aw-watcher-web)
 	# clean up
-	(cd build && rm media.zip)
-
-# Tests reproducibility of the build from srczip
-test-build-srczip: srczip build
-	(cd build/aw-watcher-web && make build)
-	@# check that aw-watcher-web.zip have the same size
-	@wc -c aw-watcher-web.zip build/aw-watcher-web/aw-watcher-web.zip | \
-		sort -n | \
-		cut -d' ' -f2 | \
-		uniq -c | \
-		grep -q ' 2 ' \
-	|| (echo "build artifacts not the same size" && exit 1)
+	(cd build && rm -r media.zip aw-watcher-web)

README.md

@@ -5,13 +5,12 @@
 
 A cross-browser WebExtension that serves as a web browser watcher for [ActivityWatch][activitywatch].
 
-
 ## Usage
 
 Install for your browser:
 
- - [Chrome][chrome]
- - [Firefox][firefox]
+-   [Chrome][chrome]
+-   [Firefox][firefox]
 
 [activitywatch]: https://github.com/ActivityWatch/activitywatch
 [firefox]: https://addons.mozilla.org/en-US/firefox/addon/aw-watcher-web/
@@ -25,17 +24,18 @@ Install for your browser:
 **NOTE:** Due to Mozilla Addon policy, this is not possibly with the Mozilla-hosted versions of the extension. You need to fork the extension and modify a hardcoded value to get this to work.
 
 Due to the issue mentioned above, a privacy notice has to be displayed to follow the Mozilla add-on policy. This can be pre-accepted by setting the following Firefox Enterprise Policy:
+
 ```json
 {
-  "policies": {
-    "3rdparty": {
-      "Extensions": {
-        "{ef87d84c-2127-493f-b952-5b4e744245bc}": {
-          "consentOfflineDataCollection": true
+    "policies": {
+        "3rdparty": {
+            "Extensions": {
+                "{ef87d84c-2127-493f-b952-5b4e744245bc}": {
+                    "consentOfflineDataCollection": true
+                }
+            }
         }
-      }
     }
-  }
 }
 ```