Estudio de caso práctico: Creación de un plugin para navegador "Página web a Markdown" con SOLO Coder Además de crear sitios web, las pequeñas herramientas que suelo desarrollar son complementos para navegadores. Estos últimos días he estado probando un complemento que utiliza el modo TRAE SOLO para extraer el contenido de las páginas web a Markdown, y resulta muy práctico. También he acumulado algo de experiencia y consejos al usar TRAE, un agente de codificación, para escribir complementos para navegadores: - Utiliza un framework: Lo mejor es utilizar un framework como wxt, que está diseñado específicamente para plugins de navegador, ya que puede ahorrar mucho tiempo al evitar tener que construirlo desde cero. Comienza con un ejemplo: No crees el agente desde cero, ya que su entrenamiento se realiza relativamente pronto y muchas bibliotecas se actualizan con frecuencia. Este proyecto de WXT + React + Tailwind + Shadcn es una buena opción: https://t.co/RF9Q0SAZlH Primero planifico, luego ejecuto: Estoy acostumbrado a que SOLO planifique por mí primero y luego ejecute, en lugar de que el agente escriba el código directamente. - Comentarios manuales: Dado que los complementos del navegador como Agent no pueden ayudarle directamente a acceder y depurar, deberá probarlo usted mismo y pegar los resultados del error en Agent. Estas son las palabras clave que utilicé al implementarlo. Puedes probarlas si te interesa: --- Comienza la palabra clave --- Necesito ayuda para implementar un plugin para navegador que, al abrirse, capture la siguiente información de la página web actual: título, enlaces y contenido en formato Markdown. Véase la captura de pantalla como referencia (Nota: Imagen 2). - Tamaño máximo 400x600 - El título puede mostrar un máximo de una línea (los títulos excesivamente largos mostrarán puntos suspensivos). La información Meta dentro de las Propiedades se muestra en un máximo de una línea (las líneas adicionales se mostrarán con puntos suspensivos). - La parte del contenido de la página web correspondiente a Markdown ocupa el espacio restante; si el contenido es demasiado largo, se puede desplazar. - Abajo hay un botón de copiar. Al hacer clic en él, se copiará todo el contenido Markdown (título + contenido + URL de origen). Asegúrese de que el plugin tenga los permisos de acceso correctos a la página web y pueda acceder al contenido de la misma. Pila tecnológica: - wxt: Marco de plugins - Tailwind CSS + interfaz de usuario de shadcn: Interfaz de usuario Para comenzar, descarga directamente este proyecto de ejemplo (https://t.co/RF9Q0SAZlH). Ten en cuenta que debe contener todo el contenido del directorio wxt-dev/examples/tree/main/examples/react-shadcn; no se necesita ningún otro contenido irrelevante. --- Fin del mensaje --- Tras obtener la versión oficial de SOLO, rehice este ejercicio utilizando SOLO Coder, y el número de errores que encontré se redujo significativamente, y la velocidad de generación también fue mayor. Tras activar el modo Plan, se generará un plan. Es recomendable revisarlo manualmente para detectar posibles problemas antes de iniciar la ejecución. Es posible que el primer intento falle; envíe el resultado para que lo corrijamos. Probablemente se necesiten varias iteraciones para obtener el resultado. Si no sabes cómo usarlo una vez terminado, puedes preguntar al agente cómo publicarlo y usarlo, o simplemente solicitar que se documente. Este pequeño proyecto, construido utilizando el patrón TRAE SOLO, ha sido publicado en GitHub:
Finalmente: Mis reflexiones En general, el modo SOLO debería ser mucho más conveniente para aquellos que no están acostumbrados al modo CLI: - Permite introducir y editar fácilmente las indicaciones y pegar imágenes. - Puede detenerse o cambiar de modo en cualquier momento utilizando el ratón. - DiffView facilita la visualización de las actualizaciones de código, mientras que Browser permite ver los efectos en la página web en tiempo real. Para quienes están acostumbrados al modo CLI, estas ventajas no son tan obvias, pero la capacidad de trabajar con un navegador sigue siendo mucho más conveniente para el desarrollo de aplicaciones web. Por último, hablemos de la facturación. TRAE es bastante generoso con el uso de tokens. Recientemente, SOLO ha implementado un sistema de facturación basado en tokens, que se convierten en Solicitudes Rápidas y se deducen del paquete de membresía. Tras cada interacción, los detalles del consumo se mostrarán claramente en la parte inferior del cuadro de diálogo del IDE y en la página de Uso del sitio web de TRAE. Recomiendo a todos que lo prueben, especialmente el SubAgent que mencioné anteriormente, o que intenten escribir su propio complemento para el navegador basándose en las palabras clave que compartí anteriormente. Sitio web oficial de la versión internacional de TRAE: https://t.co/rF5s0uF53p https://t.co/wQXKquMgqg