Project Overview
This tutorial will guide you through developing a Chrome extension for web content extraction using Cursor AI and Coze workflow, let's explore the charm of AI-assisted development together.
Project final effect preview
1.1 Development Background
As a developer who often reads technical articles, I often want to find a convenient tool to extract and save the essence of the articles. This prompted me to come up with the idea of developing a browser extension. With the assistance of AI, this idea quickly came to fruition.
In response to many friends' requests, I have decided to share the complete development process this time.
2. Introduction to the technology stack
2.1 Cursor: AI-driven intelligent editor
Cursor editor interface display
Cursor is a revolutionary code editor that retains the familiar interface of VS Code while integrating powerful AI features. Its most distinctive feature is the composer function with natural language interaction.
2.2 Coze: A visual workflow platform
Coze Visual Workflow Interface
The Coze workflow is a powerful visual tool that can achieve:
- Complex and stable business process orchestration
- Flexible combination of multiple functions
- High-stability task flow processing
3. Functional requirement analysis
Core feature list:
- Web page link extraction
- Summary of web content
- Output three key variables:
- Protagonist
- Article summary
- Golden sentence extraction
- Search for images related to the main character
- Aesthetic infographic summary card layout
4. Technical architecture
Adopting a front-end and back-end separation architecture:
- Backend: Business logic built on Coze workflow
- Front-end: Chrome browser extension, providing a lightweight interactive interface
5. Workflow setup
5.1 Core component configuration
Workflow overall architecture diagram
Key configuration points:
- Large Model Node Prompt:
As a senior and professional article editor, you are able to thoroughly understand the connotation of the article I provide, and then provide the following three parts of content: 1. The main character of the article (such as "Lei Jun") 2. An accurate summary of the main theme of the article 3. A precise finding of the outstanding catchphrases of the article's main character (if any)
- Output node markdown formatting:
👤主角：
📷主角图片：
📝文章内容：
💖金句：
⚠️ Pay special attention: the output image variable uses contentUrl
6. Chrome plugin development
6.1 How to obtain Coze key configuration
Step 1: Obtain authorization token
Obtain authorization token in personal settings
Step 2: Obtain the workflow ID
Obtain workflow ID on the workflow interface
Interface optimization
Optimized plugin main interface
Author Information Display Page
Core Function Demonstration
8. Summary and Outlook
This tutorial introduces the main development process, but in actual development, you may encounter:
- Icon style optimization
- Error handling
- Cursor coding detail issues
Project source code
📦 Code Repository: CozeSummarizer