ChatGPT 与我合力开发 xargin blog archive 插件:曹大博客的新奇探险

news/2024/11/14 13:19:37/

之前写的批量删除 chatGPT 对话的插件[1],最近我收到了一个五星好评:

08db42730d148a06ba9b858bd83637b9.png

虽然不赚钱,交个朋友嘛,还是挺高兴的。而且借助 chatGPT,我是在与全世界的用户交流,想想就激动。

最近我发现自己让 chatGPT 帮忙写前端代码有点上瘾,这不又上架了一个 chrome 插件:Xargin Blog Archive[2]。它的主要功能就是在曹大的博客 xargin.com 上添加一个 archive 页面。

66b164187dd9c70d39c5602a58307cb3.png

由于 xargin.com 并没有 archive 页面,所以没法方便地点击历史文章,装上插件之后的效果是这样的:

0409506717fc042643325c2c75d38483.png

之前要想浏览历史文章只能一次次地点击“上一篇”,我还特地手动把曹大所有文章看了一遍[3],人工做了一个文章目录:

38af8d8cab93dd0b5aa387f8f595f962.png

但我想要一个真的“archive”页面,但又不会写前端代码,而且也从来没写过 chrome 插件,也就一直没法真正上手去做。

当 chatGPT 出现后,写这样的代码就很简单了,只要清晰地描述出需求,剩下的就是一些简单的调试,改 bug 工作了。仅管描述清楚需求也不是那么简单,但是相比自己手动去 google、stackoverflow、垃圾文章里翻找一些代码相比,还是简单太多。

实际上,我的思路很简单:

  1. 写一个爬虫,从 xargin.com 上的第一篇文章开始爬标题,内容。

  2. 从内容里找到元素“Previous Post”,顺着链接找到上一篇内容。

  3. 不断重复爬上一篇文章,直到找到第一篇文章。到这里,就把所有的文章爬了下来。

  4. 将所有文章的标题、url、发布时间用 markdown 表格列出来,保存到一个 md 文件里,放到 github 仓库。

  5. 配置一个 github actions,定期运行爬虫,更新 md 文件。

  6. 最后写一个 chrome 插件,当检测到在浏览 xargin.com 页面时,将 md 文件拉取到本地,渲染成 html,插入到 achive 页面上。

要完成上面列的这些步骤需要的都是很通用的“能力”,比如写爬虫、将 md 渲染成 html,都是大家做烂了的工作,这种事情让 chatGPT 来帮忙,简直不要太容易。

实际上,我也是这么让 chatGPT 一步步地来做的,非常顺利。

唯一费了一些时间的是,我想调整 archive 页面的风格以适应暗黑模式。不过这个过程中我也跟 chatGPT 学到了暗黑模式的原理。

c9c57a280d3bac8f70b2e74422f36ac2.png

我建议读者们都去安装这个插件,这样阅读曹大的文章时就更加方便了。如果想要学习写这样的插件,我把和 chatGPT 的对话放在这里[4],各位可以自行研究。

对每个程序员来说,做出自己的作品都是一个梦想,这两个小作品算是一个小的开始。

参考资料

[1]

插件: https://qcrao.com/post/develop-bulk-delete-chatGPT-with-GPT-4/

[2]

Xargin Blog Archive: https://chrome.google.com/webstore/detail/xargin-blog-archive/pokfcnejbacnbjbdodlklbafoienomda/related?hl=zh-CN

[3]

所有文章看了一遍: https://qcrao.com/post/blogs-written-by-xargin/

[4]

这里: https://sharegpt.com/c/ColKwhZ


http://www.ppmy.cn/news/101122.html

相关文章

【JavaSE】Java基础语法(二十八):HashSet集合

文章目录 1. HashSet集合概述和特点2. HashSet集合的基本应用3. 哈希值4. HashSet集合存储学生对象并遍历【应用】 1. HashSet集合概述和特点 底层数据结构是哈希表存取无序不可以存储重复元素没有索引,不能使用普通for循环遍历 2. HashSet集合的基本应用 存储字符串并遍历 …

linux系统使用HTTP代理方法

在Linux系统中使用HTTP代理方法,可以通过设置环境变量来实现。具体步骤如下: 1. 打开终端,输入以下命令: export http_proxyhttp://代理服务器IP地址:端口号 其中,代理服务器IP地址和端口号需要替换成你所使用的代理…

84.Rem和max-width如何工作

max-width 首先我们先看普通的width是什么样的效果&#xff01; 首先给个测试的div <div class"test">TEST</div>● 然后CSS给定一个宽度 .test {width: 1000px;background-color: red;padding: 100px; }如上图&#xff0c;不管你的浏览器窗口如何改变…

【优化调度】基于改进遗传算法的公交车调度排班优化的研究与实现(Matlab代码实现)

目录 1 概述 2 运行结果 3 参考文献 4 Matlab代码 1 概述 本文对当前公交企业调度系统进行了分析&#xff0c;建立了公交排班的数学模型。本文基于数据挖掘分析的结果上&#xff0c;使用截面客流量数据对模型进行约束&#xff0c;得出了公交客流出行的空间分布规律。再以…

分享几封好用的外贸人催单模版

给外贸人说在前面&#xff1a; 虽然说是催单模版&#xff0c;但是请带入你们公司产品&#xff0c;你们客户具体情况来套入&#xff0c;不能一模一样&#xff0c;再好的模版&#xff0c;再好的话术&#xff0c;大家一起用&#xff0c;就成了毫无价值的废料。 请灵活运用&#…

c# cad 二次开发 类库 块的操作

c# cad 二次开发 类库 块的操作 using Autodesk.AutoCAD.ApplicationServices; using Autodesk.AutoCAD.DatabaseServices; using Autodesk.AutoCAD.EditorInput; using Autodesk.AutoCAD.Geometry; using Autodesk.AutoCAD.Runtime; using System; using System.Collections.G…

Linux之进程地址空间

文章目录 前言一、是什么1.例子2.感性的理解虚拟地址空间3.现象的具体解释4.写时拷贝 二、为什么三、怎么办总结 前言 内存区域划分&#xff1a; 在学习C/C时我们都有接触过内存区域划分这个概念&#xff0c;也知道它表示的是程序加载到内存中不同的数据所分布的不同的区域&a…

《数据库应用系统实践》------ 酒店客房管理系统

系列文章 《数据库应用系统实践》------ 酒店客房管理系统 文章目录 系列文章一、需求分析1、系统背景2、 系统功能结构&#xff08;需包含功能结构框图和模块说明&#xff09;3&#xff0e;系统功能简介 二、概念模型设计1&#xff0e;基本要素&#xff08;符号介绍说明&…