Chrome MCP Server

Chrome MCP Server: Trasforma il tuo Browser in un Assistente AI

Il Model Context Protocol (MCP) sta rivoluzionando il modo in cui gli assistenti AI interagiscono con i nostri strumenti quotidiani. MCP è un protocollo aperto che standardizza come le applicazioni forniscono contesto ai modelli linguistici di grandi dimensioni (LLM). Come un porta USB-C per le applicazioni AI, MCP fornisce un modo standardizzato per connettere i modelli AI a diverse fonti dati e strumenti.

Tra le implementazioni più innovative troviamo Chrome MCP Server, una soluzione che trasforma il tuo browser Chrome in un potente strumento di automazione controllato dall’AI. A differenza degli strumenti tradizionali come Playwright, Chrome MCP lavora direttamente con la tua istanza di Chrome già aperta, mantenendo tutte le tue configurazioni, login e preferenze.

Cos’è Chrome MCP Server e Quando Usarlo

Questa tecnologia è un server MCP basato su estensione Chrome che espone le funzionalità del browser agli assistenti AI come Claude, abilitando automazione complessa, analisi dei contenuti e ricerca semantica. La sua forza principale risiede nel fatto che utilizza direttamente il tuo browser quotidiano, sfruttando le tue abitudini, configurazioni e stati di login esistenti.

Quando Dovresti Usare Chrome MCP Server

Questo strumento è ideale per:

• Automazione di task ripetitivi: Compilazione di form, navigazione ricorrente, gestione di bookmark
• Analisi di contenuti web: Estrazione e analisi di dati da pagine web complesse
• Ricerca semantica: Trovare informazioni specifiche tra le tue schede aperte
• Monitoraggio di rete: Analizzare richieste HTTP e debugging di API
• Workflow di testing: Automazione di test manuali su applicazioni web

Ecco un esempio di caso d’uso tipico:

// Scenario: Ricerca semantica tra schede aperte
const searchResult = await mcpClient.callTool('search_tabs_content', {
  query: 'documentazione API React hooks',
  maxResults: 5
});

// Il sistema trova automaticamente le schede pertinenti
console.log(searchResult.tabs); // Array di schede con contenuto relativo

Caratteristiche Principali del Chrome MCP Server

1. Agnostico per Chatbot/Modelli

Permette a qualsiasi LLM o client chatbot di automatizzare il tuo browser, offrendo massima flessibilità nella scelta degli strumenti AI.

2. Integrazione Seamless

Diversamente dai tool basati su Playwright, Chrome MCP non richiede il lancio di processi browser separati. Utilizza la tua istanza Chrome esistente, preservando:

• Sessioni di login attive
• Configurazioni personalizzate
• Estensioni installate
• Cronologia e bookmark

3. Ricerca Semantica Avanzata

Include un database vettoriale integrato per la scoperta intelligente dei contenuti delle schede browser. Questo significa che puoi cercare concetti, non solo parole chiave.

// Esempio di ricerca semantica
const semanticSearch = await mcpClient.callTool('search_tabs_content', {
  query: 'tutorial machine learning per principianti',
  threshold: 0.7  // Soglia di similarità
});

4. Ottimizzazione SIMD WebAssembly

Ottimizzazione WebAssembly SIMD personalizzata per operazioni vettoriali 4-8x più veloci, garantendo performance eccellenti anche con grandi quantità di dati.

5. Oltre 20 Strumenti Integrati

Il server offre una suite completa di strumenti per screenshot, monitoraggio rete, operazioni interattive, gestione bookmark, cronologia e molto altro.

Installazione e Setup del Chrome MCP Server

Prerequisiti Chrome MCP Server

Prima di iniziare, assicurati di avere:

• Node.js 18+ installato
• pnpm (package manager)
• Chrome o Chromium browser
• Conoscenze base di npm e API

Passo 1: Installazione del Bridge

# Installazione globale del bridge
npm install -g mcp-chrome-bridge

# Oppure con pnpm
pnpm install -g mcp-chrome-bridge

Passo 2: Download dell’Estensione

