Support building as chrome extension (#23)

## Changes - Changed `/web` files to support the wallet as an extension. - Add to README how to build as an extension. - Add CI that builds as an extension. ## Checklist - [x] My code follows the style of this project. - [x] The code compiles without warnings. - [x] I have performed a self-review of the changes. - [x] I have documented my code, in particular the intent of the hard-to-understand areas. - [ ] (If necessary) I have updated the CHANGELOG.
Concordium · Dec 4, 2023 · 5eb10c7 · 5eb10c7
1 parent 63dc618
commit 5eb10c7
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 54 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -0,0 +1,43 @@
+name: Build and release
+
+on:
+  push:
+    # Pattern matched against refs/tags
+    tags:
+      - '*' # Push events to every tag not containing /
+
+    # Allows us to run the workflow manually from the Actions tab
+    workflow_dispatch:
+
+env:
+    flutter_version: 3.13.6
+
+jobs:
+    chrome-extension-build-and-upload:
+      runs-on: ubuntu-22.04
+      steps:
+        - name: Checkout repository
+          uses: actions/checkout@v4
+        - name: Setup Flutter
+          uses: subosito/flutter-action@v2
+          with:
+            flutter-version: ${{ env.flutter_version }}
+            channel: 'stable'
+            cache: true
+        - name: Download pub dependencies
+          run: flutter pub get
+        - name: Build Extension
+          run: flutter build web --web-renderer html --csp --release
+        - name: Get package version
+          id: package_version
+          uses: mikefarah/yq@master
+          with:
+            cmd: yq .version pubspec.yaml
+        - name: Upload Bundle
+          uses: actions/upload-artifact@v3
+          with:
+            name: concordium-wallet-web-${{ steps.package_version.outputs.result }}
+            # We package everything except the canvaskit, which we don't use
+            path: |
+              ${{github.workspace}}/build/web/
+              !${{github.workspace}}/build/web/canvaskit/*
diff --git a/README.md b/README.md
@@ -20,6 +20,17 @@ which expands into [`wallet_proxy/model.g.dart`](./lib/services/wallet_proxy/mod
 
 The generated class is checked into the repo, but imports always refer to the original one.
 
+## Chrome extension
+
+To build the wallet as a chrome extension, run:
+```shell
+flutter build web --web-renderer html --csp
+```
+Then the `build/web/` directory will contain the files for the extension.
+
+To load the extension into Chrome select "Load unpacked" from the "Manage extensions" page (`chrome://extensions/`) and select that directory.
+The contents of `build/web/` can be zipped for submitting to the Chrome store.
+
 ## Automated Tests
 
 For unit / widget tests, run:

diff --git a/web/index.html b/web/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html style="height: 600px; width: 375px">
 <head>
   <!--
     If you are serving your web app in a path other than the root, change the
@@ -32,28 +32,8 @@
   <title>concordium_wallet</title>
   <link rel="manifest" href="manifest.json">
 
-  <script>
-    // The value below is injected by flutter build, do not touch.
-    const serviceWorkerVersion = null;
-  </script>
-  <!-- This script adds the flutter initialization JS code -->
-  <script src="flutter.js" defer></script>
 </head>
 <body>
-  <script>
-    window.addEventListener('load', function(ev) {
-      // Download main.dart.js
-      _flutter.loader.loadEntrypoint({
-        serviceWorker: {
-          serviceWorkerVersion: serviceWorkerVersion,
-        },
-        onEntrypointLoaded: function(engineInitializer) {
-          engineInitializer.initializeEngine().then(function(appRunner) {
-            appRunner.runApp();
-          });
-        }
-      });
-    });
-  </script>
+    <script src="main.dart.js" type="application/javascript"></script>
 </body>
 </html>
diff --git a/web/manifest.json b/web/manifest.json
@@ -1,35 +1,12 @@
 {
     "name": "concordium_wallet",
-    "short_name": "concordium_wallet",
-    "start_url": ".",
-    "display": "standalone",
-    "background_color": "#0175C2",
-    "theme_color": "#0175C2",
-    "description": "A new Flutter project.",
-    "orientation": "portrait-primary",
-    "prefer_related_applications": false,
-    "icons": [
-        {
-            "src": "icons/Icon-192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "icons/Icon-512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        },
-        {
-            "src": "icons/Icon-maskable-192.png",
-            "sizes": "192x192",
-            "type": "image/png",
-            "purpose": "maskable"
-        },
-        {
-            "src": "icons/Icon-maskable-512.png",
-            "sizes": "512x512",
-            "type": "image/png",
-            "purpose": "maskable"
-        }
-    ]
+    "version": "1.0.0",
+    "content_security_policy": {
+        "extension_pages": "script-src 'self' ; object-src 'self'"
+    },
+    "action": {
+        "default_popup": "index.html",
+        "default_icon": "icons/Icon-192.png"
+    },
+    "manifest_version": 3
 }