Logo

Logo

Chrome 插件开发入门

Pastore Antonio
Pastore Antonio 2024年06月03日
1132 阅读 0 评论 约 1554 字 阅读约 4 分钟

热门插件

安全类 LastPass:密码管理器

一款Freemium的跨平台在线密码管理工具。 旨在通过将用户的密码集中在云端以解决密码疲劳。 LastPass使用Web界面为基础,但还提供使用于许多现代浏览器的插件和小书签。

  • 存储用户名和密码,自动登录
  • 通过保存地址、信用卡号等来快速填写表格
  • 保存护照、保险卡和其他任保护的东西

效率类 Flash Switcher:闪电切换器

专注于提高浏览器操作效率、体验的工具,聚焦最常用的多选项卡 Tab 切换、千级甚至万级书签检索、以及海量的搜索历史,践行”现在有用的,将来大概率有用的”理念,实现任意数量 Tab、书签、历史的常数级、沉浸式操作,提升效率,节省海量的毛细时间。

  • 目标: 将浏览器打造成【第二大脑🧠】
  • 特征🌩 : 将浏览器操作效率提高到极致,无视Tab、书签、历史的数量和深度,实现常数级的效率保证

插件意义

场景:🔖 书签操作

书签是浏览器最重要、也是生活日常生活工作最常用的功能之一

  • 核心问题:长耗时操作

在书签数量大、层级深、归类不清晰等背景下,每一次的添加、修改、查询书签都是极其耗时的长、重操作,大大限制了书签的数量和作用。

  • 插件式方案

秒级定位: 无视书签数量、层级深度
**丝滑操作:**语义化快捷键,当前页面,不跳转、不分散主精力
**数量级提升:**可以轻松管理千级甚至万级数量的书签,大幅提升书签数量和质量


插件核心概念

根据个人习惯、生活、工作场景的需要,利用浏览器插件开发机制和API,将自己特定大量、重复性需求插件化、自助化。

哪里可以扩展?

Chrome 的界面布局和插件式设计决定了其可能的扩展点和机制。

Manifest.json:配置入口

用以配置应用名、版本,以及所需的系统权限,最重要、不可缺少,必须置于根目录

  • manifest_version: 插件版本

目前只支持上架和更新 v3 版本,v2 不再支持,必须在 2023 年前全部替换。且 V3 版的上架审核优先级更高,周期更短。

v3版本对 v2 版的组件和API进行了大幅度的优化和安全增强,最主要的变动如下图

  • Permission 权限

需要申请正确的权限才可以调用相应的API,如操作选项卡的 tabs 权限。

最小权限原则:尽量使用必要的权限,过多的、敏感权限将导致审核时间大大延长,甚至拒绝

在这里插入图片描述

v3版本中Api Permission 和 Host Permission 分离,以更清晰的界定权限类别。

在这里插入图片描述

Service Worker: 中央处理器

本质上是浏览器在后台运行的脚本,它是完全独立于它正在处理或服务的网页。它们充当了 web 应用程序、浏览器和网络之间的代理服务器。service worker 赋予 Web 应用程序像原生应用程序一样工作的能力

  • 无状态瞬时组件:在浏览器启动后初始化执行,便销毁
  • 事件驱动: 通过注册各类事件监听器,作为其他组件间的中央处理和通信单元
  • 权限最大: 可以调用除了 Dom 外的大部分API,完成其他组件不可用执行的功能

在这里插入图片描述

在这里插入图片描述

Popup: 弹窗

点击browser_action或者page_action图标时打开的一个小窗口网页,焦点离开网页就立即关闭,一般用来做一些临时性的交互。

  • 大部分插件主要的交互区域、工作方式
  • 最大空间:800 x 600

ContentJs: 内容脚本

向当前主页面窗口中注入脚本的一种形式,最常见的比如:广告屏蔽、页面CSS定制。

  • 突破POP窗口大小的局限性,自由度更高
  • 注意CSS样式污染,会导致部分宿主页面变形

插件DIY – Rename Tab

背景

部分网站的所有子页面的标题相同,当打开众多时,很难通过标题快速区分具体是哪个页面,影响并发多开基数。

功能需求

支持手动或自动修改当前页面Tab标题,增加Tab可辨识性、可搜索性。

链接

查看完整代码

橙子主题打折出售

其实我不卖,主要是这里是放广告的,所以就放了一个
毕竟主题都没做完,卖了也是坑.

购买它

附件下载

共 22 个文件
0b6e8ef40992a27cf85dcfd50a93d720
JPG 52.5 KB
87d571c852957a7ecd8109fe00c308b8
PNG 90.6 KB
a9c551a8780390de6a8de15bc7ce56dc
JPG 43.7 KB
d3be01fa80484916f7b8cae8e1413c7b
PNG 74.7 KB
f02f4afa5c6de836066bfafe5d041a1c
PNG 215.1 KB
70a5482544b10a76e39e4bee13121890
PNG 18.6 KB
49120d5a2f67cfb6439bbc549a7f8477
PNG 24.5 KB
9d3e8f8c876c6e333df5c696c91508a7
PNG 362.6 KB
7e0869889ae87462b65043fbd4e92304
PNG 99.6 KB
79b2f9a6beeb4012d95441fcbb38f0f6
PNG 335.2 KB
635eee6bd64b860ae46538a4c731551b
PNG 42.6 KB
a9149bfda7e7e4662ff20a1deb38e49b
PNG 27.5 KB
56fedafacc6dcb1b4b6ca866d0c484b5
PNG 19.4 KB
在这里插入图片描述
PNG 222.8 KB
在这里插入图片描述
PNG 35.0 KB
在这里插入图片描述
PNG 114.2 KB
在这里插入图片描述
PNG 205.5 KB
c91572e9cb6bd34fdeda29d7da08ba31
PNG 54.4 KB
479b2d6efc180052cb5c2841dff93ddc
PNG 43.0 KB
4ddb8e4f3605177fada335621e523571
PNG 48.2 KB
a0acf36f21200645cb36db00bc03392f
JPG 103.3 KB
6f5514c934bb2df09a9d62a9899b898c
PNG 204.2 KB
部分文章可能存在转载,如果涉及到侵权,请联系删除文章。

探索AIGC相关的精彩内容,共 15 篇文章

Azure AI 服务之语音识别

简介 Azure AI 服务中的语音识别 API 是微软提供的一项先进技术,旨在帮助开发者轻松实现语 ... Chrome 插件开发入门

2026-02-17 · Xzavier Aaron
MCP | 一文详解什么是 MCP以及 MCP 可以做什么

一、什么是 MCP MCP(Model Context Protocol)是一个专为大型语言模型(L ... Chrome 插件开发入门

2026-02-14 · Shen, Luke
你的工作流程,值得一个“全自动数字分身”:录制、截图、成文,一气呵成

一、一句话认识 TestFlow Recorder 在数字化工作环境中,如何准确记录操作步骤并生成清 ... Chrome 插件开发入门

2026-02-14 · Xzavier Aaron
Flowise 前端框架配置指南

用户需求 问题:有没有适合配置 Flowise 的前端框架? 目标:寻找类似 Open WebUI ... Chrome 插件开发入门

2026-02-14 · Xzavier Aaron