diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index a0d69d5..6086920 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -46,7 +46,24 @@ jobs: run: npm ci - name: Build extension for ${{ matrix.browser }} - run: npm run build-${{ matrix.browser }} + run: npm run build:${{ matrix.browser }} + + - name: Validate build result + if: ${{ matrix.browser == 'firefox' }} + run: | + npm install -g web-ext + + # lint the extension before signing + web-ext lint \ + --source-dir="./dist" \ + --output=json \ + --pretty \ + --warnings-as-errors + LINT_EXIT_CODE=$? + if [ $LINT_EXIT_CODE -ne 0 ]; then + echo "::error::Linting failed with exit code $LINT_EXIT_CODE. Build validation for Firefox failed." + exit 1 + fi - name: Upload extension zip uses: actions/upload-artifact@v4 diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index a581819..d6dac81 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -1,22 +1,46 @@ name: Deploy Browser Extension on: + workflow_dispatch: + inputs: + browser: + description: Browser platform to build for as an array (e.g., '["chrome"]", '["firefox", "chrome"]') + required: false + default: '["chrome", "firefox"]' + type: string + tag: + description: Tag to deploy (e.g., "ecu-test-diff-1.0.0") + required: true + type: string 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: + setup: + runs-on: ubuntu-latest + outputs: + tag-version: ${{ steps.set-tag.outputs.tag-version }} + steps: + - name: Set tag + id: set-tag + run: | + # determine if the workflow was triggered by a dispatch event or a tag push, and set the tag version accordingly + if [ "${{ github.event_name }}" == "workflow_dispatch" ]; then + TAG_VERSION="${{ github.event.inputs.tag }}" + # validate tag version + if [[ ! $TAG_VERSION =~ ^ecu-test-diff-[0-9]+\.[0-9]+\.[0-9]+$ ]]; then + echo "❌ Invalid tag version format. Expected format: ecu-test-diff-x.y.z" + exit 1 + fi + echo "tag-version=$TAG_VERSION" >> $GITHUB_OUTPUT + else + TAG_VERSION="${GITHUB_REF#refs/tags/}" + echo "tag-version=$TAG_VERSION" >> $GITHUB_OUTPUT + fi version-check: + needs: set-tag 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: @@ -27,18 +51,17 @@ jobs: sudo apt-get update -y sudo apt-get install -y jq - # Tag ref of release refs/tags/ as well - TAG_VERSION="${GITHUB_REF#refs/tags/ecu-test-diff-}" + TAG_VERSION="${{ needs.setup.outputs.tag-version }}" MANIFEST_VERSION=$(jq -r '.version' static/manifest.json) echo "Tag version: $TAG_VERSION" echo "Manifest version: $MANIFEST_VERSION" - + + # extract the version from the tag + TAG_VERSION=${TAG_VERSION#ecu-test-diff-} 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." @@ -48,22 +71,46 @@ jobs: needs: version-check if: needs.version-check.outputs.proceed == 'true' uses: ./.github/workflows/build.yml + with: + browser: ${{ fromJSON(github.event.inputs.browser || '["chrome", "firefox"]') }} 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"] + browser: ${{ fromJSON(github.event.inputs.browser || '["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 + - name: Set up Node v20 + if: ${{ matrix.browser == 'firefox' }} + uses: actions/setup-node@v4 + with: + node-version: 20 + cache: 'npm' + cache-dependency-path: 'package-lock.json' + - name: Install web-ext + if: matrix.browser == 'firefox' + run: npm install -g web-ext + - name: Publish as Firefox add-on if: ${{ matrix.browser == 'firefox' }} - run: echo "Publishing to Firefox Add-on is not implemented yet." + env: + AMO_JWT_ISSUER: ${{ secrets.AMO_JWT_ISSUER }} + AMO_JWT_SECRET: ${{ secrets.AMO_JWT_SECRET }} + run: | + # extract artifact + mkdir -p "./${{ matrix.browser }}-extension" + unzip -o "${{ matrix.browser }}-extension.zip" -d "./${{ matrix.browser }}-extension" + + # sign the extension + web-ext sign \ + --api-key="$AMO_JWT_ISSUER" \ + --api-secret="$AMO_JWT_SECRET" \ + --channel=listed \ + --source-dir="./${{ matrix.browser }}-extension" - name: Publish to Chrome Web Store if: ${{ matrix.browser == 'chrome' }} uses: mnao305/chrome-extension-upload@v5.0.0 diff --git a/README.md b/README.md index 09214e4..bd60244 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ - [Description](#description) - [Features](#features) - [Getting started](#getting-started) - - [Installing and running](#installing-and-running) + - [Installation](#installation) - [Usage](#usage) - [Documentation](#documentation) - [Contribution](#contribution) @@ -12,9 +12,11 @@ ## Description -Browser plugin to open the diff viewer of tracetronic products ecu.test and trace.check from browser. +Browser extension to open the diff viewer of tracetronic products ecu.test and trace.check from browser. -ecu.test Diff Extension is a bridge between the current browser tab and an installed ecu.test. It allows you to diff packages (`.pkg`) and other artifacts from an open commit or merge request with only a few simple clicks. +Ecu.test Diff Extension is a bridge between the current browser tab and an installed ecu.test. +It allows you to diff packages (`.pkg`) +and other artifacts from an open commit or merge request with only a few simple clicks. ## Features @@ -36,17 +38,18 @@ Detected file extensions ## Getting started -### Installing and running +### Installation -TODO: The extention is not yet released on chrome or firefox app stores! - -Use the extention in development mode (this mode is probably forbidden via company IT rules!): +To install the extension, use the specific installation method for your browser. **Firefox** - 1. Download the relevant .xpi file from releases. - 2. Go to `about:debugging#/runtime/this-firefox` - 3. Click on load temporary addon select the .xpi file. + 1. Click extension icon in the top right corner or Go to "https://addons.mozilla.org" and continue with step 3 + 2. Click on the "Manage extensions" button + 3. Click on "Find more add-ons" and type "Open with ecu.test diff" + 4. Click on the "Add to Firefox" button + 5. Click on "Add" in the pop-up dialog + 6. Click on "OK" in the pop-up dialog (if needed) **Chrome/Edge** @@ -64,17 +67,17 @@ You are good to go! You can also pin the extension to the toolbar for easy acces - 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⚠️ + - ⚠️Don not give the token all permissions⚠️ - Only reading repository and API access - fine-grained tokens are recommended -Configuration +Configuration - Save the settings - Go back to the commit page and open the popup again - The supported files of the changes will be listed -Configuration +Configuration - Click on a file and click on "Show diff" - ecu.test Diff-Viewer will be opened @@ -82,12 +85,13 @@ You are good to go! You can also pin the extension to the toolbar for easy acces ### Documentation -A detailed documentation on features, build and development setup can be found inside [docs folder](./docs/DeveloperGuide.md). +For detailed documentation on features, build and development setup, see the [DeveloperGuide](./docs/DeveloperGuide.md). ### Contribution At the moment, no external contributions are intended and merge requests from forks will automatically be rejected! -To report a bug or request an enhancement to this plugin please raise a new [GitHub issue](https://github.com/tracetronic/ecu.test-diff/issues). +To report a bug or request an enhancement to this extension, +please raise a new [GitHub issue](https://github.com/tracetronic/ecu.test-diff/issues). ### Support @@ -101,7 +105,7 @@ This project uses the [Red Hat Display Text Font](https://github.com/RedHatOffic This project uses the [Material Symbols Outlined Font](https://fonts.google.com/icons) with is licensed under Apache License Version 2.0 (see [Apache-2.0.txt](./LICENSES/Apache-2.0.txt)) -To generate a software bill of material (sbom) we recommend using the [cyclondx](https://github.com/CycloneDX/cyclonedx-node-npm) tool: +To generate a software bill of material (sbom), we recommend using the [CycloneDX](https://github.com/CycloneDX/cyclonedx-node-npm) tool: ```bash #skip if you have cyclonedx already installed globally diff --git a/REUSE.toml b/REUSE.toml index e02e562..f7e2352 100644 --- a/REUSE.toml +++ b/REUSE.toml @@ -1,5 +1,5 @@ version = 1 -SPDX-PackageName = "ecu.test diff plugin" +SPDX-PackageName = "ecu.test diff extension" SPDX-PackageSupplier = "2025 tracetronic GmbH " SPDX-PackageDownloadLocation = "https://github.com/tracetronic/ecu.test-diff" diff --git a/docs/DeveloperGuide.md b/docs/DeveloperGuide.md index 7ee4757..6146af9 100644 --- a/docs/DeveloperGuide.md +++ b/docs/DeveloperGuide.md @@ -23,23 +23,19 @@ 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). - ## 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. - +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 @@ -51,56 +47,69 @@ Open the ecu.test diff project in your IDE of choice and run the following termi ## Build process -If you want to build the ecu.test diff extension locally for development purpose or for production use, you have access to different scripts: +If you want to build the ecu.test diff extension locally for development purposes or for production use, you have access to different scripts: **Note:** All of these scripts can be found and modified within the './package.json' of the project. **Firefox:** ``` -npm run start-firefox -npm run build-firefox +npm run start:firefox +npm run build:firefox ``` **Chrome/Edge:** ``` -npm run start-chrome -npm run build-chrome +npm run start:chrome +npm run build:chrome ``` -Your compiles files are available inside the `./dist` folder after the build process. - **Note:** Since the build folder is `./dist`, only the last build execution is present. + +Your compiled files are available inside the `./dist` folder after the build process. +**Note:** Since the build folder is `./dist`, only the last build execution is present. ## Integration -For integration and testing into you browser you have to note some differences: +For integration and testing into your browser, you have to note some differences: -In **Chrome/Edge** you can just select the `./dist` folder inside you browser windows for importing the extension. +In **Chrome/Edge** you can 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 afterward 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 **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 web-ext build ``` -This tooling also provide a help in the ['signing' process](https://extensionworkshop.com/documentation/develop/extensions-and-the-add-on-id/) which is required for the use of add-ons without debug-mode in firefox. +This tooling also provides help in the [signing process](https://extensionworkshop.com/documentation/develop/extensions-and-the-add-on-id/) +which is required for the use of add-ons without a debug-mode in firefox. ## Testing / Linting / Code formatting -For these purposes there are three additional scripts which execute the local tests, start the linter in the source code and do some code formatting: +For these purposes, there are three additional scripts that execute the local tests, start the linter in the source code and do some code formatting: ### Prettier Prettier is a code formatter that enforces a consistent style by parsing your code and re-printing it. +Select the files you want to format and run the following command: ```bash -npm run prettier +# check all files +npm prettier:check + +# fix findings for all files +npm run prettier:write . + +# fix finding for specific files +npm run prettier:write ./ ``` ### Linting -Use the internal npm linter with the follwing command: +Use the internal npm linter with the following command: ```bash npm run lint @@ -108,7 +117,8 @@ npm run lint ### Testing -Your definded tests can be run with the command blow. The command runs all tests definded in the root 'test' folder and generates a coverage report. +Your defined tests can be run with the command blow. +The command runs all tests defined in the root 'test' folder and generates a coverage report. ```bash npm run test @@ -118,34 +128,36 @@ npm run test All CI workflows are located in `.github/workflows` -| name | on | output | artifacts | -| :---------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :----------------------- | -| [deploy](../.github/workflows/deploy.yml) |
  • tag
  • release published
