网站首页 > 技术文章 正文
我正在参加CodeBuddy「首席试玩官」内容创作大赛,本文所使用的 CodeBuddy 免费下载链接:腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴
你好,我是悟空。
一、背景
你是否有看过好的技术文章后,回头再找,很难找到的痛苦?
你是否有收藏了一堆好文链接,等下次再次访问的时候,发现网站挂了?
假如有一款工具,直接将网上的文章下载下来,并用 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 工作流程图
Browser Action
Page Action
无界面
页面操作
API调用
数据处理
用户安装扩展
Chrome加载manifest.json
扩展类型
在工具栏显示图标
在特定页面显示图标
后台运行
用户点击图标
显示弹出页面
用户交互
操作类型
执行内容脚本
调用Chrome API
在扩展内处理数据
与网页交互
访问浏览器功能
更新扩展状态
完成任务
2.2 开发流程图
否
是
规划扩展功能
创建manifest.json
开发用户界面
编写后台脚本
编写内容脚本
测试扩展
测试通过?
打包扩展
发布到Chrome Web Store
我们只需要开发一个本地的扩展就行,不需要上传到 Chrome 扩展商店。
三、让 CodeBuddy 帮我们写插件
3.1 编写 Chrome 扩展
提示语:帮我写一个 chrome 插件,将网页内容一键转成 markdown 文件。
然后 CodeBuddy 就开始写插件了。
它主要完成了这几件事情:
- 扩展程序结构:Chrome扩展通常需要manifest.json文件、背景脚本、内容脚本和弹出页面
- 核心功能:将HTML转换为Markdown的算法
- 用户交互:如何触发转换和下载Markdown文件
它会从 0 开始帮我们创建一个 Chrome 插件。
最后生成的文件结构是这样的:
3.2 安装 Chrome 扩展
将这个扩展安装到 Chrome 上。
安装方式如下:
- 打开Chrome浏览器,访问 chrome://extensions/
- 开启右上角的"开发者模式"
- 点击"加载已解压的扩展程序"
- 选择包含上述文件的目录
3.3 使用扩展
点击这个扩展,就会弹出转换为 Markdown。如下图所示:
点击转换为 Markdown 按钮,就会下载正在查看的这篇网页,并将其转换成 markdown 格式。
如下图所示,这是下载下来的 markdown 文件。
然后预览下文章内容,格式还是不错的。
四、问题
4.1 扩展的按钮在浏览器上显示乱码。
让 CodeBuddy 帮我们修改,即可解决。
4.2 导出的 markdown 文件名中文和英文都被替换成了下划线。
让 CodeBuddy 帮我们修改。
4.3 无法生成图片
试过好几次,CodeBuddy 都无法帮我生成 48*48,不确定是不是网络原因。
解决方案,到这个网站下载免费的图片。
https://icon-icons.com/
五、总结
通过本篇我们学习了浏览器扩展的卡发原理和流程、浏览器扩展的代码结构。然后用 CodeBuddy 帮我们写扩展,几分钟就完成了,但是中途也遇到了一些问题,CodeBuddy 都可以帮我们解决。
整体来说 CodeBuddy 在开发浏览器扩展这一块杠杠的!
猜你喜欢
- 2025-07-23 零基础入门AI智能体:智能体介绍(智能体类型)
- 2025-07-23 最新PDF转markdown软件MonkeyOCR整合包,文档图片解析工具
- 2025-07-23 Python轻松实现markdown转网页,完美支持mermaid图表、latex公式
- 2025-07-23 iPadOS 26备忘录再升级:支持通话录音转录、Markdown导出
- 2025-07-23 一款能打破 Markdown 天花板的神器 —— Quarkdown
- 2025-04-26 3款 .NET 开源的编辑器,包含代码、文本和Markdown编辑功能!
- 2025-04-26 Markdown 格式如何转换成 Word?
- 2025-04-26 jupyter lab修改默认文件目录
- 2025-04-26 一款优秀的微信Markdown编辑神器及私有化部署流程
- 2025-04-26 PDF文件转markdown格式软件Marker1.6.1版整合包下载
- 1517℃桌面软件开发新体验!用 Blazor Hybrid 打造简洁高效的视频处理工具
- 594℃Dify工具使用全场景:dify-sandbox沙盒的原理(源码篇·第2期)
- 521℃MySQL service启动脚本浅析(r12笔记第59天)
- 489℃服务器异常重启,导致mysql启动失败,问题解决过程记录
- 489℃启用MySQL查询缓存(mysql8.0查询缓存)
- 477℃「赵强老师」MySQL的闪回(赵强iso是哪个大学毕业的)
- 456℃mysql服务怎么启动和关闭?(mysql服务怎么启动和关闭)
- 454℃MySQL server PID file could not be found!失败
- 最近发表
-
- PS所有滤镜的说明(六)(ps滤镜详解)
- 5款小白也能用的在线图片编辑器!电商效率飙升就靠它!
- Java变量(java变量有什么作用)
- Java面试常见问题:Java注解(java中的面试题)
- Java编程入门第一课:HelloWorld(java编程从入门到实践)
- Java基础教程:Java继承概述(java里继承的概述)
- java基础之——访问修饰符(private/default/protected/public)
- 如何规划一个合理的JAVA项目工程结构
- 将机器指令翻译成 JavaScript -- 终极目标
- Web 服务器基准测试:Go vs. Node.js vs. Nim vs. Bun
- 标签列表
-
- cmd/c (90)
- c++中::是什么意思 (84)
- 标签用于 (71)
- 主键只能有一个吗 (77)
- c#console.writeline不显示 (95)
- pythoncase语句 (81)
- es6includes (73)
- windowsscripthost (67)
- apt-getinstall-y (86)
- node_modules怎么生成 (76)
- c++int转char (75)
- static函数和普通函数 (76)
- el-date-picker开始日期早于结束日期 (70)
- js判断是否是json字符串 (67)
- checkout-b (67)
- c语言min函数头文件 (68)
- asynccallback (71)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- java (73)
- js数组插入 (83)
- mac安装java (72)
- eacces (67)
- 查看mysql是否启动 (70)
- 无效的列索引 (74)