Merge pull request #72 from Kodylow/chrome-extension

feat: chrome extension support
elsirion · Apr 2, 2024 · ffe326f · ffe326f
2 parents 5ada27d + df3307b
commit ffe326f
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 59 deletions.
diff --git a/.typos.toml b/.typos.toml
@@ -0,0 +1,2 @@
+[files]
+extend-exclude = ["bun.lockb"]
diff --git a/bun.lockb b/bun.lockb
diff --git a/index.html b/index.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <meta name="version" content="{{buildVersion}}">
-    <link data-trunk rel="tailwind-css" href="./index.css"/>
-    <link data-trunk rel="rust" data-wasm-opt="z"/>
-    <link data-trunk rel="copy-dir" href="./assets/"/>
-    <link data-trunk rel="copy-file" href="./service-worker.js"/>
-    <link data-trunk rel="copy-file" href="./manifest.json"/>
-    <link data-trunk rel="copy-file" href="./favicon.ico"/>
-</head>
-<body></body>
+  <head>
+    <meta name="version" content="{{buildVersion}}" />
+    <link data-trunk rel="tailwind-css" href="./index.css" />
+    <link data-trunk rel="rust" data-wasm-opt="z" />
+    <link data-trunk rel="copy-dir" href="./assets/" />
+    <link data-trunk rel="copy-file" href="./service-worker.js" />
+    <link data-trunk rel="copy-file" href="./manifest.json" />
+    <link data-trunk rel="copy-file" href="./favicon.ico" />
+  </head>
+  <body></body>
 </html>
