feat(chrome-devtool): migrate to Manifest V3 with Plasmo framework

.eslintignore

@@ -13,4 +13,5 @@ packages/element
 esm
 doc-site
 public
-package
+package
+assets

.github/workflows/release-devtools.yml

@@ -0,0 +1,62 @@
+name: Release Devtools
+on:
+  workflow_dispatch:
+    inputs:
+      remote_debug:
+        description: 'Enable remote debug session?'
+        type: boolean
+        required: false
+        default: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    env:
+      DEVTOOLS_ZIP_PATH: devtools/chrome-extension/build/chrome-mv3-prod.zip
+      DEVTOOLS_ARTIFACT_NAME: formily-devtools
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Start debug session (when enabled)
+        if: ${{ inputs.remote_debug }}
+        uses: lhotari/action-upterm@v1
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+          cache: yarn
+
+      - name: Verify environment
+        run: |
+          node --version
+          yarn -v
+
+      - name: Maintain debug session (when enabled)
+        run: |
+          sleep 3600
+        if: ${{ inputs.remote_debug }}
+
+      - name: Install dependencies
+        run: |
+          yarn install --ignore-engines
+
+      - name: Build packages
+        run: |
+          yarn build
+        env:
+          # avoid core dump, see: https://github.com/parcel-bundler/parcel/issues/10081
+          PARCEL_WORKER_BACKEND: process
+
+      - name: Validate artifact
+        run: test -f ${{ env.DEVTOOLS_ZIP_PATH }}
+
+      - name: Upload Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: ${{ env.DEVTOOLS_ARTIFACT_NAME }}
+          path: ${{ env.DEVTOOLS_ZIP_PATH }}

devtools/chrome-extension/.gitignore

@@ -0,0 +1,36 @@
+
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+out/
+build/
+dist/
+
+# plasmo
+.plasmo
+
+# typescript
+.tsbuildinfo
+
+# backend.js is generated from src/webAccessible/backend.ts
+assets/backend.js

devtools/chrome-extension/.prettierrc.mjs

@@ -0,0 +1,26 @@
+/**
+ * @type {import('prettier').Options}
+ */
+export default {
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: false,
+  semi: false,
+  singleQuote: true,
+  trailingComma: 'all',
+  bracketSpacing: true,
+  bracketSameLine: true,
+  plugins: ['@ianvs/prettier-plugin-sort-imports'],
+  importOrder: [
+    '<BUILTIN_MODULES>', // Node.js built-in modules
+    '<THIRD_PARTY_MODULES>', // Imports not matched by other special words or groups.
+    '', // Empty line
+    '^@plasmo/(.*)$',
+    '',
+    '^@plasmohq/(.*)$',
+    '',
+    '^~(.*)$',
+    '',
+    '^[./]',
+  ],
+}

devtools/chrome-extension/README.md

@@ -0,0 +1,58 @@
+# Formily DevTools
+
+This is a [Plasmo extension](https://docs.plasmo.com/) project bootstrapped with [`plasmo init`](https://www.npmjs.com/package/plasmo).
+
+## 🚀 Getting Started
+
+### Development Setup
+
+1. **Install dependencies**:
+   ```bash
+   yarn install
+   ```
+
+2. **Start the development server**:
+   ```bash
+   yarn run dev
+   ```
+
+3. **Load the extension in your browser**:
+   • For Chrome (Manifest V3):
+     Navigate to `build/chrome-mv3-dev` using your browser's extension developer mode
+
+
+Open your browser and load the appropriate development build. For example, if you are developing for the chrome browser, using manifest v3, use: `build/chrome-mv3-dev`.
+
+You can start editing the popup by modifying `popup.tsx`. It should auto-update as you make changes. To add an options page, simply add a `options.tsx` file to the root of the project, with a react component default exported. Likewise to add a content page, add a `content.ts` file to the root of the project, importing some module and do some logic, then reload the extension on your browser.
+
+For further guidance, [visit our Documentation](https://docs.plasmo.com/)
+
+### 🔥 Hot Reload Notes
+
+**Special Case for webAccessibleResources/backend.ts**:
+```bash
+# After modifying webAccessibleResources/backend.ts
+# 1. Stop the dev server (Ctrl+C)
+# 2. Rerun the dev command to pick up changes:
+yarn run dev
+```
+
+This is due to Plasmo's limitations.
+
+## Making production build
+
+Run the following:
+
+```bash
+# Build the extension for production
+yarn run build
+
+# Package the extension into zip file for distribution
+yarn run package
+```
+
+This should create a production bundle for your extension, ready to be published to the stores.
+
+## Submit to the webstores
+
+The easiest way to deploy your Plasmo extension is to use the built-in [bpp](https://bpp.browser.market) GitHub action. Prior to using this action however, make sure to build your extension and upload the first version to the store to establish the basic credentials. Then, simply follow [this setup instruction](https://docs.plasmo.com/framework/workflows/submit) and you should be on your way for automated submission!