Update for MV3

.github/workflows/build-test.yml

@@ -0,0 +1,116 @@
+name: Build And Test Extensions
+
+on:
+    push:
+        branches: 
+          - 'develop'
+          - 'hotfix/**'
+          - 'feature/**'
+    pull_request:
+        branches: [develop]
+    workflow_dispatch:
+        inputs:
+          debug:
+            description: 'Enable debug logging'
+            required: false
+            default: 'false'
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+        strategy:
+            fail-fast: false
+            matrix:
+              browser: [chrome, edge, chromium]
+        steps:
+            - uses: actions/checkout@v4
+            - uses: pnpm/action-setup@v2
+              with:
+                version: 8
+            - name: Setup Node.js
+              uses: actions/[email protected]
+              with:
+                  node-version: 20
+                  cache: 'pnpm'
+            - name: Install dependencies
+              run: pnpm install
+            - name: Build And Package Extensions
+              run: pnpm build --zip --target=${{ matrix.browser }}-mv3
+            # upload to github artifacts for each browser with matrix
+            - name: Upload to GitHub Artifacts
+              uses: actions/upload-artifact@v4
+              with:
+                  name: ${{ matrix.browser }}-mv3
+                  path: build/
+    test:
+      runs-on: ubuntu-latest
+      needs: build
+      strategy:
+          fail-fast: false
+          matrix:
+              browser: [chrome, edge, chromium]
+              theme: ['', '-theme']
+      steps:
+          - uses: actions/checkout@v4
+          - name: Download artifacts
+            uses: actions/download-artifact@v4
+            id: download
+            with:
+                name: ${{ matrix.browser }}-mv3
+                path: build/
+          - name: Unzip artifacts
+            run: unzip build/${{ matrix.browser }}-mv3-prod.zip -d build/extension
+          - uses: pnpm/action-setup@v2
+            with:
+                version: 8
+          - name: Setup Node.js
+            uses: actions/[email protected]
+            with:
+                node-version: 20
+                cache: 'pnpm'
+          - name: Install dependencies
+            run: pnpm install --frozen-lockfile
+          - name: Install Playwright Browsers
+            run: pnpm exec playwright install --with-deps
+          - name: Setup Project
+            id: project
+            run: |
+              # set output variable
+              echo "project=${{ matrix.browser }}${{ matrix.theme}}" >> $GITHUB_OUTPUT
+          - name: Test
+            id: test
+            run: |
+              if [ "${{ inputs.debug }}" == "true" ]; then
+                echo "Enabled Debug Mode"
+                export DEBUG="pw:api"
+              fi
+              pnpm test -- --project=${{ steps.project.outputs.project }}
+          - name: Upload Test Results
+            if: always()
+            uses: actions/upload-artifact@v4
+            with:
+                name: ${{ steps.project.outputs.project }}-test-results
+                path: |
+                  test-results/
+                  playwright-report/
+                if-no-files-found: ignore
+          - name: Upload Results To R2
+            if: ${{ failure() && steps.test.conclusion == 'failure' }}
+            uses: eric2788/r2-upload-action@master
+            id: upload
+            continue-on-error: true
+            with:
+              r2-account-id: ${{ secrets.R2_ACCOUNT_ID }}
+              r2-access-key-id: ${{ secrets.R2_ACCESS_KEY_ID }}
+              r2-secret-access-key: ${{ secrets.R2_SECRET_ACCESS_KEY }}
+              r2-bucket: ${{ secrets.R2_BUCKET }}
+              source-dir: ./playwright-report
+              destination-dir: ${{ github.event.repository.name }}/${{ github.run_number }}/${{ steps.project.outputs.project }}
+              output-file-url: 'true'
+              multipart-size: 100
+              max-retries: 5
+            env:
+              NODE_OPTIONS: '--max-old-space-size=6144'
+          - name: Print Report URL
+            if: failure() && steps.upload.outcome == 'success'
+            run: echo "::notice title=Report URL for ${{ steps.project.outputs.project }}::https://reports.ericlamm.xyz/${{ github.event.repository.name }}/${{ github.run_number }}/${{ steps.project.outputs.project }}/"

.gitignore

@@ -5,6 +5,7 @@
 /node_modules
 /.pnp
 .pnp.js
+*.cache.json
 
 # testing
 /coverage
@@ -38,4 +39,8 @@ keys.json
 # PNPM related files and directories
 .pnpm
 .pnp.cjs
-.store
+.store
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

package.json

