feat: Enhance browser API and debugger functionality

- Add missing debugger API methods to browser API map
- Refactor debugger attachment and command sending in workflow engine
- Remove debug console logs
- Enable debug mode in settings
- Improve content script injection check

Author: bingren-yd

src/components/newtab/shared/SharedCodemirror.vue

@@ -26,10 +26,9 @@ import { oneDark } from '@codemirror/theme-one-dark';
 import { keymap } from '@codemirror/view';
 import { EditorView, basicSetup } from 'codemirror';
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+// don't remove this unused import, the css is used in dynamic style
 import { store } from '../settings/jsBlockWrap';
 
-console.log('🚀 ~ store:', store);
-
 const props = defineProps({
   lang: {
     type: String,

src/components/newtab/workflow/settings/SettingsGeneral.vue

@@ -189,8 +189,6 @@ const settingItems = [
     notSupport: ['firefox'],
     name: t('workflow.settings.debugMode.title'),
     description: t('workflow.settings.debugMode.description'),
-    // FIXME: temporarily disable this function
-    disabled: true,
   },
   {
     id: 'inputAutocomplete',

src/service/browser-api/BrowserAPIService.js

@@ -34,6 +34,35 @@ function sendBrowserApiMessage(name, ...args) {
 }
 
 class BrowserContentScript {
+  /**
+   * Check if content script injected
+   * @param {ScriptInjectTarget} target
+   * @param {string=} messageId
+   */
+  static async isContentScriptInjected(target, messageId) {
+    if (!IS_BROWSER_API_AVAILABLE) {
+      return sendBrowserApiMessage(
+        'contentScript.isContentScriptInjected',
+        ...arguments
+      );
+    }
+
+    try {
+      // 发送测试消息到目标标签页
+      await Browser.tabs.sendMessage(
+        target.tabId,
+        { type: messageId || 'content-script-exists' },
+        {
+          frameId: target.allFrames ? undefined : target.frameId,
+        }
+      );
+
+      return true;
+    } catch (error) {
+      return false;
+    }
+  }
+
   /**
    * Inject content script into targeted tab
    * @param {Object} script
@@ -89,8 +118,8 @@ class BrowserContentScript {
           }
 
           tryCount += 1;
-          // isContentScriptInJected is not found
-          const isInjected = await this.isContentScriptInjected(
+
+          const isInjected = await BrowserContentScript.isContentScriptInjected(
             target,
             waitUntilInjected.messageId
           );
@@ -187,6 +216,7 @@ class BrowserAPIService {
 (() => {
   browserAPIMap.forEach((item) => {
     let value;
+    console.log('IS_BROWSER_API_AVAILABLE', IS_BROWSER_API_AVAILABLE);
     if (IS_BROWSER_API_AVAILABLE) {
       value = item.api();
     } else {

src/service/browser-api/browser-api-map.js

@@ -57,6 +57,8 @@ export const browserAPIMap = [
     api: () => chrome.debugger.onEvent,
   },
   { path: 'debugger.detach', api: () => chrome.debugger.detach },
+  { path: 'debugger.attach', api: () => chrome.debugger.attach },
+  { path: 'debugger.sendCommand', api: () => chrome.debugger.sendCommand },
   { path: 'permissions.contains', api: () => Browser.permissions.contains },
   { path: 'cookies.get', api: () => Browser.cookies?.get },
   { path: 'cookies.getAll', api: () => Browser.cookies?.getAll },

src/workflowEngine/WorkflowEngine.js

@@ -127,6 +127,8 @@ class WorkflowEngine {
         return;
       }
 
+      console.log('before execute', this.state, '\n', this.workflow);
+
       const { nodes, edges } = this.workflow.drawflow;
       if (!nodes || nodes.length === 0) {
         console.error(`${this.workflow.name} doesn't have blocks`);
@@ -452,7 +454,7 @@ class WorkflowEngine {
         this.workers.forEach((worker) => {
           if (!worker.debugAttached) return;
 
-          chrome.debugger.detach({ tabId: worker.activeTab.id });
+          BrowserAPIService.debugger.detach({ tabId: worker.activeTab.id });
         });
       }
 

src/workflowEngine/WorkflowManager.js

@@ -55,10 +55,6 @@ class WorkflowManager {
     }
 
     const convertedWorkflow = convertWorkflowData(workflowData);
-    console.log(
-      '🚀 ~ WorkflowManager ~ execute ~ convertedWorkflow:',
-      convertedWorkflow
-    );
     const engine = new WorkflowEngine(convertedWorkflow, {
       options,
       states: this.#state,

src/workflowEngine/helper.js

@@ -60,19 +60,27 @@ export async function getFrames(tabId) {
 
 export function sendDebugCommand(tabId, method, params = {}) {
   return new Promise((resolve) => {
-    chrome.debugger.sendCommand({ tabId }, method, params, resolve);
+    BrowserAPIService.debugger.sendCommand({ tabId }, method, params, resolve);
   });
 }
 
-export function attachDebugger(tabId, prevTab) {
-  return new Promise((resolve) => {
-    if (prevTab && tabId !== prevTab)
-      chrome.debugger.detach({ tabId: prevTab });
+export async function attachDebugger(tabId, prevTab) {
+  try {
+    if (prevTab && tabId !== prevTab) {
+      await BrowserAPIService.debugger.detach({ tabId: prevTab });
+    }
 
-    chrome.debugger.attach({ tabId }, '1.3', () => {
-      chrome.debugger.sendCommand({ tabId }, 'Page.enable', resolve);
-    });
-  });
+    // first attach
+    await BrowserAPIService.debugger.attach({ tabId }, '1.3');
+
+    // and then Page.enable
+    await BrowserAPIService.debugger.sendCommand({ tabId }, 'Page.enable');
+
+    return true;
+  } catch (error) {
+    console.error('Failed to attach debugger:', error);
+    return false;
+  }
 }
 
 export function waitTabLoaded({ tabId, listenError = false, ms = 10000 }) {