chore: Avoid obscuring the entire page content while optimizing the execution process of DevTools (#276)

Author: zhoushaw

packages/visualizer/src/extension/popup.tsx

@@ -73,9 +73,8 @@ function PlaygroundPopup() {
         <div className="popup-header">
           <Logo withGithubStar={true} />
           <p>
-            Automate browser actions, extract data, and perform assertions using
-            AI, including a Chrome extension, JavaScript SDK, and support for
-            scripting in YAML.{' '}
+            AI-Driven Browser Automation with Chrome Extensions, JavaScript, and
+            YAML Scripts.{' '}
             <a href="https://midscenejs.com/" target="_blank" rel="noreferrer">
               Learn more
             </a>

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

@@ -65,7 +65,7 @@ export default class ChromeExtensionProxyPage implements AbstractPage {
           await chrome.debugger.attach({ tabId: currentTabId }, '1.3');
           this.debuggerAttached = true;
           // Prevent AI logic from being influenced by changes in page width and height due to the debugger banner appearing on attach.
-          await sleep(100);
+          await sleep(340);
           // listen to the debugger detach event
           chrome.debugger.onEvent.addListener((source, method, params) => {
             console.log('debugger event', source, method, params);

packages/web-integration/src/extractor/web-extractor.ts

@@ -60,6 +60,12 @@ function collectElementInfo(
   ) {
     return null;
   }
+  // Skip elements that cover the entire viewport, as they are likely background containers
+  // rather than meaningful interactive elements
+  if (rect.height >= window.innerHeight && rect.width >= window.innerWidth) {
+    return null;
+  }
+
   if (isFormElement(node)) {
     const attributes = getNodeAttributes(node);
     let valueContent =