build: improvements around extension packaging

.github/workflows/build-extension.yml

@@ -1,5 +1,5 @@
 name: Build Extension
-on: [push]
+on: [push, pull_request]
 
 jobs:
   build-extension:
@@ -19,17 +19,27 @@ jobs:
             node_modules
             */*/node_modules
           key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
+      - uses: lucasmotta/pull-request-sticky-header@1.0.0
+        with:
+          header: '> [Download the latest builds](https://github.com/blockstack/ux/actions/runs/${{ github.run_id }}).'
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Install monorepo deps
         run: yarn --frozen-lockfile
         if: steps.lerna-cache.outputs.cache-hit != 'true'
-      - name: Build connect-ui
-        run: yarn lerna run build --scope @stacks/connect-ui
-      - name: Build Extension
-        run: yarn lerna run prod:ext --stream
-      - name: Zip extension
-        run: zip -r extension.zip ./packages/app/dist
+      - name: Build extension
+        run: sh build-ext.sh
+      - uses: actions/upload-artifact@v2
+        name: Upload Extension Zip
+        with:
+          name: connect-extension
+          path: connect-extension.zip
+      - name: Sign Firefox extension
+        run: yarn web-ext sign --channel=unlisted
+        env:
+          WEB_EXT_API_KEY: ${{ secrets.WEB_EXT_API_KEY }}
+          WEB_EXT_API_SECRET: ${{ secrets.WEB_EXT_API_SECRET }}
       - uses: actions/upload-artifact@v2
-        name: Upload Zip artifact
+        name: Upload Firefox Add-On XPI
         with:
-          name: extension.zip
-          path: extension.zip
+          name: connect-addon
+          path: web-ext-artifacts/*.xpi

.github/workflows/main.yml

@@ -1,5 +1,5 @@
 name: UX
-on: [push]
+on: [push, pull_request]
 
 jobs:
   test_keychain:

.gitignore

@@ -45,4 +45,6 @@ UserInterfaceState.xcuserstate
 yalc.lock
 .yalc
 
-packages/connect-ui/connect
+packages/connect-ui/connect
+
+web-ext-artifacts

Dockerfile

@@ -6,11 +6,11 @@ RUN apt-get update -y && apt-get install -y build-essential python3 nodejs zip c
   && curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg |  apt-key add - \
   && sh -c 'echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list' \
   && apt-get update -y && apt-get install -y yarn \
-  && ./build-ext.sh
+  && ./build-ext.sh /connect-extension.zip
 
 
 FROM alpine:latest
-COPY --from=builder /extension.zip .
+COPY --from=builder /connect-extension.zip .
 
 # Wait for extension.zip to be copied into local
 CMD sleep 30

README.md

@@ -9,23 +9,43 @@ This monorepo contains a few key packages that the User Experience team at Block
 - [`test-app`](./packages/test-app): A simple React app for testing out Connect and the App.
 - [`ui-docs`](./packages/ui-docs): A documentation site for `@blockstack/ui`.
 
+<!-- TOC depthFrom:2 -->
+
+- [Development environment setup](#development-environment-setup)
+  - [Running the apps locally](#running-the-apps-locally)
+- [Building browser extensions](#building-browser-extensions)
+  - [Optional - Build browser extensions using Docker](#optional---build-browser-extensions-using-docker)
+- [Install browser extension from source](#install-browser-extension-from-source)
+
+<!-- /TOC -->
+
 ## Development environment setup
 
 The first time you setup a development environment for this repository, follow these steps:
 
+~~~bash
+git clone https://github.com/blockstack/ux
+cd ux
+yarn
+yarn bootstrap
+~~~
+
 1. Clone this package.
 2. Run `yarn` to install dependencies
 3. Run `yarn bootstrap` to link dependencies within this repository
-4. In the command line, run `yarn dev` which will run two apps:
-    - `packages/test-app` which runs at localhost:3000 and implements an example of connect
-    - `packages/app` which is the auth app, running at localhost:8080
+
+### Running the apps locally
+
+In the command line, run `yarn dev` which will run two apps:
+  - `packages/test-app` which runs at localhost:3000 and implements an example of connect
+  - `packages/app` which is the auth app, running at localhost:8080
 
 For development instructions of specific packages, see the `README` in each package folder.
 
 ## Building browser extensions
 
 1. From the root of this repository, in the command line, run `sh build-ext.sh`
-2. The extension will be packaged as `extension.zip` inside this folder.
+2. The extension will be packaged as `connect-extension.zip` inside this folder.
 
 ### Optional - Build browser extensions using Docker
 
@@ -36,5 +56,23 @@ For development instructions of specific packages, see the `README` in each pack
 
 1. Copy the built extensions to your local machine:
     ```bash
-    docker run -d --name ux ux && docker cp ux:extension.zip . && docker rm -f ux
+    docker run -d --name ux ux && docker cp ux:connect-extension.zip . && docker rm -f ux
     ```
+
+## Install browser extension from source
+
+First, unzip the `connect-extension.zip` file that was generated in the previous step.
+
+If installing for Chrome or Brave:
+
+1. Go to: [**chrome://extensions**](chrome://extensions)
+2. Toggle: "**developer mode**" on.
+3. Click on: "**Load unpacked**"
+4. Select the new folder that was unzipped from `connect-extension.zip`.
+
+If installing for Firefox:
+
+1. Go to: [**about:debugging**](about:debugging)
+2. Click on "**This Firefox**"
+3. Click on: "**Load Temporary Add-on…**"
+4. Inside the new folder that was unzipped from `connect-extension.zip`, select the `manifest.json` file.

build-ext.sh

@@ -1,15 +1,15 @@
 #!/bin/sh
 echo "🛠  Installing dependencies."
 yarn
-echo "🛠  Building internal packages."
-yarn lerna run build --scope @stacks/connect-ui
 echo "🛠  Compiling extension."
-cd packages/app && yarn lerna run prod:ext
+yarn build:extension
 echo "🛠  Packaging Browser Extension"
-cd dist
+cd packages/app/dist
 TS=$(date +%Y)$(date +%m)010000
 find -print | while read file; do
     touch -t $TS "$file"
 done
-zip -Xro /extension.zip *
-echo "✅  Extension packaged as extension.zip"
+DEFAULT_DEST="../../../connect-extension.zip"
+DEST=${1:-$DEFAULT_DEST}
+zip -Xro $DEST *
+echo "✅  Extension packaged as $(basename $DEST)"

package.json

@@ -50,6 +50,7 @@
     "lerna": "^3.22.1",
     "prettier": "^2.0.5",
     "typescript": "^3.9.3",
+    "web-ext": "^5.4.1",
     "yalc": "^1.0.0-pre.42"
   },
   "dependencies": {
@@ -63,5 +64,8 @@
     "buffer": "5.6.0",
     "typescript": "3.9.3",
     "@types/node": "12.7.12"
+  },
+  "webExt": {
+    "sourceDir": "packages/app/dist/"
   }
 }

packages/app/README.md

@@ -45,25 +45,4 @@ Then, open [localhost:8080](http://localhost:8080).
 
 ## Build and install browser extension
 
-Clone this repository, install dependencies and build the extension:
-
-~~~bash
-git clone https://github.com/blockstack/ux
-cd ux
-yarn
-yarn build:extension
-~~~
-
-Then if installing for Chrome or Brave:
-
-1. Go to: [**chrome://extensions**](chrome://extensions)
-2. Toggle: "**developer mode**" on.
-3. Click on: "**Load unpacked**"
-4. Select the newly created folder "**dist**" from the project folder.
-
-If installing for Firefox:
-
-1. Go to: [**about:debugging**](about:debugging)
-2. Click on "**This Firefox**"
-3. Click on: "**Load Temporary Add-on…**"
-4. Open the newly created folder "**dist**" from the project folder, and choose the "**manifest.json**" file.
+Documentation for building browser extensions can be found in the [top-level README.md file](https://github.com/blockstack/ux/tree/master#building-browser-extensions) of this repository.

packages/app/src/manifest.json

@@ -40,5 +40,10 @@
       "js": ["message-bus.js"],
       "matches": ["*://*/*"]
     }
