Publish extension to web store

Author: smikhalevski

.github/workflows/publish.yml

@@ -23,9 +23,14 @@ jobs:
 
       - uses: actions/upload-artifact@v4
         with:
-          name: react-executor-devtools-${{ github.ref_name }}
+          name: build-${{ github.ref_name }}
           path: build
 
+      - name: Publish extension
+        run:
+          zip -r build build
+          npx --yes chrome-webstore-upload-cli@3.1.0 upload --auto-publish --source build.zip
+
       - name: Create release draft
         run: gh release create ${{ github.ref_name }} --generate-notes --draft
         env:

README.md

@@ -2,18 +2,34 @@
 
 Devtools browser extension for [React Executor](https://github.com/smikhalevski/react-executor).
 
-Install the extension from the Chrome Web Store and try it live with
+[Install the extension](https://chromewebstore.google.com/detail/react-executor-devtools/achlflelpafnlpepfpfhildkahbfhgjc)
+from the Chrome Web Store and try it live with
 [the example project](https://codesandbox.io/p/sandbox/react-executor-example-ltflgy?file=%2Fsrc%2FTodoListApp.tsx).
 
 <br/>
 
 <p align="center">
-<img alt="React Executor Devtools Screenshot" src="./assets/screenshot.png"/>
+<img alt="React Executor Devtools Screenshot" src="./assets/screenshot.png" width="640"/>
 </p>
 
-## Running this extension
+## Running the extension locally
+
+To build the extension locally and add it to the browser: 
 
 1. Clone this repository.
-2. Load this directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked).
-3. Navigate to a webpage and open the devtools window.
-4. Navigate to the new devtools panel named "Executors".
+2. Install dependencies and build sources: 
+
+```shell
+npm ci
+npm run build
+```
+
+3. Load the created `./build` directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked).
+4. Navigate to a webpage and open the devtools window.
+5. Navigate to the new devtools panel named "Executors".
+
+For development purposes, you can start the extension as a standalone app that uses a mocked data:
+
+```shell
+npm start
+```

assets/screenshot.png

@@ -7,14 +7,18 @@
   "module": "./index.mjs",
   "types": "./index.d.ts",
   "sideEffects": false,
+  "config": {
+    "manifest": "./src/main/static/manifest.json"
+  },
   "scripts": {
     "build": "npm run build:icons && npm run build:panel && npm run build:devtools",
     "build:icons": "svgr src/main/app/icons",
     "build:panel": "vite build",
     "build:devtools": "cp -R src/main/static/ build/ && cp LICENSE.txt build/ && rollup --config",
     "start": "vite",
     "clean": "rimraf src/main/app/gen build coverage",
-    "test": "jest"
+    "test": "jest",
+    "prepare-release": "prepare_release() { version=$(npm --no-git-tag-version version \"$@\") && node -e \"var manifest=require('$npm_package_config_manifest'); manifest.version='${version:1}'; require('fs').writeFileSync('$npm_package_config_manifest',JSON.stringify(manifest,null,2))\" && git add . && git commit -m ${version:1} && git tag $version; }; prepare_release"
   },
   "repository": {
     "type": "git",

package.json

@@ -40,4 +40,4 @@
       "world": "MAIN"
     }
   ]
-}
+}