Prepare chrome extension deployment (#3)

.github/workflows/build.yml

@@ -8,6 +8,13 @@ on:
     branches:
       - main
   workflow_dispatch:
+  workflow_call:
+    inputs:
+      browser:
+        description: Browser platform to build for (e.g., "chrome", '["firefox", "chrome"]')
+        required: false
+        default: '["chrome", "firefox"]'
+        type: string
 
 jobs:
   test:
@@ -23,8 +30,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        browser: [chrome, firefox]
-
+        browser: ${{ fromJSON(github.event.inputs.browser || '["chrome", "firefox"]') }}
     steps:
       - name: Checkout code
         uses: actions/checkout@v4

.github/workflows/deploy.yml

@@ -0,0 +1,75 @@
+name: Deploy Browser Extension
+
+on:
+  push:
+    tags:
+      - 'ecu-test-diff-[0-9]+.[0-9]+.[0-9]+'
+  release:
+    types: [published]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  version-check:
+    runs-on: ubuntu-latest
+    if: |
+      startsWith(github.ref, 'refs/tags/ecu-test-diff-') ||
+      github.event_name == 'release'
+    outputs:
+      proceed: ${{ steps.version-check.outputs.proceed }}
+    steps:
+      - uses: actions/checkout@v4
+      - name: Check tag matches manifest version
+        id: version-check
+        run: |
+          sudo apt-get update -y
+          sudo apt-get install -y jq
+
+          # Tag ref of release refs/tags/<tag_name> as well
+          TAG_VERSION="${GITHUB_REF#refs/tags/ecu-test-diff-}"
+          MANIFEST_VERSION=$(jq -r '.version' static/manifest.json)
+          echo "Tag version: $TAG_VERSION"
+          echo "Manifest version: $MANIFEST_VERSION"
+
+          if [ "$TAG_VERSION" != "$MANIFEST_VERSION" ]; then
+            echo "❌ Tag version ($TAG_VERSION) does not match manifest version ($MANIFEST_VERSION)."
+            echo "proceed=false" >> $GITHUB_OUTPUT
+            exit 1
+          elif [[ "{{ github.event_name }}" == "release" ]]; then
+            ]]
+          fi
+
+          echo "✅ Tag version matches manifest version."
+          echo "proceed=true" >> $GITHUB_OUTPUT
+
+  build:
+    needs: version-check
+    if: needs.version-check.outputs.proceed == 'true'
+    uses: ./.github/workflows/build.yml
+
+  publish:
+    needs: [version-check, build]
+    if: ${{ github.env.DEPLOYMENT == 'True' }}
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        browser: ['chrome'] # After supporting multiple browsers, this will be changed to ["chrome", "firefox"]
+    steps:
+      - name: Get artifact from build job
+        uses: actions/download-artifact@v4
+        with:
+          name: ${{ matrix.browser }}-extension
+      - name: Publish to Firefox Add-on
+        if: ${{ matrix.browser == 'firefox' }}
+        run: echo "Publishing to Firefox Add-on is not implemented yet."
+      - name: Publish to Chrome Web Store
+        if: ${{ matrix.browser == 'chrome' }}
+        uses: mnao305/[email protected]
+        with:
+          file-path: ${{ matrix.browser }}-extension.zip
+          extension-id: ${{ secrets.EXTENSION_ID }}
+          client-id: ${{ secrets.CLIENT_ID }}
+          client-secret: ${{ secrets.CLIENT_SECRET }}
+          refresh-token: ${{ secrets.REFRESH_TOKEN }} # or "trustedTesters" for internal testing

README.md

