自动动手制作一款 Chrome 扩展，一键转存文章

作者：悟空聊架构

2025-05-14
湖北
本文字数：1620 字
阅读完需：约 5 分钟

我正在参加 CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴

你好，我是悟空。

一、背景

你是否有看过好的技术文章后，回头再找，很难找到的痛苦？

你是否有收藏了一堆好文链接，等下次再次访问的时候，发现网站挂了？

假如有一款工具，直接将网上的文章下载下来，并用 markdown 来存储，以后还可以离线观看，是不是就很舒服了。

这次我们借助 CodeBuddy 来做一款下载文章的 Chrome 浏览器扩展，一键转存文章成 markdown 文件。

二、Chrome 扩展开发原理与流程

2.1 Chrome 扩展的基本架构

Chrome 扩展是基于 Web 技术（HTML、CSS、JavaScript）构建的软件包，可以扩展 Chrome 浏览器的功能。以下是 Chrome 扩展的核心架构和工作原理：

2.1.1 核心组件

Chrome扩展├── Manifest文件 (manifest.json)├── 用户界面元素│   ├── 弹出页面 (Popup)│   ├── 选项页面 (Options)│   └── 侧边栏 (Sidebar)├── 后台脚本 (Background Scripts)├── 内容脚本 (Content Scripts)├── 资源文件│   ├── 图标│   ├── 样式表│   └── 其他资源└── Web API访问

复制代码

2.1.2 工作流程图

graph TD    A[用户安装扩展] --> B[Chrome加载manifest.json]    B --> C{扩展类型}    C -->|Browser Action| D[在工具栏显示图标]    C -->|Page Action| E[在特定页面显示图标]    C -->|无界面| F[后台运行]        D --> G[用户点击图标]    E --> G    G --> H[显示弹出页面]        H --> I[用户交互]    I --> J{操作类型}    J -->|页面操作| K[执行内容脚本]    J -->|API调用| L[调用Chrome API]    J -->|数据处理| M[在扩展内处理数据]        K --> N[与网页交互]    L --> O[访问浏览器功能]    M --> P[更新扩展状态]        N --> Q[完成任务]    O --> Q    P --> Q

复制代码

2.2 开发流程图

graph LR    A[规划扩展功能] --> B[创建manifest.json]    B --> C[开发用户界面]    B --> D[编写后台脚本]    B --> E[编写内容脚本]    C --> F[测试扩展]    D --> F    E --> F    F --> G{测试通过?}    G -->|否| C    G -->|是| H[打包扩展]    H --> I[发布到Chrome Web Store]