feat(mcp): add browser adblock feature (#229)

ycjcl868 · ulivz · commit ea0344d67d70 · 2025-03-19T19:54:32.000+08:00
diff --git a/apps/agent-tars/src/renderer/index.html b/apps/agent-tars/src/renderer/index.html
@@ -7,9 +7,37 @@
       http-equiv="Content-Security-Policy"
       content="default-src 'self' 'unsafe-inline' file: data: blob:; img-src 'self' file: data: blob:; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://cdnjs.cloudflare.com https://fonts.googleapis.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.jsdelivr.net/npm/ https://cdn.jsdelivr.net https://cdnjs.cloudflare.com; font-src 'self' https://cdnjs.cloudflare.com https://fonts.googleapis.com; worker-src 'self' blob:; connect-src 'self' https://cdn.jsdelivr.net/npm/ blob:"
     />
+    <style>
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+
+      .loading-spinner {
+        display: inline-block;
+        width: 30px;
+        height: 30px;
+        border: 3px solid rgba(0, 0, 0, 0.1);
+        border-radius: 50%;
+        border-top-color: #767676;
+        animation: spin 1s ease-in-out infinite;
+        margin: 20px;
+      }
+
+      .loading-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+      }
+    </style>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root">
+      <div class="loading-container">
+        <div class="loading-spinner"></div>
+      </div>
+    </div>
     <script type="module" src="/src/main.tsx"></script>
     <!-- DATA -->
   </body>
diff --git a/packages/agent-infra/browser/package.json b/packages/agent-infra/browser/package.json
@@ -38,4 +38,4 @@
     "@vitest/coverage-v8": "3.0.7",
     "@rslib/core": "0.5.3"
   }
-}
+}
diff --git a/packages/agent-infra/mcp-servers/browser/package.json b/packages/agent-infra/mcp-servers/browser/package.json
@@ -25,6 +25,8 @@
     "@modelcontextprotocol/sdk": "^1.6.1"
   },
   "devDependencies": {
+    "@ghostery/adblocker-puppeteer": "2.5.0",
+    "cross-fetch": "4.1.0",
     "@rslib/core": "0.5.3",
     "turndown": "^7.2.0",
     "turndown-plugin-gfm": "^1.0.2",
diff --git a/packages/agent-infra/mcp-servers/browser/src/index.ts b/packages/agent-infra/mcp-servers/browser/src/index.ts
@@ -37,7 +37,7 @@ declare global {
 
 setConfig({
   launchOptions: {
-    headless: true,
+    headless: false,
   },
   logger: {
     info: (...args: any[]) => {
diff --git a/packages/agent-infra/mcp-servers/browser/src/server.ts b/packages/agent-infra/mcp-servers/browser/src/server.ts
@@ -15,6 +15,8 @@ import { z } from 'zod';
 import { ToolSchema } from '@modelcontextprotocol/sdk/types.js';
 import { zodToJsonSchema } from 'zod-to-json-schema';
 import { LaunchOptions, LocalBrowser, Page } from '@agent-infra/browser';
+import { PuppeteerBlocker } from '@ghostery/adblocker-puppeteer';
+import fetch from 'cross-fetch';
 import {
   getBuildDomTreeScript,
   parseNode,
@@ -461,6 +463,14 @@ const handleToolCall: Client['callTool'] = async ({
     },
     browser_navigate: async (args) => {
       try {
+        try {
+          const blocker =
+            await PuppeteerBlocker.fromPrebuiltAdsAndTracking(fetch);
+          await blocker.enableBlockingInPage(page as any);
+        } catch (e) {
+          logger.error('Error enabling adblocker:', e);
+        }
+
         await Promise.all([
           waitForPageAndFramesLoad(page),
           page.goto(args.url),
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -38,4 +38,4 @@`
`38`	`38`	`"@vitest/coverage-v8": "3.0.7",`
`39`	`39`	`"@rslib/core": "0.5.3"`
`40`	`40`	`}`
`41`		`-}`
	`41`	`+}`