「本文已参与好文召集令活动,点击查看:后端、大前端双赛道投稿,2万元奖池等你挑战!」
你会使用谷歌浏览器api开发js脚本插件吗?
你会使用谷歌浏览器api开发拦截广告的js脚本插件吗?
你会使用谷歌浏览器api开发拦截网页ajax请求脚本插件吗?
等等。。。。
不管你会不会,今天看这篇文章你就会了,废话不多说,直接进入主题
一:创建插件项目
- 在桌面创建一个文件夹,命名demo
- 在demo文件夹下创建一个js文件夹和一个manifest.json文件。
- 然后再创建content.js、popup.html、background.js、静态文件等。
- 最后在js文件夹下创建一个index.js文件,最终目录格式如下
demo/
|- css/ 样式
|- index.css
|- js/ 脚本
|- index.js 主页面脚本
|- jq.min.js 第三方库脚本
|- img/ 图片地址
|- background.js/ 后台任务,通信
|- content.js/ 插件行为脚本
|- manifest.json 权限声明
|- popup.html 主页面
二:核心介绍
2.1 manifest.json
这是一个Chrome插件最重要也是必不可少的文件,用来配置所有和插件相关的配置,必须放在根目录。其中,manifest_version、name、version3个是必不可少的,description和icons是推荐的。
下面给出的是一些常见的配置项,均有中文注释。
{
// 清单文件的版本,这个必须写,而且必须是2
"manifest_version": 2,
// 插件的名称
"name": "demo",
// 插件的版本
"version": "1.0.0",
// 插件描述
"description": "简单的Chrome扩展demo",
// 图标,一般偷懒全部用一个尺寸的也没问题
"icons":
{
"16": "img/icon.png",
"48": "img/icon.png",
"128": "img/icon.png"
},
// 会一直常驻的后台JS或后台页面
"background":
{
// 2种指定方式,如果指定JS,那么会自动生成一个背景页
"page": "background.html"
//"scripts": ["js/background.js"]
},
// 浏览器右上角图标设置,browser_action、page_action、app必须三选一
"browser_action":
{
"default_icon": "img/icon.png",
// 图标悬停时的标题,可选
"default_title": "这是一个示例Chrome插件",
"default_popup": "popup.html"
},
// 当某些特定页面打开才显示的图标
/*"page_action":
{
"default_icon": "img/icon.png",
"default_title": "我是pageAction",
"default_popup": "popup.html"
},*/
// 需要直接注入页面的JS
"content_scripts":
[
{
//"matches": ["http://*/*", "https://*/*"],
// "<all_urls>" 表示匹配所有地址
"matches": ["<all_urls>"],
// 多个JS按顺序注入, content.js 想调用第三方库就必须再此前面引入对应的第三方库
"js": ["js/jq.min.js", "js/js.cookie.min.js", "content.js"],
// JS的注入可以随便一点,但是CSS的注意就要千万小心了,因为一不小心就可能影响全局样式
// "css": ["css/custom.css"],
// 代码注入的时间,可选值: "document_start", "document_end", or "document_idle",最后一个表示页面空闲时,默认document_idle
"run_at": "document_start",
"all_frames": true
},
// 这里仅仅是为了演示content-script可以配置多个规则
// {
// "matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
// "js": ["js/show-image-content-size.js"]
// }
],
// 权限申请
"permissions":
[
"contextMenus", // 右键菜单
"tabs", // 标签
"notifications", // 通知
"webRequest", // web请求
"webRequestBlocking",
"storage", // 插件本地存储
"http://*/*", // 可以通过executeScript或者insertCSS访问的网站
"https://*/*" // 可以通过executeScript或者insertCSS访问的网站
],
// 普通页面能够直接访问的插件资源列表,如果不设置是无法直接访问的,普通页面想调用谷歌的api必须在此配置
"web_accessible_resources": [
"js/jquery.min.js",
"js/js.cookie.min.js",
"js/main.js",
"popup.html"
],
// 插件主页,这个很重要,不要浪费了这个免费广告位
// "homepage_url": "https://www.baidu.com",
// 覆盖浏览器默认页面
// "chrome_url_overrides":
// {
// 覆盖浏览器默认的新标签页
// "newtab": "newtab.html"
// },
// Chrome40以前的插件配置页写法
// "options_page": "options.html",
// Chrome40以后的插件配置页写法,如果2个都写,新版Chrome只认后面这一个
// "options_ui":
// {
// "page": "options.html",
// 添加一些默认的样式,推荐使用
// "chrome_style": true
// },
// 向地址栏注册一个关键字以提供搜索建议,只能设置一个关键字
// "omnibox": { "keyword" : "go" },
// 默认语言
// "default_locale": "zh_CN",
// devtools页面入口,注意只能指向一个HTML文件,不能是JS文件
// "devtools_page": "devtools.html"
}
2.2 manifest.json中的content-scripts属性
所谓content-scripts,其实就是Chrome插件中向页面注入脚本的一种形式(虽然名为script,其实还可以包括css的),
借助content-scripts我们可以实现通过配置的方式轻松向指定页面注入JS和CSS(如果需要动态注入,可以参考下文),
最常见的比如:广告屏蔽、定制页面,等等。
content-scripts和原始页面共享DOM,但是不共享JS,如要访问页面JS(例如某个JS变量),只能通过injected js来实现。 content-scripts不能访问绝大部分chrome.xxx.api
,除了下面这4种,其余的api想调用的话可以与backgroun.js
实现通信调用
1、chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)
2、chrome.i18n
3、chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage) // 通信
4、chrome.storage // 缓存
2.3 manifest.json中的background属性(一般负责插件与页面通信)
插件后台脚本,它的生命周期是插件中所有类型页面中最长的,它随着浏览器的打开而打开,随着浏览器的关闭而关闭,
所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面。
background的权限非常高,几乎可以调用所有的Chrome扩展API(除了devtools),
而且它可以无限制跨域,也就是可以跨域访问任何网站而无需要求对方设置CORS。
配置中,background可以通过page指定一张网页,
也可以通过scripts直接指定一个JS,Chrome会自动为这个JS生成一个默认的网页:
{
// 会一直常驻的后台JS或后台页面
"background": {
// 2种指定方式,如果指定JS,那么会自动生成一个背景页,一般使用scripts
// "page": "background.html"
"scripts": ["background.js"]
"persistent": false // 按需加载
},
}
2.4 manifest.json中的popup属性(一般用于显示基本交互页面)
popup是点击browser_action或者page_action图标时打开的一个小窗口网页,
焦点离开网页就立即关闭,一般用来做一些临时性的交互
popup可以包含任意你想要的HTML内容,并且会自适应大小。可以通过default_popup字段来指定popup页面,也可以调用setPopup()方法。
配置方式:
{
"browser_action":
{
"default_icon": "img/icon.png",
// 图标悬停时的标题,可选
"default_title": "这是一个示例Chrome插件",
"default_popup": "popup.html"
}
}
Copy
需要特别注意的是,由于单击图标打开popup,焦点离开又立即关闭,所以popup页面的生命周期一般很短,需要长时间运行的代码千万不要写在popup里面。
在权限上,它和background非常类似,它们之间最大的不同是生命周期的不同,popup中可以直接通过chrome.extension.getBackgroundPage()获取background的window对象。
三:通信流程
background.js 监听tabs是否被点击 ---> content.js负责插入iframe页面,并控制iframe显示或者隐藏 ----> 主页面popup.html引入对应的js与第三方插件,写入对应的业务逻辑 ----> 如若popup.html需要获取监控页面的信息,因iframe跨域问题,需先与background.js进行通信,由background.js再通知content.js ----> 实现插件的所有业务逻辑
// 发送方
// 第一个参数固定是当前插件的id,因为chrome.runtime是共性的,所以必须指定id传递通信
// 第二个参数固定是一个对象,发送方与接收方没有唯一判断值,需要自己定义唯一属性,type(发送的通信类型)/to(接收方的名称)
chrome.runtime.sendMessage(chrome.runtime.id, {
type: 'receiveFind',
to: 'background',
// ...其他属性,可以自定义传递
});
// 接收方
chrome.runtime.onMessage.addListener(msg => {
if (msg.type === 'getCookie' && msg.to === 'background') {
// 处理对应的逻辑
} else if (msg.type === 'closeMonitor' && msg.to === 'background') {
// 处理对应的逻辑
}
// .....
});
四:安装流程
- 安装插件
打开谷歌浏览器,找到更多工具->扩展程序
然后,点击“打包扩展程序”按钮
选择demo文件夹,点击打包开始
此时在demo文件夹下生成两个文件。如果需要重新打包,则需要先删除这两个文件。
最后,安装打包的插件 选择“加载已解压的扩展程序”
选择content文件夹,插件就安装成功了。
补充
今天的技术就介绍到这里了,大家有什么建议的或者想学什么知识的可以下面评论一下,我会第一时间看,说不定下一篇就是你想看的内容了,或者有什么问题我们都可以讨论,谢谢大家,创作不易,请多多支持点赞、分享