// 这里我就用了同一张图片 "48": "img/log.png"
谷歌插件开发其实并没有想象中那么难,会一些js就可以了,扩展开发可以本身开发,但是如果你想颁布的话需要成为谷歌的开发者,掏5刀,具体可自行查阅,如果只是说小范畴使用可以加载解压文件来引入扩展,不再赘述
2.起步:构建文件夹
先构建我们的文件布局:(最好与我的文件名连结一致)
//新建文件夹 chrome_extension,里面的文件布局如下:
---js
---css
---image
---manifest.json
manifest.json,通过文件类型就可看出他是一个配置类型,可类比package.json 和composer.json文件.
3.manifest.json配置及简单说明:
{ "name": "First chrom Extension", //扩展名 "version": "1.0", //本身项目的版本,本身随意界说 "description": "Build an Extension!", //扩展的简介 "manifest_version": 2, //这个是manifest.json文件的版本,这里必需是2 "icons":{ "16": "img/log.png",//这里我就用了同一张图片 "48": "img/log.png", "128": "img/log.png" }, "browser_action":{//这个是右上角的扩展展示的信息 "default_icon":"img/log.png", "default_title":"Log Message", //hover效果 "default_popup":"popup.html" }, "background":{ "page":"background.html" //background暗示的是生命周期最长的文件,可以理解成他是一个容器文件. }, "devtools_page": "devtools.html" //这是界说类似console.log的页面 }
新建devtools.html:
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="js/devtools.js"></script> </head> <body> </body> </html>
这个html的感化仅仅是用于引用devtools.js
下面新建devtools.js(js文件夹内):
chrome.devtools.panels.create(‘LogMessage‘, ‘img/log.png‘, ‘logMessage.html‘, function(panel) {});
这里是logMessage.html就是我们真正想要的,先放张效果
下面是logMessage.html的代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/logMessage.js"></script> </head> <body> <h1 style="color:Red">this is LogMessage</h1> </body> </html>
这里我将logMessage的js措置惩罚惩罚抽离成了一个新的文件.在logMessage.js可以写关于websocket的连接和动静的接收.
php线上预览日志--2.谷歌插件开发
，温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/32608.html
- 上一篇：如邮件格式说明中的发件人
- 下一篇：‘pass‘=‘123456‘
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")