前言
前几年使用过谷歌浏览器扩展v2,然后今天想编写一个扩展发现了很多问题,然后想编写一篇文章进行总结一下,v3跟比v2有挺多差距的,具体的大家可以去看看官网文档
开始
开始之前先介绍几个网站
项目结构
注意事项一(service-worker使用)
service-worker.js 就是 background.js 它必须在根目录
ps:如果你想看它的运行情况,需要单独为扩展插件打开控制台(扩展 - 三个点 - 审查弹出内容)
注意事项二(manifest.json配置)
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"manifest_version": 3,
"permissions": [
"declarativeContent",
"storage",
"activeTab"
],
"externally_connectable": {
"matches": ["*://*.xxxxxx.com/*"]
},
"background": {
"service_worker": "service-worker.js"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["js/jquery-1.8.3.js", "js/content.js"]
}
],
"web_accessible_resources": [
{
"matches": ["<all_urls>"],
"resources": [ "js/inject.js", "js/jquery-1.8.3.js"]
}
],
"action":{
"default_popup": "popup.html",
"default_icon": "img/1.png",
"default_title": "Latest Covid Report"
},
"icons": {
"16": "img/1.png",
"32": "img/1.png",
"48": "img/1.png",
"128": "img/1.png"
}
}
注意事项三(如何发送请求)
content.js
chrome.runtime.sendMessage(
{
type: 'post',
url: "https://xxxx.com/api/users/login",
data: {
url: 'test'
}
},
function response(res) {
console.log("回调...")
console.log(res)
}
)
service-worker.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
console.log("addListener...")
console.log(request)
switch(request.type) {
case 'get':
fetch(request.url)
.then(function(response) { sendResponse(response.json()) })
.then(function(json) { sendResponse(json) })
.catch(function(error) { sendResponse(null) });
break;
case 'post':
fetch(request.url, {
method: 'POST',
mode: 'cors',
credentials: 'include',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: JSON.stringify(request.data)
})
.then(function(response) {
console.log(response)
sendResponse(response.json())
})
.then(function(json) {
console.log(json)
sendResponse(json)
})
.catch(function(error) {
console.log(error)
sendResponse(null)
});
break;
// 你可以定义任意内容,使用sendResponse()来返回它
case 'test':
sendResponse({'msg': 'test'});
break;
}
});
注意事项四(如何注入js)
content.js
// 可以操作当前页面中的DOM
$(document).ready(function() {
console.log("---加载content.js---");
// 注入inject.js
injectCustomJs();
});
function injectCustomJs() {
let jsPath = 'js/inject.js';
var temp = document.createElement('script');
temp.setAttribute('type', 'text/javascript');
// 获得的地址类似:chrome-extension://ihcokhadfjfchaeagdoclpnjdiokfakg/js/inject.js
temp.src = chrome.runtime.getURL(jsPath);
temp.onload = function() {
// 执行完后移除掉
this.parentNode.removeChild(this);
};
// 挂载
document.head.appendChild(temp);
}
inject.js
// 可以访问当前页面中的js
$(document).ready(function() {
console.log("---inject.js---");
console.log(window);
});
总结
其实我使用得很浅,所以也没啥好总结的,多看文档多百度!
标签:function,console,log,sendResponse,谷歌,js,json,v3,浏览器 From: https://blog.51cto.com/u_12320710/5947568