网上的好文章，一键转存成 Markdown，永久阅读！（CodeBuddy 来帮忙）

悟空约 1148 字大约 4 分钟...

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

你好，我是悟空。

一、背景

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

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

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

这次我们借助 CodeBuddy 来 DIY一款下载文章的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]