| - | - | -| [build](../.github/workflows/build.yml) |
  • push and pr to `main`
  • workflow dispatch
  • reused by [deploy](../.github/workflows/deploy.yml) workflow
| - | chrome and firefox build | -| [test](../.github/workflows/test.yml) | reused by [build](../.github/workflows/build.yml) workflow | test result | - | -| [reuse](../.github/workflows/reuse.yml) |
  • push and pr to `main`
  • workflow dispatch
| 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 '' +| name | on | output | artifacts | +| :---------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :----------------------- | +| [deploy](../.github/workflows/deploy.yml) | tag | - | - | +| [build](../.github/workflows/build.yml) |
  • push and pr to `main`
  • workflow dispatch
  • reused by [deploy](../.github/workflows/deploy.yml) workflow
| - | chrome and firefox build | +| [test](../.github/workflows/test.yml) | reused by [build](../.github/workflows/build.yml) workflow | test result | - | +| [reuse](../.github/workflows/reuse.yml) |
  • push and pr to `main`
  • workflow dispatch
| 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 necessary for the publication 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 published + manually afterward + - to automatically publish an application after the review, check "Publish '' automatically after it has passed review" when submitting to review - ## Open-Source Software compliance ### reuse -To ensure open-source complience with our provided software at tracetronic GmbH we use the tool [reuse](https://reuse.readthedocs.io/en/stable/readme.html). After installing the tooling in your local environment you can check for open-source compliance with: +To ensure open-source difference with our provided software at tracetronic GmbH, +we use the tool [reuse](https://reuse.readthedocs.io/en/stable/readme.html). +After installing the tooling in your local environment, you can check for open-source compliance with: `reuse lint` diff --git a/docs/images/firefox/addon_icon.png b/docs/images/firefox/addon_icon.png new file mode 100644 index 0000000..5689adf Binary files /dev/null and b/docs/images/firefox/addon_icon.png differ diff --git a/docs/images/firefox/configuration.png b/docs/images/firefox/configuration.png new file mode 100644 index 0000000..0279c4c Binary files /dev/null and b/docs/images/firefox/configuration.png differ diff --git a/docs/images/firefox/dialog.png b/docs/images/firefox/dialog.png new file mode 100644 index 0000000..f5465d2 Binary files /dev/null and b/docs/images/firefox/dialog.png differ diff --git a/docs/images/firefox/diff_viewer.png b/docs/images/firefox/diff_viewer.png new file mode 100644 index 0000000..a9056c6 Binary files /dev/null and b/docs/images/firefox/diff_viewer.png differ diff --git a/package.json b/package.json index 9e3d9f9..e78f708 100644 --- a/package.json +++ b/package.json @@ -1,14 +1,15 @@ { "name": "ecu.test_diff-extension", "version": "1.0.0", - "description": "Browser plugin to open the diff viewer of tracetronic products ecu.test and trace.check from browser", + "description": "Browser extension to open the diff viewer of tracetronic products ecu.test and trace.check from browser", "scripts": { - "start-chrome": "webpack --env TARGET=chrome --watch --config webpack.dev.cjs", - "start-firefox": "webpack --env TARGET=firefox --watch --config webpack.dev.cjs", - "build-chrome": "webpack --env TARGET=chrome --config webpack.prod.cjs", - "build-firefox": "webpack --env TARGET=firefox --config webpack.prod.cjs", + "start:chrome": "webpack --env TARGET=chrome --watch --config webpack.dev.cjs", + "start:firefox": "webpack --env TARGET=firefox --watch --config webpack.dev.cjs", + "build:chrome": "webpack --env TARGET=chrome --config webpack.prod.cjs", + "build:firefox": "webpack --env TARGET=firefox --config webpack.prod.cjs", "lint": "eslint --ext .ts,.js --max-warnings=0 .", - "prettier": "prettier --write", + "prettier:write": "prettier --write", + "prettier:check": "prettier --check .", "test": "c8 mocha --require ts-node/register ./test/setup.ts ./test/**/*.ts" }, "type": "module", diff --git a/static/manifest.json b/static/manifest.json index c3c4b0f..372fd02 100644 --- a/static/manifest.json +++ b/static/manifest.json @@ -4,6 +4,11 @@ "description": "Extension to open the ecu.test/trace.check diff viewer on GitHub/GitLab.", "version": "0.2.0", "background": {}, + "browser_specific_settings": { + "gecko": { + "id": "open-with-ecu-test-diff@tracetronic.com" + } + }, "permissions": ["storage", "activeTab", "downloads"], "options_ui": { "page": "options.html", diff --git a/static/popup.html b/static/popup.html index 14299fc..83a14f9 100644 --- a/static/popup.html +++ b/static/popup.html @@ -28,7 +28,7 @@