Scarica l’ultima estensione dal repository ufficiale. L’estensione è necessaria per stabilire la comunicazione tra il server MCP e il browser.

Passo 3: Configurazione Claude Desktop

Aggiungi la seguente configurazione al file MCP di Claude Desktop:

{
  "mcpServers": {
    "chrome-mcp-server": {
      "type": "streamable-http",
      "url": "http://127.0.0.1:12306/mcp"
    }
  }
}

Passo 4: Avvio del Server

# Avvia il server MCP
mcp-chrome-bridge

# Il server sarà disponibile su http://127.0.0.1:12306/mcp

Primo Progetto: Automatizzazione di Ricerca e Screenshot – Chrome MCP Server

Creiamo un semplice progetto che dimostra le capacità di Chrome MCP Server:

// esempio-automazione.js
const { MCPClient } = require('mcp-chrome-bridge');

class ChromeAutomation {
  constructor() {
    this.client = new MCPClient('http://127.0.0.1:12306/mcp');
  }

  async ricercaEScreenshot(query, sito) {
    try {
      // 1. Naviga verso il sito
      await this.client.callTool('chrome_navigate', {
        url: sito,
        waitForLoad: true
      });

      // 2. Cerca nella pagina
      const searchResults = await this.client.callTool('search_tabs_content', {
        query: query,
        maxResults: 3
      });

      // 3. Prendi uno screenshot
      const screenshot = await this.client.callTool('chrome_screenshot', {
        format: 'png',
        quality: 90,
        fullPage: true
      });

      return {
        results: searchResults,
        screenshot: screenshot.data
      };
    } catch (error) {
      console.error('Errore automazione:', error);
      throw error;
    }
  }
}

// Utilizzo
const automation = new ChromeAutomation();
automation.ricercaEScreenshot('tutorial javascript', 'https://developer.mozilla.org')
  .then(result => {
    console.log('Ricerca completata:', result.results);
    console.log('Screenshot salvato');
  });

Panoramica dei Tool Disponibili – Chrome MCP Server

Chrome MCP offre oltre 20 strumenti organizzati in categorie principali:

Gestione Browser (4 tools)

// Ottieni informazioni su finestre e schede
const windowsInfo = await client.callTool('get_windows_and_tabs');

// Naviga verso un URL
await client.callTool('chrome_navigate', {
  url: 'https://example.com',
  waitForLoad: true
});

// Chiudi schede specifiche
await client.callTool('chrome_close_tabs', {
  tabIds: [123, 456]
});

// Controllo navigazione
await client.callTool('chrome_go_back_or_forward', {
  direction: 'back'
});

Screenshot e Visuale (1 tool)

// Screenshot avanzato con targeting elementi
const screenshot = await client.callTool('chrome_screenshot', {
  selector: '.main-content',  // Elemento specifico
  format: 'png',
  quality: 95,
  fullPage: false
});

Monitoraggio Rete (4 tools)

// Inizia cattura rete
await client.callTool('chrome_network_capture_start', {
  includeResponseBodies: true
});

// Invia richiesta HTTP personalizzata
const response = await client.callTool('chrome_network_request', {
  url: 'https://api.example.com/data',
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
});

Analisi Contenuti (3 tools)

// Ricerca semantica tra schede
const searchResults = await client.callTool('search_tabs_content', {
  query: 'machine learning tutorial',
  maxResults: 5,
  threshold: 0.8
});

// Estrai contenuto da pagina
const content = await client.callTool('chrome_get_web_content', {
  format: 'text',  // o 'html'
  selector: 'article'
});

// Trova elementi interattivi
const elements = await client.callTool('chrome_get_interactive_elements', {
  types: ['button', 'input', 'link']
});

Interazione (3 tools)

// Click su elemento
await client.callTool('chrome_click_element', {
  selector: 'button[type="submit"]',
  waitForNavigation: true
});

// Compila form
await client.callTool('chrome_fill_or_select', {
  selector: 'input[name="email"]',
  value: 'user@example.com'
});

