如果你点进来看了，那么说明你还是关心这个话题的。但是肯定有人会问？我干嘛要玩转浏览器，干嘛要装谷歌插件？正好应粉丝要求，我来写一篇关于谷歌插件的文章。
为啥要玩转浏览器
互联网高度发达的今天，我们获取信息很重要的一个角色就是浏览器。从纯文字时代开始，我们就开始使用浏览器阅读信息。直到现在随着硬件设备算力的不断增加，互联网技术的提高，很多app或桌面应用也会使用和浏览器应用相同的web技术进行开发实现(html,css,javascript)。比如cursor和vscode其实都是electron进行开发实现的。这个electron使用的就是web技术。总而言之，它很重要，你每天都在用！
为啥要装谷歌插件
这个好理解，就像你手机系统里装了很多的app。因为每个app只能满足你某个特定的需求，所以你需要装很多的应用来解决你的需求。谷歌插件也是一样的。随着网络应用越来越复杂，我们需要的功能也越来越多。谷歌浏览器插件就像是为你的浏览器装上了“超能力”，它们能够帮助你更高效地完成任务，比如广告拦截、密码管理、网页翻译，甚至开发工具等。掌握如何零代码开发，如何安装插件，不仅能提升你的浏览体验、效率，说不定还能帮你挣钱????。下面这些2024年最爆火的谷歌插件，你有熟悉的吗？
正文开始
前置知识
我不会教你编程的内容，但是我还是先说一下浏览器的运行机制，好让你弄懂插件的工作原理。不感兴趣可以直接从第二步开始看。
我以最常见的browserAction这种展现形式的简单功能的浏览器插件为例，一般都会包含下面这4个文件（完整的还有event-pages和content-scripts，但不是必须的，我们以后再介绍）
1、background.js
这个文件就像插件的大脑，负责管理插件的后台任务。它通常在浏览器运行时一直在后台静默工作，不会直接出现在界面上，但它会处理一些重要的任务，比如和网络通信、监听浏览器事件等。
2、mainfest.json
这是插件的”配置文件”。就像你有一个任务清单，告诉浏览器插件做什么，它在哪里运行，哪些权限是需要的。没有这个文件，浏览器就无法知道这个插件要做什么，或者怎么加载。
3、popup.html
这是插件的”弹出窗口”界面。每当你点击浏览器工具栏上的插件图标时，就会打开这个页面。它可以是一个简单的HTML页面，用来显示信息或者和用户交互。
4、popup.js
这个文件和上面的 popup.html 配合使用，负责控制弹出窗口的行为。比如你点击一个按钮后，弹出窗口中的内容会发生变化，或者显示某些信息，所有这些交互的逻辑通常都写在 popup.js 中。
开始实战
找需求
实战之前，假设我有这样一个需求：我们有做自媒体的人，应该都熟悉，我们要模仿、借鉴头部博主账号，那么就要去分析他们账号的内容、风格、数据、文案等等。那么你挨个去看，去导出，去分析就会很麻烦对吧，我们能不能实现批量把视频地址都导出来，然后批量分析呢？答案是可以的，插件这时候就可以闪亮登场了。分析需求
既然要装谷歌插件，我们就要先打开谷歌chrome浏览器（你也可以打开windows自带的edge浏览器，因为目前他们的插件几乎是可以通用的）。首先你要用谷歌浏览器打开小红书的官网，https://www.xiaohongshu.com/。找到你的对标账号，比如这里我随便找了一个“旺旺小仙米”
我们第二步要打开浏览器的“开发者模式”,可以按快捷键“F12”，也可以使用鼠标在网页正文部分右击，选择“检查”菜单。在开发者窗口点击“元素”，默认是英文“Element”
edge浏览器按F12后长这样：
科普：我们浏览的网页内容，都是由设计师精心设计的UI界面设计稿，通过前端开发工程师还原设计稿成web代码语言，再结合后端工程师给的接口数据，部署到服务器上，最后使用浏览器这个媒介将内容通过网络传输到我们到电脑或手机上。
打开开发者模式，这时候你就已经领先90%的人了，因为你已经正式踏入了高阶模式🐶。接下来我们再前进一小步，我们找到单个小红书作品的html元素位置：
点击查找元素的小图标，
edge浏览器上长这样：
点击这个图标之后，我们鼠标移动到小红书页面作者的第一个作品上去，单击一下（不是双击）那个作品，可以发现右边的元素已经跟着变成了对应的元素。
此时，鼠标移动到右边的开发者工具区域的那个绿色背景的字上，会发现左边的小红书单个作品有一层蓝色的蒙版
看到了对吧，很好，鼠标在那个绿色背景字的地方，滚轮继续往上滚（页面往上翻），一直等到蓝色的蒙版把所有的作品都覆盖了的时候
此时鼠标停留的位置再往下一格，就是我们要选择的单个元素的完整的html结构，此时鼠标右击，选择“复制”（英文copy），粘贴到别的地方留着备用。
如果你还是没有找到，别担心，这知识我喂也要给你喂进去，我特意给你录制了个视频版，请看VCR:https://mp.weixin.qq.com/mp/readtemplate?t=pages/video_player_tmpl&action=mpvideo&auto=0&vid=wxv_3817352004721688578
以后你要找元素呢，就是大致相同的原理，你看到的是一个个卡片，但是电脑和AI都是看他们自己的语言，也就是这里的html元素。有时候如果实在不想找，也可以在最外层body那个元素就开始复制，那么ai对整个网站都了如指掌了（缺点就是文件有点大，小网站是可以这样做）。
主角上场
我们先在电脑上随便哪里创建一个空的文件夹,重命名为一个英文名字（比如说hello），现在我们打开cursor编辑器（你可以使用其他的AI编辑器比如windsurf也一样），把空的hello文件夹拖拽到cursor里面去。直接按ctrl + I ,调出composer模式
我们直接输入以下提示词：
请帮我创建一个谷歌浏览器插件，实现以下功能：获取小红书网站博主个人作品列表页面下的所有作品的链接、点赞数，标题。用户点击下载按钮，将数据保存为txt格式。单个作品元素的html结构是：xxx （这里xxx部分就上把之前复制的html结构全部粘贴进来）
然后就可以看见cursor一顿操作猛如虎，自动创建文件了很多的文件，我们点击“Accept All” 表示对cursor刚刚创建的所有文件的认可和生效????
这样，不到1分钟，插件就开发完了。03部署调试
安装插件
我们打开浏览器的插件管理界面，浏览器右上角三个点-拓展程序-管理拓展程序
edge浏览器中也是一样
然后我们把整个插件文件夹（hello文件夹）都拖拽进去
可以看到小红书采集的插件已经安装好了，我们这时候打开之前的小红书页面，然后把插件固定在右上角的位置，再刷新一下网页，固定方法如下：
这时候，点击右上角的小红书插件的图标，就可以看见插件的功能已经出现，我们直接点击“下载数据”，测试一下功能是否可以用。
cursor也是真的牛，我是一边做教程一边测试的，他是直接一遍成功了，大家看下效果。
这里的链接呢正常情况下呢是无法打开的，因为小红书加了cookie在链接后面，但是不影响我们举这个例子，如果真有兴趣深入学习的，可以加入群或果果AI社区进行交流。https://talk.gogoai.com.调试
如果说遇到报错，也很正常，我们只需要把错误截图粘贴在对话框里，或者能描述的清楚话，可以直接在对话框中进行描述。比如我们要再此基础加个新功能，把这些封面图片都下载下来保存到本地的文件夹。我们可以这样说：
很快，1分钟，他又做好了：
我们直接把文件夹再拖拽一次进刚刚的拓展程序页面即可（edge浏览器需要删除旧的再拖一次），刷新一下页面，点击插件图标，就可以看到新的按钮。
完美，又是一次成功，图片全下载下来了：
还是那句话，迈出去第一步是最难的，后面的路就轻松多了，饭已经喂到嘴边了，学不学就看你了。
如果你觉得文章还不错，求您给点个赞，转发给需要的人呗。
当我创建的第一个谷歌插件成功的运行，我开心的像孩子一样尖叫
-END-
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...