|
要想学习Chome extensions 开发，至少要拥有html、css、JavaScript的基础。如果你有vue的基础更好了，没有就将就看看吧，我也是随便写的。本次使用vue搭建，主要是偷懒不想自己写ui，所以用了elm的UI。好了，废话不多说了，上代码。 一、首先通过vite搭建一个vue项目 npm init vue@latest二、创建项目清单。目前Chome extensions 的清单已经升级到了3的版本，官方说了一大堆3的好处，比如 Manifest V3 代表了扩展平台自十年前推出以来最重大的转变之一。Manifest V3 扩展在安全性、隐私和性能方面得到增强；他们还可以使用更现代的开放网络技术，例如 service workers 和 promises。
1、新建清单2、清单的常见说明manifest_version：这是清单的版本，以前是2，现在是3，建议使用3吧。 name：你的项目名称，你爱填啥都可以。 version：你的项目版本，可以随便填，你可以填写1.0.0 或者0.0.1都行。 description：你的项目简介，爱填啥都行。 icons：你的拓展管理页面的图标，对就是下面那个玩意儿。
[img=0,222]https://cdn.nlark.com/yuque/0/2022/png/199557/1670487636760-eba9ce7d-96e9-4cfd-8add-80f42b3fafb9.png#averageHue=%23fdfdfc&clientId=u283111f1-0708-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=222&id=uaf117f2d&margin=[object%20Object]&name=image.png&originHeight=278&originWidth=518&originalType=binary&ratio=1&rotation=0&showTitle=false&size=23464&status=done&style=none&taskId=u6f3e20c0-ebe7-464b-a13a-111e71b19e1&title=&width=414.4[/img] "icons": {
"16": "icon/icon_16.png",
"32": "icon/icon_32.png",
"64": "icon/icon_64.png",
"128": "icon/icon_128.png",
"256": "icon/icon_256.png"
},action：
default_icon：这是工具栏默认的图标，你可以和上面的设置一样 default_title:这个就是你鼠标放在工具栏图标上面显示的内容。 default_popup：当用户单击工具栏中扩展的操作按钮时，将显示操作的弹出窗口界面页。
"action": {
"default_icon": {
"16": "icon/icon_16.png",
"32": "icon/icon_32.png",
"64": "icon/icon_64.png",
"128": "icon/icon_128.png",
"256": "icon/icon_256.png"
},
"default_title": "来啊，点击我啊",
"default_popup": "index.html"
},
"background": {
"service_worker": "js/background.js",
"type": "module"
},"host_permissions": [
"*://*/*"
], "permissions": [
"cookies","storage","webRequest"
], "content_scripts": [
{
"matches": ["https://*.github.com/*","http://*/*"],
"css" :["css/content.css"],
"js": ["js/content-script.js"]
}
]
三、实战一，使用专属API来获取cookie比如我们在default_popup有一个按钮，我们想点击这个按钮之后可以获取cookie。你可能惊呆了，我们用 document.cookie 就能够获取cookie了，干嘛要用这个拓展插件呢？那是因为你只知道cookie有key和value两个属性吧，这个其他的属性建议你搜索引擎一下。点击之后，我们发送一个事件， <el-button type="primary" size="small" @click="getCookie">获取cookie</el-button>
getCookie(){
chrome.runtime.sendMessage({type:"readCookie"}).then(res=>{
console.log(res.cookie); //这里就是从service_worker脚本反馈过来的内容。
})
}因为我们不能直接获取cookie，只能通过service_worker设置的脚本回去，chrome.runtime.sendMessage 就是告诉后台脚本（使用chrome.runtime.onMessage.addListener监听），我们要干的事情，至于是什么事情，传一个对象过去type:"readCookie"}，然后再接收的时候，就能接收到这个对象了。
//chrome.runtime.onMessage.addListener能监听你的发送消息，
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
let type = request.type;
if(type=="readCookie"){
//读取cookie。在读取cookie之前，一定要再清单（permissions）中申请cookie权限
/**
chrome.cookies.getAll({domain: ".dianping.com"},(cookie)=>{
//这里就是全部的cookie，入股指向获取某个那么可以用get，不用getAll
//入股不想用地狱回调，可以使用async 和 await配合使用
console.log(cookie);
});
*/
//这里应该封装在一个async函数，懒得写了。
let cookies = await chrome.cookies.getAll({
domain: ".dianping.com"
});
//响应一个对象给请求事件。
sendResponse({"cookie":cookies});
}
}
}
四、网页中嵌入脚本定时请求数据 "content_scripts": [
{
"matches": ["https://mp.weixin.qq.com/*","http://*/*"],
"css" :["css/content.css"],
"js": ["js/content-script.js"]
}
]这样你可以再content-script.js中，import axios 进来，然后使用要给定时器开始卡卡卡的请求数据，卡卡卡的爬取数据了，（爬虫可能违法，此教程知识用来学习，不教唆别人违法）。 总结：恭喜看到这里你从一个小白，入门了chrome 拓展开发，想要精进，那么就自己去看文档吧：https://developer.chrome.com/docs/extensions/
| 
发表于 2022-12-8 17:06:00
发表于