首页 > 其他分享 >谷歌浏览器扩展v3版本总结

谷歌浏览器扩展v3版本总结

时间:2022-12-16 15:32:37浏览次数:53  
标签:function console log sendResponse 谷歌 js json v3 浏览器


前言

前几年使用过谷歌浏览器扩展v2,然后今天想编写一个扩展发现了很多问题,然后想编写一篇文章进行总结一下,v3跟比v2有挺多差距的,具体的大家可以去看看官网文档

开始

开始之前先介绍几个网站

项目结构

谷歌浏览器扩展v3版本总结_json

注意事项一(service-worker使用)

service-worker.js 就是 background.js 它必须在根目录

ps:如果你想看它的运行情况,需要单独为扩展插件打开控制台(扩展 - 三个点 - 审查弹出内容)

谷歌浏览器扩展v3版本总结_前端_02

 注意事项二(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

相关文章

  • terser not found. Since Vite v3
    [vite:terser]tersernotfound.SinceVitev3,terserhasbecomeanoptionaldependency.Youneedtoinstallit.errorduringbuild:Error:tersernotfound.Sin......
  • 谷歌浏览器查找Extension
    Quick-FindNextgentextsearchforChromeandOpera.PortofFirefoxQuickFindfeatures+awesomenewones.Searchresultsinonelocation.Navigatetolinks......
  • chrome浏览器启用es6语法支持,初次体验浏览器端模块化加载
    注意:最新版本的chrome浏览器已支持module语法,需要在web服务器环境下运行!一、设置浏览器启用es6语法功能注:chrome76版本及以上不再需要设置了,浏览器已默认支持,至于从哪个版......
  • 有哪常用些浏览器/内核?
    浏览器排行榜浏览器市占率排行榜全球榜浏览器市占率排行榜中国榜-快科技如果按照浏览器内核来看,Chromium内核的市场占有率无疑是最大的,一家独大。对于淘汰已久的IE浏......
  • Opencv3.4.10 (CMake 编译)windows
    准备工作:下载opencv以及opencv_contrib(包括一些附加功能)源码或opencv下载(下载后解压即可)opencv_contrib下载(下载后解压即可)cmake下载安装MinGW下载(下载后解......
  • 实用APP分享:这3款“三无”浏览器,你竟然还不知道?
    相信很多人都听过夸克、UC浏览器,但是它们的内存越来越大了,UC浏览器的广告也越来越多。基于以上的痛点,今天给大家分享3款实用的手机浏览器,都是“三无”浏览器,无新闻、无广告......
  • mitmproxy 抓包神器-1.环境准备与抓取浏览器请求
    前言常见的抓包工具有fiddler和charles,这些工具都是需要安装本地客户端,python版的抓包工具可以用mitmproxy。mitmproxy相比Charles、fiddler的优点在于,它可以命令......
  • 活字格调用(6612345网页打印浏览器)打印无响应的解放方法_20221215_112738
    活字格页面标签页内打印无效无响应问题解决方法:测试1:点击打开标签页,点击打印测试按钮,执行无任何响应 命令如下图:测试2.点击打开页面非标签页,点击打印测试执行成功。解决方......
  • 浏览器打开微信小程序
    functionh5(){ $wx=newWx('appId','appSecret'); //\dump($wx->getAccessToken()); $url='https://api.weixin.qq.com/wxa/generatescheme?'.\http_build_qu......
  • 利用木马钓鱼渗透浏览器漏洞靶机
    1准备环境win7虚拟机:192.168.225.140cn_windows_7_ultimate_x64_dvd_x15-66043.isokali2020.4:192.168.225.138kali-linux-2020.4-vmware-amd64.7z如果ssh连接不到kal......