type
status
date
slug
summary
tags
category
icon
password
浏览器插件开发，听起来是一件挺酷炫的事，尤其是体验过谷歌划词翻译、adblock 去除广告这些实用插件带来的效率提升之后。然而对后端程序员来说，浏览器插件开发又是陌生的事，因为其中的 html、css、javascript 语言都较少学习过。
出于好奇，我打算学习下浏览器插件开发，参考了一些视频以及 chatgpt 的帮助，只花了一个小时就完成了一个简单的浏览历史统计插件，还是很有趣的，欢迎大家参考实践，多多体验。
插件构建
这里的代码我完全是通过 chatgpt 生成的，当然它一次生成的代码并不一定是可用的，你要把报错信息或者需求进一步的反馈给它，几次调整得到差不多可用的代码。
先说一下我的设想：我想要这款插件能够去获取我的谷歌浏览器历史，然后分析出最常浏览的网页。我把这个需求告诉了 chatgpt，它给我生成了
manifest.json、background.js 、popup.html、 popup.js 这四个文件，没错，这四个文件就足以完成我的要求了。把这几个文件复制到本地的同一个目录里，可是该怎么让浏览器使用这几个文件呢？
首先在谷歌浏览器右上角拼图的地方点击，进入管理拓展程序页面。
点击“加载已解压的拓展程序”，然后指定你保存文件的目录。
这样，插件就加载成功了（报错信息也可以在这个页面查看），你只需要去打开新网页就能使用这个插件。
代码分析
前面讲到生成了
manifest.json、background.js 、popup.html、 popup.js 这四个文件，那么其作用分别是什么呢？manifest.json
这个文件是必须的，它声明了插件的基本信息，以及需要获取浏览器历史记录的权限。同时，我们指定了插件的后台脚本和弹出窗口的 HTML 文件。
添加了 storage 权限，以便在后台脚本中访问 chrome.storage.local。
添加了 tabs 权限，以便在后台脚本中监听标签页的创建事件。
background.js
使用
chrome.tabs.onUpdated 事件监听标签页的创建，在新标签页打开时检查 URL 是否为默认的空白搜索网页。如果是，我们就执行获取浏览器历史记录和弹出插件弹出窗口的操作。使用
chrome.history.search API 获取浏览器历史记录，并通过 reduce 方法计算出每个 URL 出现的次数。然后，我们将出现次数最多的前 10 个 URL 存储到本地存储中，以便弹出窗口中的 HTML 文件可以使用。popup.html
创建了一个简单的 HTML 页面，用于显示出现次数最多的前 10 个 URL 列表。
popup.js
使用
chrome.storage.local.get API 从本地存储中读取出现次数最多的前 10 个 URL，并将它们添加到弹出窗口的 HTML 页面中。展示效果
打开一个空白搜索网页的时候，展示出我最近浏览最多的十个网页(左边)
最后的效果还是不错的，虽然没太多用处。毕竟整个实现流程没花太多时间。
当然这也可以完成得更高级些，一个设想是利用 ai 总结网页上的文字，生成关键词，然后基于这些关键词为用户推荐更多的关键词、文章或者视频教程，这样是不是就有价值多了呢。当然这些实现都有些困难。
你也可以基于 chatgpt 去快速完成你的插件，或者参考我这里的代码体验构建插件的基本流程。