php线上预览日志--2.谷歌插件开发

1.写在前面:

  谷歌插件开发其实并没有想象中那么难,会一些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的连接和消息的接收.

原文地址:https://www.cnblogs.com/callmelx/p/12122082.html

时间: 2024-11-06 03:33:28

php线上预览日志--2.谷歌插件开发的相关文章

php线上预览日志--1.概述

众所周知,项目一旦上线一般是不允许改动的,但是线上一旦出现问题的话,看日志就是一件比较头痛的事情,因为并没有类似elk或者kafka的日志管理系统,小的项目也没有必要,所以常用的方法是sftp下日志,看问题,然后操作以后,再下载,所以想实现类似tail 命令的功能,可以实时看到日志输出,通过浏览器.下面是实现的思路: 做了一个简单的示意图: 开发分为三部分: 1.chrom插件开发 2.基于swoole开发websocket服务. 3.基于swoole开发php的websocket客户端 chr

File控件选择图片的时候在Html5下马上预览

页面HTML <div> <img src="@pic.Path" id="img" style="width:200px;height:200px;" /> <form id="form_photo" method="post" action="/N/SavePhoto?id=1"> <input style=" display:no

线上nginx访问日志切割脚本

1.说明 随着时间的增加,nginx 的访问日志会越来越大,下图是新部署的线上 zabbix 监控网站运行了十几天左右产生的访问日志达到213M. 所以必须进行日志分割,要求如下: 1.每天的日志单独生成一个文件 2.保留30天的访问日志 2.编写脚本 vim /usr/local/nginx/logs/nginx_log_rotate.sh #! /bin/bash logs_path="/usr/local/nginx/logs/" log_name="access.lo

一次线上nohup.out日志丢失的问题

今天有小伙伴求助,线上一个应用的nohup.out日志不更新了,但进程还是正常的.此时需要查看这个日志排查一些问题,这可怎么办呢? nohup.out文件的更新时间停留在了昨天9点36,日志也刚好打到这个时间点. 但后面的日志去哪里了呢?这个问题就优点难办了,原因可能很多.比如不小心把文件删除了,或者重命名了. 那现在没时间找原因,能不能紧急把日志恢复呢?或者说在不重启进程的情况下,把日志找回来呢? 方法是有的,不过得从linux的/proc目录说起. 先来看看/proc目录的作用: /proc

excle网页上预览

原先试了aspose-cells 想把xlsx转成pdf 然后实行在线预览,但是发现转的时候没报错,但是查看的时候检查不了,在网上翻了好久, 只找到一个类似案例,意思就是实际已经转好了,改了后缀名就能看到,我改了后发现和原先一样就是多了水印,合着就是加了一个水印啊,果断放弃 我想后来转成html也能实现预览,然后 就把网上的找了一个工具类,改改 就可以了 我加了点东西 就是把所有的sheet 一起显示预览 首先是jar包 <dependency> <groupId>org.apac

如何直接在github上预览html网页效果

http://justcoding.iteye.com/blog/2321552 2.vue 配合vue-resource调用接口,获取数据   https://www.cnblogs.com/feiseli/p/6680008.html 原文地址:https://www.cnblogs.com/roxanneQQyxm/p/8490377.html

fis3+vue+pdf.js制作预览PDF文件或其他

人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠人玫瑰,手留余香呢?终于时候到了...哈哈 首先容我吐槽一番,在大前端的背景下各种框架层出不穷,相对的各种打包工具也应用而生,要说最火的就是webpack了,用户多所以社区相对活跃,团队维护,网上也有各种各样的问题可以轻易搜到从而解决自己的遇到的各种奇葩问题,所以90%的项目都会采用webpack来

pdf.js实现图片在线预览

项目需求 前段时间项目中遇到了一个模块,是关于在线预览word文档(PDF文件)的,所以,找了很多插件,例如,pdf.js,pdfobject.js框架,但是pdfobject.js框架对于IE浏览器不兼容,所以,选择了使用pdf.js,这里记录一下,以后使用的时候好查找,也希望可以帮助有需要的人. word文件转pdf文件 首先需要将指定的word文档转为pdf文件,方法有很多,这里不介绍,有需要的童鞋可以去网上下载即可.我这里用的是OpenOffice,版本是4.1.6,使用很简单,下载好了

移动端上传照片 预览+draw on Canvas demo(解决iOS等设备照片旋转90度的bug)

背景: 本人的一个移动端H5项目,需求如下: 手机相册选取或拍摄照片后在页面上预览 然后绘制在canvas画布上. 这里,我们先看一个demo(http://jsfiddle.net/q3011893/83qfqpk8/embedded/) 操作步骤: 1.点击选择文件,拍摄一张照片,此时"预览:"文字下会显示你刚才拍摄的照片: 2.再点击"draw on Canvas",该按钮下的画布会绘制你刚才拍摄的照片. 正常的结果: 正文: 让input file支持拍照+