第六章 / Chapter 06

浏览器插件与自动化脚本

你每天都在用浏览器上网,但你可能不知道——给它装上"插件",就像给手机装上 App,能让它变得无比强大。今天我们就来揭开这个秘密。

向下滚动开始学习 ↓

什么是浏览器插件?

如果浏览器是你的手机,那插件就是你安装的 App。裸机能打电话、发短信,但装了微信就能聊天,装了美图秀秀就能修图。浏览器插件也是一样的道理。

📱

裸机浏览器

只能打开网页、输入网址、看内容。就像一部没装任何 App 的新手机。

🚀

装了插件的浏览器

能屏蔽广告、自动翻译、管理密码、截图……功能无限扩展!

🧩

一句话理解

浏览器插件 = 给浏览器加的"超能力"。就像你给自行车装了电动马达,车还是那辆车,但骑起来省力多了。每个插件解决一个具体问题,你可以按需安装,不喜欢随时卸载。

最常用的几类浏览器插件

就像手机有工具类 App、社交类 App、娱乐类 App 一样,浏览器插件也有不同分类。下面是最实用的几种:

🚫
广告拦截器
像小区门卫一样,把推销员(广告)挡在门外,让你清清静静地看网页。
🔑
密码管理器
像一个聪明的钥匙环,帮你记住所有网站的账号密码,再也不怕忘记。
🌐
翻译工具
像一位随身翻译官,看到外语网页,一键就能变成中文。
📸
截图工具
比手机截图更强大——可以截取整个长网页,还能在图上标注文字。
🌙
暗色模式
像给屏幕戴上墨镜,把刺眼的白色网页变成护眼的深色,晚上看着不累。
💰
比价助手
网购时自动比较各平台价格,像一个帮你货比三家的精明朋友。

插件是怎么工作的?

想象你戴上一副墨镜——阳光还是那个阳光,但经过墨镜"过滤"后,你看到的世界变了。浏览器插件的原理也差不多:

extension-flow.diagram
🌐 浏览器
加载网页
🧩 插件
拦截并修改
👁️ 你看到的
最终效果

第一步:浏览器向服务器请求网页内容(包括广告、跟踪代码等一切东西)

第二步:插件在中间"拦截",按照你设定的规则修改内容(比如把广告删掉)

第三步:你看到的就是被插件"美化"过的网页——干净、好用

🕶️

墨镜比喻

戴上偏光墨镜,水面反光消失了,但水还在。插件就是你的"数字墨镜"——广告还在服务器上,但插件把它从你的视野中移除了。你看到的网页更干净,但网页本身并没有被改变。

什么是自动化脚本?

如果插件是给浏览器装 App,那自动化脚本就是——给你雇了一个"机器人助手"。你告诉它规则,它就能不知疲倦地帮你干重复的活。

🤖

生活中的自动化

你每天早上的例行操作:关闹钟 → 开灯 → 烧水 → 放音乐。如果有个机器人能在闹钟响的瞬间帮你做完这一切,那它就是你的"自动化脚本"。在电脑上也一样:填表格、下文件、整理数据……重复的事,让脚本来。

😰 手动操作

  • 一个个填写 100 张表格
  • 逐个点击下载 50 个文件
  • 手动复制粘贴整理数据
  • 容易出错、容易遗漏
  • 耗时数小时,精疲力尽

🤖 脚本自动化

  • 一键填完所有表格
  • 批量下载,全自动
  • 数据自动整理归类
  • 精准执行,零失误
  • 几秒搞定,喝杯咖啡

互动演示

纸上得来终觉浅,下面让你亲身体验插件和自动化脚本的效果。每个演示都有详细指引,放心操作!

demo-01-ad-blocker.html

演示 1:模拟广告拦截器

体验一下"开启广告拦截"前后,网页的变化有多大。

👆

点击下方的开关,切换"广告拦截"的开/关状态,观察页面中广告的变化。

