php线上预览日志--2.谷歌插件开发
2021-05-03 08:28
标签：func src socket icons head sage pac his mic 1.写在前面: 谷歌插件开发其实并没有想象中那么难,会一些js就可以了,扩展开发可以自己开发,但是如果你想发布的话需要成为谷歌的开发者,掏5刀,具体可自行查阅,如果只是说小范围使用可以加载解压文件来引入扩展,不再赘述 2.起步:构建文件夹 先构建我们的文件结构:(最好与我的文件名保持一致) manifest.json,通过文件类型就可看出他是一个配置类型,可类比package.json 和composer.json文件. 3.manifest.json配置及简单说明: 新建devtools.html: 这个html的作用仅仅是用于引用devtools.js 下面新建devtools.js(js文件夹内): 这里是logMessage.html就是我们真正想要的,先放张效果 下面是logMessage.html的代码: 这里我将logMessage的js处理抽离成了一个新的文件.在logMessage.js可以写关于websocket的连接和消息的接收. php线上预览日志--2.谷歌插件开发 标签：func src socket icons head sage pac his mic 原文地址：https://www.cnblogs.com/callmelx/p/12122082.html//新建文件夹 chrome_extension,里面的文件结构如下:
---js
---css
---image
---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的页面
}
DOCTYPE html>
html>
head>
title>title>
script type="text/javascript" src="js/devtools.js">script>
head>
body>
body>
html>
chrome.devtools.panels.create(‘LogMessage‘, ‘img/log.png‘, ‘logMessage.html‘, function(panel) {});
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
script src="js/logMessage.js">script>
head>
body>
h1 style="color:Red">this is LogMessageh1>
body>
html>
下一篇：php之mvc（简单实现）