@@ -1,7 +1,7 @@
 {
   "name": "bilibili-vup-stream-enhancer",
   "displayName": "Bilibili Vup Stream Enhancer",
-  "version": "2.0",
+  "version": "2.0.0",
   "description": "管人观众专用直播增强扩展",
   "author": "Eric Lam <[email protected]>",
   "license": "MIT",
@@ -10,46 +10,52 @@
     "dev:opera": "pnpm dev --target=opera-mv3",
     "build": "plasmo build --no-minify",
     "package": "plasmo package",
-    "clean": "rm -rf build && rm -rf .plasmo"
+    "clean": "rm -rf build && rm -rf .plasmo",
+    "test": "playwright test",
+    "test:prepare": "mv build/chrome-mv3-prod build/extension"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.3",
+    "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
-    "@material-tailwind/react": "^2.1.8",
-    "@plasmohq/messaging": "^0.6.1",
-    "@plasmohq/storage": "^1.9.0",
+    "@material-tailwind/react": "^2.1.9",
+    "@plasmohq/messaging": "^0.6.2",
+    "@plasmohq/storage": "^1.9.3",
     "@react-hooks-library/core": "^0.5.2",
-    "autoprefixer": "^10.4.16",
+    "autoprefixer": "^10.4.17",
     "brotli": "^1.3.3",
-    "dexie": "^3.2.4",
+    "dexie": "^3.2.5",
     "dexie-react-hooks": "^1.1.7",
     "hash-wasm": "^4.11.0",
-    "hls.js": "^1.5.1",
-    "media-chrome": "^2.0.1",
+    "hls.js": "^1.5.7",
+    "media-chrome": "^2.2.5",
     "mpegts.js": "^1.7.3",
     "n-danmaku": "^2.2.1",
-    "plasmo": "0.84.0",
+    "plasmo": "^0.84.2",
     "react": "18.2.0",
     "react-contexify": "^6.0.0",
     "react-dom": "18.2.0",
+    "react-joyride": "^2.7.4",
     "react-rnd": "^10.4.1",
     "react-state-proxy": "^1.4.11",
-    "sonner": "^1.3.1",
-    "tailwindcss": "3.3.5",
+    "sonner": "^1.4.2",
+    "tailwindcss": "^3.4.1",
     "virtual-scroller": "^1.12.4"
   },
   "devDependencies": {
-    "@ianvs/prettier-plugin-sort-imports": "4.1.1",
+    "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
+    "@playwright/test": "^1.42.0",
     "@types/brotli": "^1.3.4",
     "@types/chrome": "^0.0.254",
     "@types/glob": "^8.1.0",
-    "@types/node": "20.9.0",
+    "@types/node": "20.11.23",
     "@types/react": "18.2.37",
     "@types/react-dom": "18.2.15",
-    "@types/semver": "^7.5.6",
-    "postcss": "8.4.31",
-    "prettier": "3.0.3",
-    "typescript": "5.2.2"
+    "@types/semver": "^7.5.8",
+    "dotenv": "^16.4.5",
+    "glob": "^10.3.10",
+    "postcss": "^8.4.35",
+    "prettier": "^3.2.5",
+    "typescript": "^5.3.3"
   },
   "manifest": {
     "host_permissions": [

playwright.config.ts

@@ -0,0 +1,101 @@
+import { defineConfig, devices } from '@playwright/test';
+import type { GlobalOptions } from '@tests/options';
+import { envBool, envInt } from '@tests/utils/misc';
+import dotenv from 'dotenv';
+
+dotenv.config({ path: '.env.local' })
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig<GlobalOptions>({
+  timeout: 120000,
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  maxFailures: process.env.CI ? 15 : undefined,
+  /* Retry on CI only */
+  retries: process.env.CI ? 5 : 0,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: process.env.CI ? [
+    ['github'],
+    ['list', { printSteps: true }],
+    ['html', { open: 'never' }]
+  ] : [['list', { printSteps: true }]],
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-all-retries',
+    screenshot: 'on',
+    video: {
+      mode: 'retain-on-failure',
+      size: { width: 640, height: 480 }
+    }
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'theme-setup',
+      testMatch: /theme.setup\.ts/,
+      timeout: 0,
+      use: {
+        isThemeRoom: true,
+      }
+    },
+    {
+      name: 'edge',
+      use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    },
+    {
+      name: 'chrome',
+      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    },
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'edge-theme',
+      dependencies: ['theme-setup'],
+      use: { ...devices['Desktop Edge'], channel: 'msedge', isThemeRoom: true },
+    },
+    {
+      name: 'chrome-theme',
+      dependencies: ['theme-setup'],
+      use: { ...devices['Desktop Chrome'], channel: 'chrome', isThemeRoom: true },
+    },
+    {
+      name: 'chromium-theme',
+      dependencies: ['theme-setup'],
+      use: { ...devices['Desktop Chrome'], isThemeRoom: true },
+    },
+    {
+      name: 'local',
+      use: {
+        ...devices['Desktop Chrome'], channel: 'chrome',
+        roomId: envInt('ROOM_ID'),
+        isThemeRoom: envBool('IS_THEME_ROOM'),
+        maxPage: envInt('MAX_PAGE'),
+      }
+    }
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});