-  ]
+  ],
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "{e22ae397-03d7-4622-bd8f-ecaca8c9b277}"
+    }
+  }
 }

packages/app/webpack.config.js

@@ -12,6 +12,8 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl
 const TerserPlugin = require('terser-webpack-plugin');
 const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
 const { version } = require('./package.json');
+const { exec: _exec } = require('child_process');
+const { promisify } = require('util');
 
 /* eslint-enable @typescript-eslint/no-var-requires */
 
@@ -24,6 +26,24 @@ const getSegmentKey = () => {
   return 'Cs2gImUHsghl4SZD8GB1xyFs23oaNAGa';
 };
 
+const getVersion = async () => {
+  const exec = promisify(_exec);
+  let _version = version;
+  const branch = await exec(`git rev-parse --abbrev-ref HEAD | cut -d'/' -f2`);
+  if (branch.stderr) {
+    return _version;
+  }
+  if (!branch.stdout.includes('master')) {
+    const sha = await exec(`git rev-parse --short HEAD`);
+    if (sha.stderr) {
+      return _version;
+    }
+    _version += `.1${sha.stdout.replace(/\r?\n|\r/g, '')}`;
+    return _version;
+  }
+  return _version;
+};
+
 const sourceRootPath = path.join(__dirname, 'src');
 const distRootPath = path.join(__dirname, 'dist');
 const nodeEnv = process.env.NODE_ENV ? process.env.NODE_ENV : 'development';
@@ -216,7 +236,7 @@ module.exports = {
         from: path.join(sourceRootPath, 'manifest.json'),
         to: path.join(distRootPath, 'manifest.json'),
         toType: 'file',
-        transform(content, path) {
+        async transform(content, path) {
           const csrTag = '<% DEV_CSR %>';
           const versionTag = '<% VERSION %>';
           content = content.toString();
@@ -225,7 +245,9 @@ module.exports = {
           } else {
             content = content.replace(csrTag, '');
           }
-          content = content.replace(versionTag, version);
+          const fullVersion = await getVersion();
+          console.log('Extension Version:', fullVersion);
+          content = content.replace(versionTag, fullVersion);
           return Buffer.from(content);
         },
       },