fix: show error message when aiAction fails in extension (#210)

apps/site/docs/en/quick-experience.mdx

@@ -43,4 +43,10 @@ After experiencing, you may want to write some code to integrate Midscene. There
 
 * Extension fails to run and shows 'Cannot access a chrome-extension:// URL of different extension'
 
-Make sure you are using the Midscene extension on a normal http(s):// page. If the error persists, it's mainly due to conflicts with other extensions injecting `<iframes />` into the page. Try disabling the suspicious plugins and refresh.
+It's mainly due to conflicts with other extensions injecting `<iframe />` or `<script />` into the page. Try disabling the suspicious plugins and refresh. 
+
+To find the suspicious plugins:
+
+1. Open the Devtools of the page, find the `<script>` or `<iframe>` with a url like `chrome-extension://{ID-of-the-suspicious-plugin}/...`.
+2. Copy the ID from the url, open chrome://extensions/, find the plugin with the same ID, disable it.
+3. Refresh the page, try again.

apps/site/docs/zh/quick-experience.mdx

@@ -41,4 +41,10 @@ OPENAI_API_KEY="sk-replace-by-your-own"
 
 * 插件运行失败，提示 'Cannot access a chrome-extension:// URL of different extension'
 
-请确保你在普通的 http(s):// 页面上使用 Midscene.js 插件。如果依然报错，一般是与其他插件冲突（被注入了 `<iframe />` ）所致，临时禁用可疑插件即可。
+这一般是与其他插件冲突所致，如页面已经被其他插件注入了 `<iframe />` 或 `<script />`。
+
+找到可疑插件：
+
+1. 打开页面的调试器，找到被其他插件注入的 `<iframe />` 或 `<script />`，一般 URL 是 `chrome-extension://{这串就是ID}/...` 格式，复制其 ID。
+2. 打开 chrome://extensions/ ，找到相同 ID 的插件，禁用它。
+3. 刷新页面，再次尝试。

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

@@ -28,13 +28,7 @@ import './playground-component.less';
 import Logo from './logo';
 import { serverBase, useServerValid } from './open-in-playground';
 
-import { paramStr, typeStr } from '@midscene/web/ui-utils';
-import {
-  ScriptPlayer,
-  buildYaml,
-  flowItemBrief,
-  parseYamlScript,
-} from '@midscene/web/yaml';
+import { ScriptPlayer, buildYaml, parseYamlScript } from '@midscene/web/yaml';
 
 import { overrideAIConfig } from '@midscene/core';
 import {
@@ -310,6 +304,7 @@ export function Playground({
 
           const parsedYamlScript = parseYamlScript(yamlString);
           console.log('yamlString', parsedYamlScript, yamlString);
+          let errorMessage = '';
           const yamlPlayer = new ScriptPlayer(
             parsedYamlScript,
             async () => {
@@ -335,13 +330,20 @@ export function Playground({
                 if (tips.length > 0) {
                   overallStatus = tips[tips.length - 1];
                 }
+
+                if (taskStatus.status === 'error') {
+                  errorMessage = taskStatus.error?.message || '';
+                }
               }
 
               setLoadingProgressText(overallStatus);
             },
           );
 
           await yamlPlayer.run();
+          if (yamlPlayer.status === 'error') {
+            throw new Error(errorMessage || 'Failed to run the script');
+          }
         } else if (value.type === 'aiQuery') {
           result.result = await activeAgent?.aiQuery(value.prompt);
         } else if (value.type === 'aiAssert') {
@@ -353,7 +355,12 @@ export function Playground({
     } catch (e: any) {
       console.error(e);
       if (typeof e === 'string') {
-        result.error = e;
+        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';
+        } else {
+          result.error = e;
+        }
       } else if (!e.message?.includes(ERROR_CODE_NOT_IMPLEMENTED_AS_DESIGNED)) {
         result.error = e.message;
       } else {