首页
更多应用
Search
1
修改iview的标签为i-的形式而不是驼峰的形式
2,791 阅读
2
PHP微信和企业微信签名
2,522 阅读
3
在VUE中怎么全局引入sass文件
2,223 阅读
4
vscode硬件占用较高解决方案
2,017 阅读
5
解决Macos下storm系列IDE卡顿的问题
1,975 阅读
默认分类
JS
VUE
CSS
mac使用技巧
React
fastmock
登录
/
注册
Search
标签搜索
react
js
vue
vscode
nodejs
项目
代码
webpack
工具
nginx
小程序
css
fastmock
eslint
npm
http
vue-cli3
git
浏览器
const
fastmock技术社区
累计撰写
102
篇文章
累计收到
26
条评论
首页
栏目
默认分类
JS
VUE
CSS
mac使用技巧
React
fastmock
页面
更多应用
搜索到
1
篇与
的结果
2023-06-30
chrome浏览器扩展v3版本配置项整理备忘
manifest.json配置文件{ //chrome插件的版本 "manifest_version": 3, //插件名称 "name": "ChromeName", //插件版本号 "version": "1.0.0", //插件描述,Plugin_Desc是多语言的key,chrome插件支持多语言配置,__MSG_xxx__ "description": "__MSG_Plugin_Desc__", //默认语言(如果当前浏览器设置的语言不存在多语言配置文件,则默认中文),Chrome插件的多语言只能根据当前浏览器设置的语言来设定,无法通过代码更改语言 "default_locale": "zh_CN", //内容安全政策,V2的value是字符串,V3是对象 "content_security_policy": { //原文:此政策涵盖您的扩展程序中的页面,包括 html 文件和服务人员;具体不是很明白,但是参数值得是self,即当前自己 "extension_pages": "script-src 'self'; object-src 'self'", //原文:此政策涵盖您的扩展程序使用的任何[沙盒扩展程序页面];具体不是很明白,但是参数值得是self,即当前自己 "sandbox": "sandbox allow-scripts; script-src 'self'; object-src 'self'" }, //key,发布插件后会给一个key,把那个key的值放这里 "key": "xxx", //icon,浏览器扩展程序管理里面的图标、浏览器右侧插件图标点开的下拉菜单展示的已开启插件的图标、以及插件详情页的标签卡的那个小图标 "icons": { "16": "static/img/logo-16.png", "19": "static/img/logo-19.png", "38": "static/img/logo-38.png", "48": "static/img/logo-48.png", "128": "static/img/logo-128.png" }, //背景页,后台脚本引入,v2是scripts:[xxx,xxx],可以引入多个js文件,v3是service_worker:'xxx',只能引入一个js,v3版最大的改动应该就是这里了,扩展程序管理界面的插件的那个“背景页”也将变成“Service Worker”,改动之后background.js将和浏览器完全分离,即无法调用window和ducoment对象 //可以看介绍: //1、//developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#background-service-workers; //2、//developer.chrome.com/docs/extensions/mv3/migrating_to_service_workers/ "background": { "service_worker": "background.js" }, //注入脚本,值是个数组对象,可以有多个对象 "content_scripts": [ //每个对象代表一个注入的配置 { //需要在指定页面注入的js脚本文件 "js": [ "xxx.js", "xxx.js", ], //需要注入js脚本文件的指定页面 "matches": [ "https://*.csdn.net/*", "https://*.xxx.com/*" ], //不允许注入js脚本文件的指定页面 "exclude_matches": ["https://*.xxx.com/*"], //什么时候注入的js脚本,document_start=页面加载开始时,document_end=页面加载结束时 "run_at": "document_end" } ], //API权限,需要使用某些API时需要设置该API权限才行 "permissions": [ "contextMenus", //自定义创建右键菜单API "tabs", //tab选项卡API "storage", //缓存API "webRequest", //监听浏览器请求API ... ], //主机权限,在背景页backgroud.js里面或者popup页面走请求时,请求域名的白名单权限,如果没添加的则请求会失败 "host_permissions": [ "https://*.csdn.net/*", "https://*.xxx.com/*" ], //动作API,原文:在 Manifest V2 中,有两种不同的 API 来实现操作: `"browser_action"` 和 `"page_action"` . //这些 API 在引入时扮演了不同的角色,但随着时间的推移它们变得多余,因此在 Manifest V3 中,我们将它们统一为单个 `"action"` API; //配置上action:{},可以是空对象,但是action这个配置得有,不然的话扩展程序管理界面的“Service Worker”将显示无效, //且无法点开“Service Worker”的开发者工具控制台以及点击插件图标时触发的这个方法会报错:chrome.action.onClicked.addListener, "action": { }, //通过网络访问的资源,v2是提供一个数组,v3得提供数组对象,每个对象可以映射到一组资源到一组 URL 或扩展 ID "web_accessible_resources": [{ //允许访问的资源路径,数组传多个参数 "resources": ["*/img/xxx.png", "*/img/xxx2.png"], //允许访问资源的页面 "matches": [ "https://*.csdn.net/*", "https://*.xxx.com/*" ] }] }消息监听1、插件内部发送消息//onMessage消息监听 chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) { console.log(request.text); //打印出来的值:“我是个测试内容” sendResponse('触发成功了'); //返回一个内容到发送消息的回调函数中 }); //发送消息,触发上面的onMessage chrome.runtime.sendMessage('', {text: '我是个测试内容'}, function (msg) { console.log(msg); //打印的内容是:“触发成功了” });2、除了在插件内部contenscript background 和 popup之间传递消息以外,其他网站也可以给插件发送消息。方法如下首先,需要增加配置 externally_connectable:{matches:[“https://*.xxx.com/”]}指定允许哪些网站可以给当前插件发送消息,相当于白名单,只有在白名单中的站点发送的消息,扩展才会监听//onMessageExternal消息监听 chrome.runtime.onMessageExternal.addListener(function (request, sender, sendResponse) { console.log(request.text); //打印出来的值:“我是个测试内容” sendResponse('外部触发成功'); //返回一个内容到发送消息的回调函数中 }); //发送消息,触发上面的onMessageExternal //第一个参数是插件Id,指定要发送给哪个插件 //第二个参数是想要传给插件的数据信息 //第三个是让插件那边调用的回调函数,触发回来 chrome.runtime.sendMessage('chromeId', {text: '我是个测试内容'}, function (msg) { console.log(msg); //打印的内容是:"外部触发成功" });内部发送sendMessage不会触发到onMessageExternal,外部发送sendMessage不会触发到onMessage
2023年06月30日
716 阅读
0 评论
1 点赞