本人是一个web前端开发工程师,主要是vue框架,整理了一些Chrome扩展,今后也会一直更新,有好建议的同学欢迎评论区分享讨论 ;-)
序号 | 文章 |
---|---|
1 | 浏览器扩展安装 |
2 | 浏览器扩展(代码注入)简易DEMO |
3 | 浏览器扩展(代码注入)较完善脚手架 |
4 | Vue版本浏览器扩展(代码注入)最终版框架 |
5 | 较完善脚手架版本源码 |
5 | Vue版本源码 |
文章目录
前言
每次开发一个chrome谷歌扩展程序需要重新翻阅资料后,重新搭个框架,这次想要弄个较完善的版本放在GIT上,需要的时候能快速开发。
如果只需要执行JS(content_scripts)代码,可前往第一篇文章(新手建议也前往)
这里是Git 地址点击 此处
一、软件架构
- manifest.json 等文件是浏览器插件配置文件,必须存在,具体配置信息查看此处。manifest1.json,manifest2.json 是备份用的 manifest1.json为测试环境;manifest2.json 为线上环境。
- contentScripts1.js 以及 contentScripts2.js 主要给manifest1.json,测试的时候,避免修改文件后,需要手动更新插件…
- js 存放主要的js文件,这里主要是content_scripts的脚本,测试环境也只限于此处使用。
- css 存放主要的css文件。
- image 存放主要的图片文件。
- utils 存放第三方JS工具之类。
- devtools 存放着F12调试中另起的panel。
- background 存放background用于执行chrome内置API,例如代码中的捕获ajax网络请求。
二、捕获ajax网络
1.引入
这里的background只能配置page,或者scripts 两者之一,否者会报错。
可查看=> 文档
然而page属性也只是继续调用scripts~~
2. background 捕获ajax请求并发送到content_scripts
代码如下(示例):
/*
* @Author: Penk
* @LastEditors: Penk
* @LastEditTime: 2022-04-21 23:20:34
* @FilePath: \plugin-demo\background\background.js
*/
// 需要拦截请求URL
const requestUrl = 'https://www.baidu.com/s';
// 封装好对象,避免代码太多太乱了...(个人习惯)
var webRequest = {
// 开始监听-初始化
auto() {
chrome.webRequest.onCompleted.addListener(
this.logResponse, {
urls: ["*://*/*"]
},
);
},
//监听请求
logResponse(responseDetails) {
if (responseDetails.url.includes(requestUrl)) {
sendMessage.sendMessageToContentScript({
cmd: 'response',
data: responseDetails
});
// 弹框
chrome.notifications.create('cakeNotification', {
"type": "basic",
"iconUrl": chrome.runtime.getURL("images/logo.png"),
"title": "Time for cake!",
"message": "Something something cake"
});
}
},
}
var sendMessage = {
// 获取当前选项卡ID
getCurrentTabId(callback) {
chrome.tabs.query({
active: true,
currentWindow: true
}, function (tabs) {
if (callback) callback(tabs.length ? tabs[0].id : null);
});
},
// 向标签中的content_script发送消息
sendMessageToContentScript(message, callback) {
this.getCurrentTabId((tabId) => {
console.log("tabId:", tabId);
chrome.tabs.sendMessage(tabId, message, function (response) {
if (callback) callback(response);
});
});
}
}
webRequest.auto();
3. content_scripts 接受信息
// 不要使用 manifest1.json 只在线上有效...
// 不要使用 manifest1.json 只在线上有效...
chrome.extension.onMessage.addListener(function (request, sender, sendResponse) {
if (request.cmd == 'response') console.log(request);
sendResponse('我收到了你的消息!');
});
4. 使用
点击搜索=>发送请求=>捕获请求=>发送给content_scripts
三、devtools
1.引入
2.使用
总结
例如:这里面并没有很详细的讲解,只是展示功能,有需要的再根据代码去网上查阅相关API说不定能事半功倍~