1、什么是谷歌浏览器插件
谷歌浏览器插件官方名称是扩展。只不过大家都统一习惯性叫插件。所以接下来文中也以插件来命名。
官方文档介绍什么是扩展,以及API参考和核心模块和搭建一个简单插件教程。大家可以前往官方文档查看。这里就不一一介绍了。
简单说下manifest.json 相关配置字段说明。
manifest.json
// 扩展名称
"name": "谷歌插件",
// 版本。由1到4个整数构成。多个整数间用"."隔开
"version": "1.0",
// manifest文件版本号。Chrome18开始必须为2
"manifest_version": 2,
// 描述。132个字符以内
"description": ",
// 扩展图标。推荐大小16，48，128
"icons": {
"16": "image/icon16.png",
"48": "image/icon48.png",
"128": "image/icon128.png"
},
// 语言
"default_locale": "en",
// 地址栏右侧图标管理，含图标及弹出页面的设置等
// 建议至少保留一个设置，不然扩展图标是暗的
"browser_action": {
"default_icon": "",
"default_title": "",
"default_popup": ""
},
// 地址栏最后附加图标。含图标及行为等
"page_action": {
"default_icon": "",
"default_title": "",
"default_popup": ""
},
// 主题，用于更改整个浏览器的外观
"theme": {},
// 指定扩展需要跳转到的URL
"app": {},
// 指定扩展进程的background运行环境及运行脚本
"background": {
"scripts": [ ],
},
// 替换页面
"chrome_url_overrides": {
},
// 指定在web页面运行的脚本/插入的css及运行/插入时机
"content_scripts": [],
// 安全策略
"content_security_policy": ",
"file_browser_handlers": [],
// 扩展的官方主页
"homepage_url": "http://xxx",
// 插件在隐私模式下的配置
"incognito": "spanning",
// 用户操作意图描述
"intents": {},
// 扩展唯一标识。不需要人为指定
"key": ",
// 扩展所需chrome的最小版本
"minimum_chrome_version": "1.0",
// 消息与本地处理模块映射
"nacl_modules": [],
// 是否允许脱机运行
"offline_enabled": true,
// ominbox即地址栏。用于响应地址栏的输入事件
"omnibox": {
"keyword": "myKey"
},
// 选项页。用于在扩展管理页面跳转到选项设置
"options_page": "options.html",
// 申请权限
"permissions": [ ],
// 扩展。可调用第三方扩展
"plugins": [],
// 指定所需要的特殊技术。目前只支持"3D"
"requirements": {},
// 自动升级
"update_url": "",
// 指定资源路径，为String数组
"web_accessible_resources": []
常用
name 扩展名称。
version 插件的版本。
manifest_version manifest配置文件版本。
description 对于插件功能的描述。
icons 插件的图标 可以为插件找一个好看的图标。
browser_action 可以定义插件的图标，点击插件时弹出的页面，以及插件的标题，建议始终保留一个，直接不设置这个属性图标会是灰色的，设置了后才会亮起来。
background 背景页，扩展进程的背景运行环境，可以拦截修改请求等等。
content_scripts 内容脚本，可以指定在什么时机向什么页面插入什么脚本或者css资源
permissions 权限申请项，比如存储权限storage，请求拦截权限webRequest, webRequestBlocking等等。
2、如何简单实现插件来拦截网络请求
谷歌的插件版本目前有v2 和v3 。不同的版本api有些改变，是不相互兼容的。
下面是使用用v2版本api来实现插件拦截网站请求的
方式一：
background.js
//监听所有请求
chrome.webRequest.onBeforeRequest.addListener(
function(info) {
console.log(info.url);
chrome.tabs.sendMessage(details.tabId, details, function(response) {
// 此处可以修改response
});
return ({cancel: false});
},
({
urls: ["*://*/*"],
types: ["script"]
}),
["blocking"]);
在manifest.json注入权限
"permissions": [
"tabs",
"storage",
"activeTab",
"scripting",
"<all_urls>",
"webRequest",
"webRequestBlocking"
]
"background": {
"service": "background.js"
},
方式二：
核心代码：
创建main.js
let interceptor = {
urls: [],
originalXHR: window.XMLHttpRequest,
originalFetch: window.fetch.bind(window),
myXHR: function () {
return interceptor.originalXHR(...args).then((response) => {
// 此处可以修改response
})
},
myFetch: function (...args) {
return interceptor.originalFetch(...args).then((response) => {
// 此处可以修改response
})
}
}
window.XMLHttpRequest = interceptor.myXHR
window.fetch = interceptor.myFetch;
网络请求方式fetch/xhr
所以需要分别处理两种情况。
所有的请求都会在response中获取url,以及返回的相关数据。
可在这里处理你想要处理的逻辑。
将mian.js注入到页面中
需要新建一个script.js
var mainFile = chrome.extension.getURL('./main.js')
var scriptTag = document.createElement('script')
scriptTag.type = 'text/javascript'
scriptTag.src = mainFile
document.documentElement.appendChild(scriptTag)
拦截请求是需要申请权限的
在manifest.json加入
"permissions": [
"storage",
"scripting",
"<all_urls>"
],
"content_scripts": [
{
"css": [
"css/index.css"
],
"matches": [
"<all_urls>"
],
"js": [
"./script.js"
]
}
],
"web_accessible_resources": ["inject/main.js"]
在这推荐一个开源请求拦截插件：ajax interceptor
大家可以阅读相关的源码。我也是从中学习到的。后续会更新v3版的网络请求拦截。感谢大家的观看。如有问题，欢迎评论区交流。
