Logo

Chrome 插件开发入门

photo

2024年06月03日

热门插件

安全类 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可辨识性、可搜索性。

链接

橙子主题打折出售

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

购买它
本文为原创文章,请注意保留出处!
从0到1开发chrome插件 2024年06月03日

一.文件组成background.js后台文件,从安装插件后开始生效content-scri...从0到1开发chrome插件

热门文章

修复群晖Synology Drive client右键菜单缺失问题 本教程主要解决windows10右键菜单中没有SynologyDrive菜单的问题,整体思路是找到...修复群晖SynologyDriveclient右键菜单缺失问题 作者:Pastore Antonio
2005 浏览量
docker如何查看一个镜像内部的目录结构及其内部都有哪些文件 前言:有时候我们会在docker上下载一个镜像,或者是上传一个镜像到docker上,甚至有时候就是在...docker如何查看一个镜像内部的目录结构及其内部都有哪些文件 作者:Pastore Antonio
1944 浏览量
Adobe Acrobat Pro 激活 这里记录了一些AdobeAcrobat的激活教程和组件。浏览量:1,825 作者:Pastore Antonio
1668 浏览量
追寻日出,找回自己 为什么我要去追寻日出?其实我是一个很懒的人,每次都起不来,直到有一次我在租房中睡到了大天亮,阳光照...追寻日出,找回自己 作者:Pastore Antonio
1625 浏览量
Swagger2 接口多级分组方法 swagger无疑是Java开发的最佳伴侣,接口非常方便调试;当然也有用Postman,因人而异吧...Swagger2接口多级分组方法 作者:Pastore Antonio
1532 浏览量