chrome extension系列:第一章——什么是浏览器插件

在谷歌浏览器或谷歌内核的浏览器里,提供了扩展的方式来扩充浏览器的功能与体验

官方的说法是:Chrome 扩展程序可通过自定义界面、观察浏览器事件和修改网络来提升浏览体验。

打开 chrome://extensions,我们平时常见的扩展有:

  • AdBlock
  • 沉浸式翻译
  • 油猴
  • Vue.js devtools / React Developer Tools
  • 身份验证器
  • ModHeader
  • ...

我们可以对上面列出的扩展进行一个总结,来看看它们做了什么,从而去了解扩展可以发挥什么样的作用。


简单地来说,我们可以将它们从功能角度进行归类:

  • 介入网站页面

    • AdBlock:通过DOM移除的方式,清除了页面上的广告
    • 沉浸式翻译:将页面上的英文翻译成中文
  • 提供额外功能

    • 身份验证器:点击扩展会展开一个弹窗,提供复制与添加谷歌码的功能
    • Vue.js devtools / React Developer Tools:在 devtools 里提供新的 tab 页,用于在开发过程中调试程序
  • 拦截、屏蔽或修改网络请求

    • ModHeader:修改网络请求的请求头或重定向

在归类完以后,可以看到扩展能做的事情还是很全面的,它提供了介入网站页面的能力,同时也可以使用平时常见的web技术构建用户界面提供额外的功能,除此之外,还提供了一些较为底层的能力去控制网络。

官方文档:能做的事情developer.chrome.com/docs/extens...

笔者注:得益于 GPT 技术的快速发展,目前谷歌相关的开发者文档都通过 GPT 自动翻译成多种语言了,虽然有些词语还是没有特别准确,但是相较于直接阅读英文文档来说,体验上有了十分大的提升。所以建议在后续的开发过程中,我们可以多看看谷歌官方的开发者文档,这是我们可以阅读到的第一手资料。(记得需要科学上网!)

相关推荐
Onion几秒前
BroadcastChannel 使用:优缺点、场景示例与最佳实践
前端·javascript
东东2332 分钟前
搭建 Vite + React 服务端渲染(SSR)环境
前端·javascript·react.js
上车函予2 分钟前
点击即扩散:使用 View Transition API 实现 UnoCSS 官网同款主题切换动画
前端·javascript·css
星链引擎3 分钟前
生成式 AI 驱动下的智能聊天机器人 技术架构核心实现与场景落地
前端
Asort4 分钟前
React框架深度剖析:设计理念、核心机制与现代生态对比
前端·javascript·react.js
charlie11451419110 分钟前
从模仿到掌握:尝试一下Native CSS手写一个好看的按钮
前端·css·学习·ui
时间的情敌12 分钟前
Vue3+CSS 实现3D卡片动画
前端·css·3d
吃饺子不吃馅18 分钟前
Canvas 如何渲染富文本、图片、SVG 及其 Path 路径?
前端·svg·canvas
王六岁26 分钟前
🐍 前端开发 0 基础学 Python 入门指南:f-strings 篇
前端·javascript·python
一道雷31 分钟前
🚀 Vue Router 插件系统:让路由扩展变得简单优雅
前端·javascript·vue.js