① 查看带广告的页面 ② 开启拦截 ③ 对比效果 ✓
广告拦截:已关闭

📰 今日新闻标题:科技改变生活

🔥 震惊!这个方法让你月入百万![广告]

正文内容:今天我们来介绍最新的科技趋势,人工智能正在深刻改变我们的日常生活……

💊 神奇减肥药,一周瘦 20 斤![广告]

越来越多的企业开始使用 AI 来提高工作效率……

🎰 点击领取新人红包 888 元![广告]
demo-02-auto-fill.html

演示 2:模拟表单自动填写

感受一下脚本帮你"一键填表"的爽感。

👆

先看看空白表单,然后点击"一键自动填写"按钮,看脚本如何秒速搞定。

① 查看空白表单 ② 点击自动填写 ③ 完成 ✓
demo-03-dark-mode.html

演示 3:模拟暗色模式切换

很多网站默认是刺眼的白色背景,暗色模式插件可以一键切换。

👆

点击下方开关,在"白天模式"和"夜间模式"之间切换,观察阅读区域的变化。

① 查看白天模式 ② 切换夜间模式 ③ 感受差异 ✓
暗色模式:已关闭

示例文章:如何高效学习

学习最重要的不是花多少时间,而是用对方法。间隔重复是一种经过科学验证的记忆方法——在不同的时间间隔复习同一内容,能让记忆更持久。配合主动回忆,效果更佳。每天 30 分钟的高效学习,胜过 3 小时的被动翻书。

demo-04-data-extract.js

演示 4:模拟数据提取

电商网页上有很多价格信息,脚本能一键提取所有价格进行汇总。

👆

下方是一个模拟的购物清单。点击"提取全部价格"按钮,看脚本如何自动汇总所有商品价格。

① 浏览商品列表 ② 点击提取价格 ③ 查看汇总结果 ✓
无线蓝牙耳机¥299
机械键盘¥459
USB-C 扩展坞¥189
显示器支架¥128
鼠标垫(大号)¥59
demo-05-batch-rename.js

演示 5:模拟批量重命名

假设你有一堆杂乱的照片文件,脚本能按规则自动重命名。

👆

查看左边杂乱的文件名,然后点击"按规则重命名",看它们如何瞬间变得整齐有序。

① 查看原始文件名 ② 点击批量重命名 ③ 查看结果 ✓
IMG_20240315_random1.jpg
photo_abc123.jpg
DSC00042_edited.jpg
screenshot_xyz.png
webcam_capture_99.jpg
demo-06-scheduler.js

演示 6:模拟定时任务

自动化脚本可以定时执行任务。设定倒计时,看它到时间后自动执行操作。

👆

选择一个倒计时秒数,点击"启动定时任务",看脚本在倒计时结束后自动执行一系列操作。

① 设置倒计时 ② 启动任务 ③ 观察自动执行 ✓
0

现实世界中的工具

了解了概念之后,来看看真实世界中人们都在用哪些工具。你不需要现在就会用,先知道它们的名字和用途就好。

🧩 Chrome 扩展商店

Google 浏览器自带的"应用商店",里面有数十万个免费插件,搜索你需要的功能就能安装。就像手机上的 App Store。

免费 最主流

🐵 Tampermonkey(油猴)

一个特殊的浏览器插件,它允许你运行别人写好的"小脚本"。相当于一个"脚本平台"——你在上面可以找到各种现成的自动化工具。

进阶 脚本平台

⚡ n8n / Make

可视化的自动化工具——不用写代码,像搭积木一样把不同的操作"连接"起来。比如:收到邮件 → 自动保存附件到网盘 → 发消息通知你。

可视化 无需编程

🔗 IFTTT

"If This Then That"(如果…就…)——最简单的自动化工具。设定触发条件和执行动作。比如:如果明天下雨(触发),就提前提醒我带伞(执行)。

最简单 适合入门

今天学到了什么?

让我们回顾一下这一章的核心知识点。