Chrome 插件开发入门

时间:2022-11-19 16:57:27

热门插件

安全类 ​​LastPass:密码管理器​

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

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

Chrome 插件开发入门

效率类 ​​Flash Switcher:闪电切换器​

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

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

Chrome 插件开发入门

插件意义

场景:???? 书签操作

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

Chrome 插件开发入门


  • 核心问题:长耗时操作

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

Chrome 插件开发入门

  • 插件式方案

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

Chrome 插件开发入门

Chrome 插件开发入门


插件核心概念

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

Chrome 插件开发入门


哪里可以扩展?

Chrome 插件开发入门

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

Chrome 插件开发入门

Manifest.json:配置入口

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

  • manifest_version: 插件版本

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

Chrome 插件开发入门

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

Chrome 插件开发入门

  • Permission 权限

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

Chrome 插件开发入门

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

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

Chrome 插件开发入门

Service Worker: *处理器

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

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

Chrome 插件开发入门

Popup: 弹窗

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

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

ContentJs: 内容脚本

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

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

Chrome 插件开发入门

插件DIY - Rename Tab

背景

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

功能需求

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

Chrome 插件开发入门

链接