@@ -50,28 +50,39 @@ Use the extention in development mode (this mode is probably forbidden via compa
 
 **Chrome/Edge**
 
-    1. Download the relevant .crx file from releases.
-    2. Go to `chrome://extensions/`
-    3. Enable development mode
-    4. Drag .crx into the window (if it is not working, reload window once)
+    1. Click extension icon in the top right corner or Go to "https://chromewebstore.google.com/" and continue with step 4
+    2. Click on the "Manage extensions" button
+    3. Click on "Chrome Web Store"
+    4. Search for "Open with ecu.test diff" and select the found extension
+    5. Click on "Add to Chrome"
 
 You are good to go! You can also pin the extension to the toolbar for easy access.
 
 ### Usage
 
-- Open a commit or merge request on your SCM platform. Open the extention popup dialog.
-- Select the correct platform type and add the host.
-- Go to the options. E.g., via click on the cog wheel icon.
-- Now enter you API token. Don't give the token all permissions! Only reading repository and API access. So create fine-grained tokens!
+- Open a commit or merge request on your SCM platform. Open the extension popup dialog
+- Select the correct platform type and add the host
+- Go to the options e.g., via click on the cog-wheel icon
+- Now enter your API token
+  - ⚠️Don't give the token all permissions⚠️
+  - Only reading repository and API access
+  - fine-grained tokens are recommended
+
+<img src="./docs/images/chrome/configuration.png" alt="Configuration" width="800"/>
+
 - Save the settings
-- Go back to the commit page and open the popup again.
-- The supported files of the changes will be listed.
-- Click on a file and click on "Show diff".
-- ecu.test Diff-Viewer will be opened. This needs ecu.test installed and a valid license available!
+- Go back to the commit page and open the popup again
+- The supported files of the changes will be listed
+
+<img src="./docs/images/chrome/dialog.png" alt="Configuration" width="600"/>
+
+- Click on a file and click on "Show diff"
+- ecu.test Diff-Viewer will be opened
+  - ⚠️This needs ecu.test installed and a valid license available⚠️
 
 ### Documentation
 
-A detailed documentation on features, build and development setup can be found inside [docs folder](docs\DeveloperGuide.md).
+A detailed documentation on features, build and development setup can be found inside [docs folder](./docs/DeveloperGuide.md).
 
 ### Contribution
 

docs/DeveloperGuide.md

@@ -8,6 +8,7 @@
 - [Development Setup](#development-setup)
   - [Install dependencies](#install-dependencies)
 - [Build process](#build-process)
+- [Integration](#integration)
 - [Testing / Linting / Code formatting](#testing--linting--code-formatting)
   - [Prettier](#prettier)
   - [Linting](#linting)
@@ -20,22 +21,26 @@
 
 ## Description
 
-Please have a look at section 'Description' inside [README.md](..\README.md#description).
+Please have a look at section 'Description' inside [README.md](../README.md#description).
+
 
 ## Features
 
-Please have a look at section 'Features' inside [README.md](..\README.md#features).
+Please have a look at section 'Features' inside [README.md](../README.md#features).
+
 
 ## Fork information
 
 This project is based on the boilerplate [Chrome Extension Webpack](https://github.com/sszczep/chrome-extension-webpack) from Sebastian Szczepański.
 
+
 ## Prerequisites
 
 ### Install node.js
 
 First you have to install [node.js](https://nodejs.org/en/download) to have access to the package manager npm for building the browser extension.
 
+
 ## Development Setup
 
 ### Install dependencies
@@ -63,14 +68,16 @@ npm run build-firefox
 npm run start-chrome
 npm run build-chrome
 ```
+Your compiles files are available inside the `./dist` folder after the build process.
+  **<u>Note:</u>** Since the build folder is `./dist`, only the last build execution is present.
 
-Your compiles files are available inside the './dist' folder after the build process.
-For integration and testing into you browser you have to note some differences:
+## Integration
 
-In Chrome/Edge you can just select the './dist' folder inside you browser windows for importing the extension.
+For integration and testing into you browser you have to note some differences:
 
-In Firefox you can test the extension only in debug-mode. You have to klick on 'debug add-ons' and can afterwards select a .zip file for the import. You can create the .zip file on your own or use the tool web-ext (from mozilla).
+In **Chrome/Edge** you can just select the `./dist` folder inside you browser windows for importing the extension.
 
+In **Firefox** you can test the extension only in debug-mode. You have to klick on 'debug add-ons' and can afterwards select a .zip file for the import. You can create the .zip file on your own or use the tool web-ext (from mozilla). 
 ```
 npm install web-ext
 cd ./dist
@@ -111,18 +118,28 @@ npm run test
 
 All CI workflows are located in `.github/workflows`
 
-| name | on
-| output | artifacts |
-| :-------------------------------------- | :---------------------------------------------------------------- | :---------- | :----------------------- |
-| [build](../.github/workflows/build.yml) | <ul><li>push and pr to `main`</li><li>workflow dispatch</li></ul> | - | chrome and firefox build |
-| [test](../.github/workflows/test.yml) | reused by [build](../.github/workflows/build.yml) workflow | test result | - |
-| [reuse](../.github/workflows/reuse.yml) | <ul><li>push and pr to `main`</li><li>workflow dispatch</li></ul> | spdx sbom | sbom.spdx |
-
-Those workflows are running automatically after pushing some changes to the remote repository. The
-build workflow provides its artifacts additionally after each execution.
+| name                                      | on                                                                                                                                       | output      | artifacts                |
+| :---------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :----------------------- |
+| [deploy](../.github/workflows/deploy.yml) | <ul><li>tag</li><li>release published</li></ul>                                                                                          | -           | -                        |
+| [build](../.github/workflows/build.yml)   | <ul><li>push and pr to `main`</li><li>workflow dispatch</li><li>reused by [deploy](../.github/workflows/deploy.yml) workflow  </li></ul> | -           | chrome and firefox build |
+| [test](../.github/workflows/test.yml)     | reused by [build](../.github/workflows/build.yml) workflow                                                                               | test result | -                        |
+| [reuse](../.github/workflows/reuse.yml)   | <ul><li>push and pr to `main`</li><li>workflow dispatch</li></ul>                                                                        | spdx sbom   | sbom.spdx                |
+
+Those workflows are running automatically after having some changes to the remote repository. 
+* `build` 
+  * provides its artifacts additionally after each execution
+    * firefox
+    * chrome
+* `deploy`
+  * Chrome
+    * a Google Chrome developer account is required
+    * any secrets that are neccessary for the publish process are set as `Actions secret`
+    * any additional information, see [Publish in the Chrome Web Store](https://developer.chrome.com/docs/webstore/publish)
+    * after publishing the application, a review is mostly outstanding and has to be publish
+      manually afterwards
+    * to automatically publish an application after the review, check "Publish '<application name>'
+      automatically after it has passed review" when submitting to review
 
-- firefox
-- chrome
 
 ## Open-Source Software compliance
 

static/manifest.json

@@ -1,8 +1,8 @@
 {
   "manifest_version": 3,
   "name": "Open with ecu.test diff",
-  "description": "Extension to open the ecu.test/trace.check diff viewer from Github.",
-  "version": "0.1.0",
+  "description": "Extension to open the ecu.test/trace.check diff viewer on GitHub/GitLab.",
+  "version": "0.2.0",
   "background": {},
   "permissions": ["storage", "activeTab", "downloads"],
   "options_ui": {