fix: a more friendly error code for extension (#260)

apps/site/docs/en/automate-with-scripts-in-yaml.mdx

@@ -181,6 +181,24 @@ tasks:
       # ...
 ```
 
+## Use environment variables in `.yaml` file
+
+You can use environment variables in `.yaml` file by `${variable-name}`.
+
+For example, if you have a `.env` file with the following content:
+
+```env filename=.env
+topic=weather today
+```
+
+You can use the environment variable in the `.yaml` file like this:
+
+```yaml
+#...
+ - ai: type ${topic} in input box
+#...
+```
+
 ## Use bridge mode
 By using bridge mode, you can utilize YAML scripts to automate the web browser on your desktop. This is particularly useful if you want to reuse cookies, plugins, and page states, or if you want to manually interact with automation scripts.
 

apps/site/docs/en/bridge-mode-by-chrome-extension.mdx

@@ -14,7 +14,14 @@ you can check the demo project of bridge mode here: [https://github.com/web-infr
 
 ## Preparation
 
-Install [Midscene extension from Chrome web store](https://chromewebstore.google.com/detail/midscene/gbldofcpkknbggpkmbdaefngejllnief). We will use it later.
+1. Config the OpenAI API key, or [customize model and provider](./model-provider.html)
+
+```bash
+# replace with your own
+export OPENAI_API_KEY="sk-abcdefghijklmnopqrstuvwxyz"
+```
+
+2. Install [Midscene extension from Chrome web store](https://chromewebstore.google.com/detail/midscene/gbldofcpkknbggpkmbdaefngejllnief)
 
 ## Step 1. install dependencies
 

apps/site/docs/zh/automate-with-scripts-in-yaml.mdx

@@ -178,6 +178,24 @@ tasks:
       # ...
 ```
 
+## 在 `.yaml` 文件中使用环境变量
+
+你可以在 `.yaml` 文件中使用环境变量，通过 `${variable-name}` 的方式。
+
+例如，如果你有一个 `.env` 文件，内容如下：
+
+```env filename=.env
+topic=weather today
+```
+
+你可以在 `.yaml` 文件中使用环境变量，如下所示：
+
+```yaml
+#...
+ - ai: type ${topic} in input box
+#...
+```
+
 ## 使用桥接模式
 
 通过使用桥接模式，你可以利用 YAML 脚本在已有的桌面浏览器上执行自动化。这对于需要复用 Cookies、插件和页面状态，或者需要手工与自动化脚本交互的情况非常有用。

apps/site/docs/zh/bridge-mode-by-chrome-extension.mdx

@@ -14,7 +14,14 @@ you can check the demo project of bridge mode here: [https://github.com/web-infr
 
 ## 准备工作
 
-安装 [Midscene 插件](https://chromewebstore.google.com/detail/midscene/gbldofcpkknbggpkmbdaefngejllnief)。
+1. 配置 OpenAI API Key，或 [自定义模型和服务商](./model-provider.html)
+
+```bash
+# 更新为你自己的 Key
+export OPENAI_API_KEY="sk-abcdefghijklmnopqrstuvwxyz"
+```
+
+2. 安装 [Midscene 浏览器插件](https://chromewebstore.google.com/detail/midscene/gbldofcpkknbggpkmbdaefngejllnief)
 
 ## 第一步：安装依赖
 

packages/visualizer/src/component/playground-component.tsx

@@ -352,7 +352,7 @@ export function Playground({
       if (typeof e === 'string') {
         if (e.includes('of different extension')) {
           result.error =
-            'Cannot access a chrome-extension:// URL of different extension. Please disable the suspicious plugins and refresh the page. Guide: https://midscenejs.com/quick-experience.html#faq';
+            'Conflicting extension detected. Please disable the suspicious plugins and refresh the page. Guide: https://midscenejs.com/quick-experience.html#faq';
         } else {
           result.error = e;
         }

packages/visualizer/src/component/store.tsx

@@ -92,7 +92,8 @@ export const useChromeTabInfo = create<{
 
     chrome.tabs.onActivated.addListener(async (activeInfo) => {
       const tabId = activeInfo.tabId;
-      const windowId = await currentWindowId();
+      const windowId = activeInfo.windowId;
+      // console.log('active tab', tabId, windowId);
 
       set({ tabId, windowId });
     });

packages/visualizer/src/extension/popup.tsx

@@ -1,17 +1,10 @@
-import { Button, ConfigProvider, Tabs, message } from 'antd';
+import { ConfigProvider, Tabs } from 'antd';
 import ReactDOM from 'react-dom/client';
 import { setSideEffect } from '../init';
 /// <reference types="chrome" />
 import './popup.less';
 
-import {
-  type WorkerRequestSaveContext,
-  type WorkerResponseSaveContext,
-  getExtensionVersion,
-  getPlaygroundUrl,
-  sendToWorker,
-  workerMessageTypes,
-} from './utils';
+import { getExtensionVersion } from './utils';
 
 import { globalThemeConfig } from '@/component/color';
 import Logo from '@/component/logo';
@@ -22,59 +15,18 @@ import {
 import { useChromeTabInfo } from '@/component/store';
 import { useEnvConfig } from '@/component/store';
 import { ApiOutlined, SendOutlined } from '@ant-design/icons';
-import type { ChromeExtensionProxyPageAgent } from '@midscene/web/chrome-extension';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import Bridge from './bridge';
 
 setSideEffect();
 
 declare const __VERSION__: string;
 
-const shotAndOpenPlayground = async (
-  agent?: ChromeExtensionProxyPageAgent | null,
-) => {
-  if (!agent) {
-    message.error('No agent found');
-    return;
-  }
-  const context = await agent.getUIContext();
-
-  // cache screenshot when page is active
-  const { id } = await sendToWorker<
-    WorkerRequestSaveContext,
-    WorkerResponseSaveContext
-  >(workerMessageTypes.SAVE_CONTEXT, {
-    context,
-  });
-  const url = getPlaygroundUrl(id);
-  chrome.tabs.create({
-    url,
-    active: true,
-  });
-};
-
 function PlaygroundPopup() {
-  const [loading, setLoading] = useState(false);
   const extensionVersion = getExtensionVersion();
-  const { tabId, windowId } = useChromeTabInfo();
+  const { tabId } = useChromeTabInfo();
   const { popupTab, setPopupTab } = useEnvConfig();
 
-  const handleSendToPlayground = async () => {
-    if (!tabId || !windowId) {
-      message.error('No active tab or window found');
-      return;
-    }
-    setLoading(true);
-    try {
-      const agent = extensionAgentForTabId(tabId);
-      await shotAndOpenPlayground(agent);
-      await agent!.page.destroy();
-    } catch (e: any) {
-      message.error(e.message || 'Failed to launch Playground');
-    }
-    setLoading(false);
-  };
-
   const items = [
     {
       key: 'playground',
@@ -143,3 +95,42 @@ if (element) {
   const root = ReactDOM.createRoot(element);
   root.render(<PlaygroundPopup />);
 }
+
+// const shotAndOpenPlayground = async (
+//   agent?: ChromeExtensionProxyPageAgent | null,
+// ) => {
+//   if (!agent) {
+//     message.error('No agent found');
+//     return;
+//   }
+//   const context = await agent.getUIContext();
+
+//   // cache screenshot when page is active
+//   const { id } = await sendToWorker<
+//     WorkerRequestSaveContext,
+//     WorkerResponseSaveContext
+//   >(workerMessageTypes.SAVE_CONTEXT, {
+//     context,
+//   });
+//   const url = getPlaygroundUrl(id);
+//   chrome.tabs.create({
+//     url,
+//     active: true,
+//   });
+// };
+
+// const handleSendToPlayground = async () => {
+//   if (!tabId || !windowId) {
+//     message.error('No active tab or window found');
+//     return;
+//   }
+//   setLoading(true);
+//   try {
+//     const agent = extensionAgentForTabId(tabId);
+//     await shotAndOpenPlayground(agent);
+//     await agent!.page.destroy();
+//   } catch (e: any) {
+//     message.error(e.message || 'Failed to launch Playground');
+//   }
+//   setLoading(false);
+// };

packages/visualizer/unpacked-extension/manifest.json

@@ -9,6 +9,7 @@
     "sidePanel",
     "debugger"
   ],
+  "incognito": "split",
   "background": {
     "service_worker": "./lib/worker.js"
   },

packages/web-integration/src/chrome-extension/page.ts

@@ -51,6 +51,13 @@ export default class ChromeExtensionProxyPage implements AbstractPage {
       return;
     }
 
+    const url = await this.url();
+    if (url.startsWith('chrome://')) {
+      throw new Error(
+        'Cannot attach debugger to chrome:// pages, please use Midscene in a normal page with http://, https:// or file://',
+      );
+    }
+
     // Create new attaching promise
     this.attachingDebugger = (async () => {
       try {