chrome插件开发

2,633 阅读6分钟

什么是chrome插件

首先要明确一个观念,这种扩展程序,实际上不是一个exe、app之类的程序,下载了本地打开运行安装,本质上,它就是一个网页,写的用的都是前端的语言,高档点说是一个程序,通俗来讲, 就是运行在浏览器上的一个网站,网页。

严格来讲,我们正在说的东西应该叫Chrome扩展(Chrome Extension),真正意义上的Chrome插件是 更底层的浏览器功能扩展,可能需要对浏览器源码有一定掌握才有能力去开发。

Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件,它其实就是一个由HTML、 CSS、JS、图片等资源组成的一个.crx后缀的压缩包

image.png

为什么是Chrome插件而不是Firefox插件

  1. Chrome占有率更高,更多人用

  2. 开发更简单;

  3. 应用场景更广泛,Firefox插件只能运行在Firefox上,而Chrome除了Chrome浏览器之外,还可以运行在所有webkit内核的国产浏览器,比如360极速浏览器、360安全浏览器、搜狗浏览器、QQ浏览器等等

  4. 除此之外,Firefox浏览器也对Chrome插件的运行提供了一定的支持;

常见的chrome插件

image.png

插件能做哪些事情,学习chrome插件有什么意义

  • 书签控制
  • 下载控制
  • 窗口控制
  • 标签控制
  • 网络请求控制,各类事件监听
  • 自定义原生菜单
  • 完善的通信机制
  • 等等…

image.png

应用场景

  • 谷歌浏览器自定义桌面
  • 网页爬虫
  • 安全拦截
  • 广告过滤
  • 网站动态换肤
  • JSON格式化
  • 网站自动化
  • 等等…

image.png

插件如何和工作的

  • 浏览器进程 (Browser Process):负责浏览器的TAB的前进、后退、地址栏、书签栏的工作和处理浏览器的一些不可见的底层操作,比如网络请求和文件访问。
  • 渲染进程 (Renderer Process):负责一个Tab内的显示相关的工作,也称渲染引擎。
  • 插件进程 (Plugin Process):负责控制网页使用到的插件
  • GPU进程 (GPU Process):负责处理整个应用程序的GPU任务

image.png

浏览器多进程

image.png

开发与调试

image.png

加载程序入口

  1. Chrome插件没有严格的项目结构要求,只要保证本目录有一个manifest.json即可,也不需要专门的IDE,普通的web开发工具即可。也可以直接在地址栏输入 chrome://extensions 访问

  2. 勾选开发者模式即可以文件夹的形式直接加载插件,否则只能安装.crx格式的文件。Chrome要求插件必须从它的Chrome应用商店安装,其它任何网站下载的都无法直接安装,所以,其实我们可以把crx文件解压,然后通过开发者模式直接加载。

  3. 开发中,代码有任何改动都必须重新加载插件,只需要在插件管理页按下Ctrl+R即可,以防万一最好还把页面刷新一下。

image.png

组成插件的基本元素

  • 清单(manifest.json)用来配置插件的版本、权限以及后台脚本、内容脚本、配置页面、弹出页面等,所有的配置请查看官方开发者文档
  • 内容脚本(content-script.js),注入到已加载的浏览器页面上下文中执行的js文件,如果页面包含iframe,内容脚本会在每个iframe内嵌页面上下文中执行
  • 后台脚本(background.js)运行在后台的js文件,通常用来监听事件,注意:后台脚本不能访问DOM
  • 弹窗页面(popup page)用户点击Chrome右上角的插件图标时,弹出的页面

image.png

Manifest.json

image.png

content-scripts

所谓content-scripts,其实就是Chrome插件中向页面注入脚本的一种形式(虽然名为script,其实还可以包括css的),借助content-scripts我们可以实现通过配置的方式轻松向指定页面注入JS和CSS

image.png

background

是一个常驻的页面,它的生命周期是插件中所有类型页面中最长的,它随着浏览器的打开而打开,随着浏览器的关闭而关闭,所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面

background的权限非常高,几乎可以调用所有的Chrome扩展API且它可以无限制跨域,也就是可以跨域访问任何网站而无需要求对方设置CORS

image.png

popup

popup是点击browser_action打开的一个小窗口网页,焦点离开网页就立即关闭,一般用来做一些临时性的交互,需要特别注意的是,由于单击图标打开popup,焦点离开又立即关闭,所以popup页面的生命周期一般很短

image.png

插件基本架构

chrome 可以打开多个浏览器窗口,而一个窗口会有多个 tab

image.png

自定义右键菜单

通过开发Chrome插件可以自定义浏览器的右键菜单,主要是通过chrome.contextMenusAPI实现,右键菜单可以出现在不同的上下文,比如普通页面、选中的文字、图片、链接,等等

image.png

override(覆盖特定页面)

使用override页可以将Chrome默认的一些特定页面替换掉,改为使用扩展提供的页面

扩展可以替代如下页面

  1. 历史记录:从工具菜单上点击历史记录时访问的页面,或者从地址栏直接输入 chrome://history
  2. 新标签页:当创建新标签的时候访问的页面,或者从地址栏直接输入 chrome://newtab
  3. 书签:浏览器的书签,或者直接输入 chrome://bookmarks

image.png

devtools扩展介绍

每打开一个开发者工具窗口,都会创建devtools页面的实例,F12窗口关闭,页面也随着关闭,所以devtools页面的生命周期和devtools窗口是一致的。devtools页面可以访问一组特有的DevTools API以及有限的扩展API,这组特有的DevTools API只有devtools页面才可以访问

  • chrome.devtools.panels:面板相关
  • chrome.devtools.inspectedWindow:获取被审查窗口的有关信息
  • chrome.devtools.network:获取有关网络请求的信息;

image.png

devtools(开发者工具)

自定义一个和多个和Elements、Console、Sources等同级别的面板

image.png

devtools(开发者工具)

自定义侧边栏(sidebar),目前只能自定义Elements面板的侧边栏;

image.png

权限对比

image.png

调试方法对比

image.png

互相通信概览

image.png

Chrome extension与Native app通信

image.png

实现两个简单小插件

image.png

插件打包

image.png

插件发布

  1. 需要注册谷歌账号,进入 chrome.google.com/webstore/de…
  2. 提交填写插件的基本信息
  3. 需要绑定银行支持双币交易的银行卡,发布插件需要5美元

基于vue+ts插件的脚手架

image.png

插件下载与安装

插件下载与安装 社区下载,注意需要开启开发者模式,直接拖入插件管理页面

  1. 极简插件:chrome.zzzmh.cn/#/extension
  2. Gugeapps:www.gugeapps.net/
  3. 插件迷:www.extfans.com/
  4. 画夹:huajiakeji.com/

开源的chrome插件集合

image.png

image.png