谷歌浏览器插件开发(1)

manifest

新建一个文件夹作为项目，创建一个manifest.json文件作为基础配置。

{"manifest_version": 2,"name": "这是一个插件","version": "1.0","description": "描述","icons": {"16": "/images/sun.png","48": "/images/sun.png","128": "/images/sun.png"}
}

这时一个初始状态的插件就创建完成了。但这个时候它是没什么功能的。

content_scripts

content_scripts是配置需要直接注入页面的js或css，我们在引入的js中console点东西，并且在引入的css中对页面样式做下修改，样式由于是全局的加的时候要留意下与原本的样式的优先级关系。增加该配置后重新加载插件

  "content_scripts": [{"matches": ["<all_urls>"],"js": ["./src/js/index.js"],"css": ["./src/css/index.css"],// 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle"run_at": "document_start"}]

如果我们将run_at改为document_end，会发现插件输出的位置变了，这是因为代码注入的时间变成DOM构建结束之再注入，而先前的document_start是在DOM构建之前注入，默认不添加这个配置的话其值是document_idle，表示页面空闲时间注入

这时候我们就可以通过对content_scripts配置的js，css做一些修改实现自己的一些效果了

谷歌浏览器插件开发(1)相关推荐

谷歌浏览器插件开发接口自动打码【2022年07月05日更新一下修改的点】
谷歌浏览器插件开发接口自动打码一.字符验证码的训练二.谷歌浏览器插件的开发 1.谷歌浏览器插件**manifest.json** 2.负责输入请求的bifang.js 3.解决跨域问题的backg ...
谷歌浏览器插件开发之 manifest.json 配置说明
前言 {// Required// 必须的字段3个"manifest_version": 2, // manifest编写规范版本,目前主流2"name": & ...
谷歌浏览器插件，当前网页地址的二维码
经常在pc浏览网站时想要用手机来打开如果登录了qq和微信直接复制就可以打开了要是没有登录,而且网站地址很长,那就麻烦了于是有个想法,如果有个浏览器插件可以直接将当前页的url生成二维码,如何手机 ...
10分钟带你入门chrome(谷歌)浏览器插件开发
整理chrome插件有哪些能力,插件开发入门,整理文档. chrome谷歌浏览器插件开发,听上去很高大上,其实只要熟悉HTML.CSS.JS即可开发,插件也是将html页面渲染出来并执行js脚本而已. ...
大型前端项目的断点调试共享化和复用化实践
作者:enoyao,腾讯工程师背景随着我们项目越来越大,我们有可能需要维护很多的模块,我们腾讯文档 Excel 项目大模块有 10 几个,而每个大模块分别有 N 个小模块,每个大模块下的小模块都有 ...
谷歌插件学习必备准备知识代码提示插件调试
插件开发:全面支持ES6+以上代码,无需编译,原生运行,打包时切忌开启转换ES5语法,原生支持async,await,js本身基因就是协程插件开发入门课: 基础课:目前没有发现高级课,可能需要我们自 ...
在BOSS直聘发现了一个前端小秘密
故事的由来开头:小姐姐 HR小姐姐看简历比较累,需要一直手动点击下一个按钮,才能前往下一个简历一位同事 - 后端架构师小哥哥想给HR做一个自动查看下一个简历的工具,又不想做得复杂,不想做成浏览器插 ...
跟同事在BOSS直聘发现了一个前端小秘密
故事的由来开头:小姐姐 HR小姐姐看简历比较累,需要一直手动点击下一个按钮,才能前往下一个简历一位同事 - 后端架构师小哥哥想给HR做一个自动查看下一个简历的工具,又不想做得复杂,不想做成浏览器插 ...
30分钟开发一款抓取网站图片资源的浏览器插件
前言由于业务需求, 笔者要为公司开发几款实用的浏览器插件,所以大致花了一天的时间,看完了谷歌浏览器插件开发文档,在这里特地总结一下经验, 并通过一个实际案例来复盘插件开发的流程和注意事项. 你将收获 ...

谷歌浏览器插件开发(1)

manifest

content_scripts

谷歌浏览器插件开发(1)相关推荐

最新文章

热门文章