// Simula input tastiera
await client.callTool('chrome_keyboard', {
  keys: 'Ctrl+S',  // Salva pagina
  delay: 100
});

Gestione Dati (5 tools)

// Cerca nella cronologia
const history = await client.callTool('chrome_history', {
  query: 'react tutorial',
  maxResults: 10,
  startTime: Date.now() - (7 * 24 * 60 * 60 * 1000) // Ultima settimana
});

// Aggiungi bookmark
await client.callTool('chrome_bookmark_add', {
  url: 'https://react.dev',
  title: 'React Documentation',
  folder: 'Development'
});

Considerazioni sulla Sicurezza di Chrome MCP Server

La sicurezza è un aspetto cruciale quando si utilizza Chrome MCP, dato che permette controllo completo del browser tramite AI.

Architettura di Sicurezza

Lo strumento è completamente locale, il che significa che tutti i dati rimangono sul tuo computer. Questo approccio offre diversi vantaggi:

• Privacy dei dati: Nessuna trasmissione di dati sensibili verso server esterni
• Controllo completo: Hai il controllo totale su cosa viene condiviso con l’AI
• Isolamento: Le operazioni sono isolate nel tuo ambiente locale

Best Practices di Sicurezza

// Esempio di configurazione sicura
const secureConfig = {
  // Limita l'accesso a domini specifici
  allowedDomains: ['*.example.com', 'localhost'],
  
  // Disabilita operazioni potenzialmente rischiose
  disabledTools: ['chrome_network_request'],
  
  // Configura timeout per prevenire operazioni lunghe
  timeout: 30000,
  
  // Abilita logging per audit
  enableLogging: true
};

Validazione Input

Sempre validare gli input prima di passarli agli strumenti:

function validateURL(url) {
  try {
    const parsed = new URL(url);
    // Blocca protocolli non sicuri
    if (!['http:', 'https:'].includes(parsed.protocol)) {
      throw new Error('Protocollo non supportato');
    }
    return true;
  } catch (error) {
    return false;
  }
}

// Uso sicuro
if (validateURL(userInput)) {
  await client.callTool('chrome_navigate', { url: userInput });
}

Gestione Errori e Timeout

class SafeChromeClient {
  constructor(baseURL, timeout = 30000) {
    this.client = new MCPClient(baseURL);
    this.timeout = timeout;
  }

  async safeExecute(toolName, params) {
    const timeoutPromise = new Promise((_, reject) => {
      setTimeout(() => reject(new Error('Timeout')), this.timeout);
    });

    try {
      return await Promise.race([
        this.client.callTool(toolName, params),
        timeoutPromise
      ]);
    } catch (error) {
      console.error(`Errore sicurezza per ${toolName}:`, error);
      throw error;
    }
  }
}

Conclusioni Chrome MCP Server

Questa tecnologia rappresenta un approccio innovativo all’automazione browser, offrendo un’integrazione naturale tra AI e il tuo ambiente di navigazione quotidiano. La sua architettura locale-first garantisce privacy e sicurezza, mentre la ricchezza di strumenti disponibili lo rende adatto per una vasta gamma di applicazioni.

Che tu stia automatizzando task ripetitivi, analizzando contenuti web, o creando workflow complessi, Chrome MCP fornisce gli strumenti necessari per trasformare il tuo browser in un assistente AI intelligente e potente.

La combinazione di semplicità d’uso, sicurezza e funzionalità avanzate rende Chrome MCP uno strumento essenziale per sviluppatori che vogliono sfruttare il potenziale dell’AI nell’automazione browser.

Se vi interessa approfondire l’argomento MCP consigliamo i seguenti nostri articolo:

• MCP in ambiente Java
• MCP in Javascript
• Integrare MCP con Flutter
• MSSQL MCP Server

(fonte) (fonte)

Innovaformazione, scuola informatica specialistica promuove la cultura dell’utilizzo di MCP in modo consapevole. Nell’offerta formativa trovate il Corso Agenti AI ed MCP .

INFO: info@innovaformazione.net – tel. 3471012275 (Dario Carrassi)