feat: add browser commands for manual extension testing

README.md

@@ -114,6 +114,26 @@ The development output is available under:
 
 -   `./packages/EdgeTranslate/dev/chrome/`
 
+Build the extension, watch for changes, and open it in a Playwright-managed Chromium browser:
+
+```shell
+pnpm dev:browser
+```
+
+The browser opens the project page automatically and stores its isolated profile under
+`./packages/EdgeTranslate/dev/browser-profiles/development/`. Run
+`pnpm --filter edge_translate e2e:install` first if the Playwright Chromium browser is not
+installed.
+
+To build the production output and open it without file watching:
+
+```shell
+pnpm preview:browser
+```
+
+The production preview uses a separate profile under
+`./packages/EdgeTranslate/dev/browser-profiles/production/`.
+
 ## Acknowledgement
 
 This project continues maintenance work based on the original open source project [Edge Translate](https://github.com/EdgeTranslate/EdgeTranslate). Thanks to the original authors and contributors for their work.

docs/README_CN.md

@@ -114,6 +114,25 @@ pnpm dev
 
 -   `./packages/EdgeTranslate/dev/chrome/`
 
+构建并监听扩展，同时使用 Playwright 管理的 Chromium 启动扩展：
+
+```shell
+pnpm dev:browser
+```
+
+浏览器会自动打开项目页面，并将独立的用户数据保存在
+`./packages/EdgeTranslate/dev/browser-profiles/development/`。如果尚未安装 Playwright
+Chromium，请先运行 `pnpm --filter edge_translate e2e:install`。
+
+如需构建并打开不带文件监听的生产版本：
+
+```shell
+pnpm preview:browser
+```
+
+生产预览使用独立的用户数据目录
+`./packages/EdgeTranslate/dev/browser-profiles/production/`。
+
 ## 致谢
 
 本项目基于原开源项目 [Edge Translate](https://github.com/EdgeTranslate/EdgeTranslate) 持续维护，感谢原作者与贡献者的工作。

docs/README_RU.md

@@ -114,6 +114,26 @@ pnpm dev
 
 -   `./packages/EdgeTranslate/dev/chrome/`
 
+Чтобы собрать расширение, отслеживать изменения и открыть его в Chromium под управлением
+Playwright, выполните:
+
+```shell
+pnpm dev:browser
+```
+
+Браузер автоматически откроет страницу проекта и сохранит изолированный профиль в каталоге
+`./packages/EdgeTranslate/dev/browser-profiles/development/`. Если Chromium для Playwright еще не
+установлен, сначала выполните `pnpm --filter edge_translate e2e:install`.
+
+Чтобы собрать и открыть production-версию без отслеживания файлов, выполните:
+
+```shell
+pnpm preview:browser
+```
+
+Для production-предпросмотра используется отдельный профиль в каталоге
+`./packages/EdgeTranslate/dev/browser-profiles/production/`.
+
 ## Благодарность
 
 Этот проект продолжает поддержку на основе исходного открытого проекта [Edge Translate](https://github.com/EdgeTranslate/EdgeTranslate). Спасибо оригинальным авторам и участникам за их работу.

docs/README_TW.md

@@ -114,6 +114,25 @@ pnpm dev
 
 -   `./packages/EdgeTranslate/dev/chrome/`
 
+建置並監聽擴充套件，同時使用 Playwright 管理的 Chromium 啟動擴充套件：
+
+```shell
+pnpm dev:browser
+```
+
+瀏覽器會自動開啟專案頁面，並將獨立的使用者資料儲存在
+`./packages/EdgeTranslate/dev/browser-profiles/development/`。如果尚未安裝 Playwright
+Chromium，請先執行 `pnpm --filter edge_translate e2e:install`。
+
+如需建置並開啟不帶檔案監聽的正式版本：
+
+```shell
+pnpm preview:browser
+```
+
+正式版預覽使用獨立的使用者資料目錄
+`./packages/EdgeTranslate/dev/browser-profiles/production/`。
+
 ## 致謝
 
 本專案基於原開源專案 [Edge Translate](https://github.com/EdgeTranslate/EdgeTranslate) 持續維護，感謝原作者與貢獻者的工作。

package.json

@@ -21,7 +21,9 @@
         "format:staged": "node scripts/format-staged-files.js",
         "lint:staged": "node scripts/lint-staged-files.js",
         "check:staged-eol": "node scripts/check-staged-eol.js",
-        "dev": "turbo run dev"
+        "dev": "turbo run dev",
+        "dev:browser": "pnpm --filter edge_translate run dev:browser",
+        "preview:browser": "pnpm --filter edge_translate run preview:browser"
     },
     "devDependencies": {
         "@commitlint/cli": "^13.2.1",

packages/EdgeTranslate/package.json

@@ -8,6 +8,8 @@
         "lint:fix": "pnpm lint --fix",
         "format": "node ../../scripts/run-eslint.js packages/EdgeTranslate \"src/**/*.js\" \"config/**/*.js\" --fix",
         "dev": "pnpm --dir ../translators dev:prepare && node ./scripts/build-extension.js dev --browser chrome",
+        "dev:browser": "pnpm --dir ../translators dev:prepare && node ./scripts/build-extension.js dev --browser chrome --launch-browser",
+        "preview:browser": "pnpm --dir ../translators build && node ./scripts/build-extension.js preview --browser chrome",
         "build": "node ./scripts/build-extension.js build --browser chrome",
         "package": "node -e \"console.log('\\npacking package for chrome')\" && node ./scripts/build-extension.js package --browser chrome",
         "e2e": "playwright test --config ./test/e2e/playwright.config.js --project=functional",

packages/EdgeTranslate/scripts/build-extension-tasks.js

@@ -20,9 +20,10 @@ const {
     toPosixPath,
 } = require("./build-extension-assets");
 const { watchAssets } = require("./build-extension-watch");
+const { createManualBrowserSession, runManualBrowser } = require("./manual-browser");
 
 function parseArgs(argv) {
-    const args = { browser: "chrome", command: argv[0] };
+    const args = { browser: "chrome", command: argv[0], launchBrowser: false };
 
     for (let index = 1; index < argv.length; index += 1) {
         const arg = argv[index];
@@ -32,14 +33,19 @@ function parseArgs(argv) {
             index += 1;
         } else if (arg.startsWith("--browser=")) {
             args.browser = arg.slice("--browser=".length) || args.browser;
+        } else if (arg === "--launch-browser") {
+            args.launchBrowser = true;
         }
     }
 
     return args;
 }
 
 function printUsage() {
-    console.error("Usage: node scripts/build-extension.js <build|dev|package> [--browser chrome]");
+    console.error(
+        "Usage: node scripts/build-extension.js <build|dev|preview|package> " +
+            "[--browser chrome] [--launch-browser]"
+    );
 }
 
 async function buildExtension({ browser }) {
@@ -50,13 +56,20 @@ async function buildExtension({ browser }) {
     patchGeneratedGlobalFallbacks(context);
 }
 
-async function devExtension({ browser }) {
+async function devExtension({ browser, launchBrowser }) {
     const context = createBuildContext("development", browser);
 
     cleanOutput(context);
     await runAssetBuild(context);
     await touchHotReloadStamp(context);
-    await runWebpackWatch(context);
+    await runWebpackWatch(context, { launchBrowser });
+}
+
+async function previewExtension({ browser }) {
+    await buildExtension({ browser });
+
+    const context = createBuildContext("production", browser);
+    await runManualBrowser(context.outputDir, context.environment);
 }
 
 async function packageExtension({ browser }) {
@@ -118,12 +131,26 @@ function runWebpack(context) {
     });
 }
 
-function runWebpackWatch(context) {
+function runWebpackWatch(context, { launchBrowser }) {
     const watcher = watchAssets(context);
+    const browserSession = createManualBrowserSession(
+        launchBrowser,
+        context.outputDir,
+        context.environment
+    );
     const compiler = webpack(createWebpackConfig(context));
-    const watching = compiler.watch({ aggregateTimeout: 300 }, logWebpackResult);
+    let shutdown;
+    const watching = compiler.watch({ aggregateTimeout: 300 }, (error, stats) => {
+        if (!logWebpackResult(error, stats)) return;
+
+        browserSession.start(
+            () => shutdown(),
+            (browserError) => handleBrowserLaunchError(browserError, shutdown)
+        );
+    });
 
-    bindShutdown(watcher, watching);
+    shutdown = createShutdown({ browserSession, watcher, watching });
+    bindShutdown(shutdown);
     return new Promise(() => {});
 }
 
@@ -140,8 +167,10 @@ function logWebpackResult(error, stats) {
     try {
         assertWebpackSuccess(error, stats);
         logWebpackStats(stats);
+        return true;
     } catch (buildError) {
         console.error(buildError.stack || buildError);
+        return false;
     }
 }
 
@@ -227,13 +256,38 @@ function closeCompiler(compiler) {
     });
 }
 
-function bindShutdown(watcher, watching) {
-    const shutdown = () => {
-        Promise.all([watcher.close(), closeWatching(watching)]).finally(() => process.exit());
+function handleBrowserLaunchError(error, shutdown) {
+    console.error(error.stack || error);
+    shutdown(1);
+}
+
+function createShutdown(resources) {
+    let shutdownPromise;
+
+    return (exitCode = 0) => {
+        if (!shutdownPromise) {
+            shutdownPromise = finishShutdown(resources, exitCode);
+        }
+        return shutdownPromise;
     };
+}
+
+async function finishShutdown({ browserSession, watcher, watching }, exitCode) {
+    try {
+        await Promise.all([browserSession.close(), watcher.close(), closeWatching(watching)]);
+    } catch (error) {
+        console.error(error.stack || error);
+        exitCode = 1;
+    }
+
+    process.exit(exitCode);
+}
+
+function bindShutdown(shutdown) {
+    const handleSignal = () => shutdown();
 
-    process.once("SIGINT", shutdown);
-    process.once("SIGTERM", shutdown);
+    process.once("SIGINT", handleSignal);
+    process.once("SIGTERM", handleSignal);
 }
 
 function closeWatching(watching) {
@@ -278,5 +332,6 @@ module.exports = {
     devExtension,
     packageExtension,
     parseArgs,
+    previewExtension,
     printUsage,
 };

packages/EdgeTranslate/scripts/build-extension.js

@@ -3,6 +3,7 @@ const {
     devExtension,
     packageExtension,
     parseArgs,
+    previewExtension,
     printUsage,
 } = require("./build-extension-tasks");
 
@@ -19,6 +20,11 @@ async function main() {
         return;
     }
 
+    if (args.command === "preview") {
+        await previewExtension(args);
+        return;
+    }
+
     if (args.command === "package") {
         await packageExtension(args);
         return;