diff --git a/manifest.json b/manifest.json
@@ -1,46 +1,42 @@
 {
- "name": "Webimint Fedimint Client",
- "short_name": "Webimint",
- "start_url": "/",
- "display": "standalone",
- "background_color": "#ffffff",
- "theme_color": "#ffffff",
- "icons": [
-  {
-   "src": "\/assets\/icons\/android-icon-36x36.png",
-   "sizes": "36x36",
-   "type": "image\/png",
-   "density": "0.75"
+  "manifest_version": 3,
+  "__chrome__manifest_version": 3,
+  "name": "Webimint Fedimint Client",
+  "short_name": "Webimint",
+  "version": "0.1.0",
+  "description": "Webimint is an experimental Fedimint wallet using the Leptos web framework.",
+  "action": {
+    "default_popup": "index.html",
+    "default_icon": {
+      "48": "/assets/icons/android-icon-48x48.png",
+      "96": "/assets/icons/android-icon-96x96.png",
+      "192": "/assets/icons/android-icon-192x192.png"
+    }
   },
-  {
-   "src": "\/assets\/icons\/android-icon-48x48.png",
-   "sizes": "48x48",
-   "type": "image\/png",
-   "density": "1.0"
+  "background": {
+    "service_worker": "service-worker.js"
   },
-  {
-   "src": "\/assets\/icons\/android-icon-72x72.png",
-   "sizes": "72x72",
-   "type": "image\/png",
-   "density": "1.5"
+  "permissions": ["storage", "activeTab"],
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["webimint-{{buildVersion}}.js"]
+    }
+  ],
+  "__chrome__host_permissions": ["*://*/*"],
+  "content_security_policy": {
+    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';"
   },
-  {
-   "src": "\/assets\/icons\/android-icon-96x96.png",
-   "sizes": "96x96",
-   "type": "image\/png",
-   "density": "2.0"
-  },
-  {
-   "src": "\/assets\/icons\/android-icon-144x144.png",
-   "sizes": "144x144",
-   "type": "image\/png",
-   "density": "3.0"
-  },
-  {
-   "src": "\/assets\/icons\/android-icon-192x192.png",
-   "sizes": "192x192",
-   "type": "image\/png",
-   "density": "4.0"
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#ffffff",
+  "icons": {
+    "36": "/assets/icons/android-icon-36x36.png",
+    "48": "/assets/icons/android-icon-48x48.png",
+    "72": "/assets/icons/android-icon-72x72.png",
+    "96": "/assets/icons/android-icon-96x96.png",
+    "144": "/assets/icons/android-icon-144x144.png",
+    "192": "/assets/icons/android-icon-192x192.png"
   }
- ]
-}
+}
diff --git a/post_build.sh b/post_build.sh
@@ -1,5 +1,5 @@
 #!/usr/bin/env bash
-set -e
+set -euo pipefail
 
 appName="webimint"
 stylePrefix="index"
@@ -24,14 +24,17 @@ echo "Build-Version is: ${buildVersion}"
 # Replace placeholder in service-worker.js
 serviceWorkerJsFile=$(find ./dist/.stage -iname "service-worker.js")
 echo "Replacing {{buildVersion}} placeholder in: ${serviceWorkerJsFile}"
-sed "s/{{buildVersion}}/${buildVersion}/g" "${serviceWorkerJsFile}" > "${serviceWorkerJsFile}.modified"
-mv -f "${serviceWorkerJsFile}.modified" "${serviceWorkerJsFile}"
+sed -i "s/{{buildVersion}}/${buildVersion}/g" "${serviceWorkerJsFile}"
 
 # Replace placeholder in index.html
 indexHtmlFile=$(find ./dist/.stage -iname "index.html")
 echo "Replacing {{buildVersion}} placeholder in: ${indexHtmlFile}"
-sed "s/{{buildVersion}}/${buildVersion}/g" "${indexHtmlFile}" > "${indexHtmlFile}.modified"
-mv -f "${indexHtmlFile}.modified" "${indexHtmlFile}"
+sed -i "s/{{buildVersion}}/${buildVersion}/g" "${indexHtmlFile}"
+
+# Replace placeholder in manifest.json
+manifestJsonFile=$(find ./dist/.stage -iname "manifest.json")
+echo "Replacing {{buildVersion}} placeholder in: ${manifestJsonFile}"
+sed -i "s/{{buildVersion}}/${buildVersion}/g" "${manifestJsonFile}"
 
 # Extract CSS build version
 indexJsFile=$(find ./dist/.stage -iname "${stylePrefix}-*.${styleFormat}")
@@ -52,5 +55,68 @@ echo "CSS Build-Version is: ${cssBuildVersion}"
 # Replace placeholder in service-worker.js
 serviceWorkerJsFile=$(find ./dist/.stage -iname "service-worker.js")
 echo "Replacing {{cssBuildVersion}} placeholder in: ${serviceWorkerJsFile}"
-sed "s/{{cssBuildVersion}}/${cssBuildVersion}/g" "${serviceWorkerJsFile}" > "${serviceWorkerJsFile}.modified"
-mv -f "${serviceWorkerJsFile}.modified" "${serviceWorkerJsFile}"
+sed -i "s/{{cssBuildVersion}}/${cssBuildVersion}/g" "${serviceWorkerJsFile}"
+
+# ### Required for chrome extension, no inline scripting
+echo "Extracting script content from index.html and creating initWebimint.js"
+scriptContent=$(sed -n 's|.*<script type=module>\(.*\)</script>.*|\1|p' "${indexHtmlFile}")
+if [ -n "${scriptContent}" ]; then
+    echo "${scriptContent}" >./dist/.stage/initWebimint.js
+    echo "Replacing original script tag in index.html with reference to initWebimint.js"
+    sed -i 's|<script type=module>[^<]*</script>|<script type="module" src="/initWebimint.js"></script>|' "${indexHtmlFile}"
+else # using trunk serve, multiline script tags, have to extract line by line
+    echo "Using trunk serve, multiline script tags, have to extract line by line"
+    echo "Extracting script content from index.html and creating separate .js files"
+    # Directory where the new JS files will be stored
+    JS_DIR="./dist/.stage/js"
+    mkdir -p "$JS_DIR"
+    # Counter to name the extracted JS files uniquely
+    COUNTER=1
+    # Temporary file to hold the modified HTML content
+    TMP_HTML=$(mktemp)
+    # Initialize SCRIPT_OPEN to 0 before the loop
+    SCRIPT_OPEN=0
+    # Read the index.html file line by line
+    while IFS= read -r line || [[ -n "$line" ]]; do
+        if [[ $line =~ \<script.*\>\</script\> ]]; then
+            # Inline script tag with no content, just copy the line
+            echo "$line" >>"$TMP_HTML"
+        elif [[ $line =~ \<script.*\>(.*) ]]; then
+            # Opening script tag with potential inline content
+            SCRIPT_OPEN=1
+            # Capture any content on the same line as the opening script tag
+            SCRIPT_CONTENT="${BASH_REMATCH[1]}"
+            if [[ $SCRIPT_CONTENT ]]; then
+                # If there's inline content right after the script tag, add a newline to start accumulating correctly
+                SCRIPT_CONTENT+=$'\n'
+            fi
+        elif [[ $line =~ \</script\> ]]; then
+            # Closing script tag, write content to a new JS file
+            SCRIPT_FILE="$JS_DIR/extracted_$COUNTER.js"
+            echo "$SCRIPT_CONTENT" >"$SCRIPT_FILE"
+            # Replace the script tag in HTML with a reference to the new JS file
+            echo "<script type=\"module\" src=\"/js/extracted_$COUNTER.js\"></script>" >>"$TMP_HTML"
+            COUNTER=$((COUNTER + 1))
+            SCRIPT_OPEN=0
+            SCRIPT_CONTENT="" # Reset SCRIPT_CONTENT for the next script
+        elif [[ $SCRIPT_OPEN -eq 1 ]]; then
+            # Inside a script tag, accumulate the content
+            SCRIPT_CONTENT+="$line"$'\n'
+        else
+            # Outside script tags, just copy the line
+            echo "$line" >>"$TMP_HTML"
+        fi
+    done <"${indexHtmlFile}"
+    # Replace the original HTML file with the modified one
+    mv "$TMP_HTML" "${indexHtmlFile}"
+    # Clean up
+    rm -f "$TMP_HTML"
+    # Replace placeholder trunk address in JavaScript files
+    echo "Replacing {{__TRUNK_ADDRESS__}} placeholder in extracted JavaScript files"
+    jsFiles=$(find ./dist/.stage/js -iname "*.js")
+    TRUNK_ADDRESS=127.0.0.1:8080
+    for file in $jsFiles; do
+        sed -i "s/{{__TRUNK_ADDRESS__}}/${TRUNK_ADDRESS}/g" "$file"
+        echo "Replaced in: $file"
+    done
+fi
diff --git a/src/components/app.rs b/src/components/app.rs
@@ -71,7 +71,7 @@ pub fn App() -> impl IntoView {
       <Meta name="theme-color" content="#ffffff" />
 
       <div class="h-[100dvh]">
-        <div class="mx-auto w-full h-full flex flex-col lg:max-w-[600px] p-6">
+        <div class="mx-auto w-full h-full flex flex-col min-w-[400px] lg:max-w-[600px] p-6">
           <header class="flex justify-center mb-20">
             <Logo class="bg-red border-1 border-blue"/>
           </header>