撸一个本身想要的chrome-devtools拓展之笔记

时间 2019-11-17

标签一个本身想要 chrome devtools 拓展笔记栏目 Chrome 繁體版

原文原文链接

提早BB：原本打算和chrome拓展玩耍的，可是发现我想作的东西，须要用到的一些API，单纯的CRX不足以知足。而后又发现新大陆chrome.devtools。因而，记一个笔记。若是你用过,或者正在使用react，那么你应该知道一个东西叫作React Developer Tools。这个就是在页面右上角有个图标，完了使用的时候，按F12也会看到，在控制台里有一个React的选项。没错就是它。css

图片里红框里的这个 tab就是用 devtools撸出来的。。。(我记得是)

chrome官方教程请往这里戳html

chrome.devtools的api

(1) devtools.inspectedWindowreact

(2) devtools.networkjquery

(3) devtools.panelsweb

如下是我的整理翻译(英语四级没过，翻译不对，还望轻喷)。ajax

撸chrome.devtools须要manifest.json。和chrome拓展同样。chrome

{
  "name": "这个拓展叫啥名字"
  "version": "1.0", //修改了几回
  "minimum_chrome_version": "10.0",  //这个貌似只能是这个数~
  "devtools_page": "devtools.html", // 入口页
  ...
}
复制代码

能撸html、js、css就能够。json

文件夹结构随意，本身引用的到就行。api

下面是我本身作的小demo。瞎弄一个玩玩。首先是目录结构浏览器

本身还在学习这个拓展中，比较简陋。

我来解释一下这一坨，首先，manifest.json是必需要有的，这个是配置文件。

index.html是配置文件中引入的，至关因而入口页面，index.js是index.html引入的初始化js。

panel.html是index.js中初始化时引入的页面。panel.js和panel.css是它要使用的。

reset.css是"复原css"。

引入的jq是为了方便操做dom。N.png暂时还没捣鼓出来如何展现。(好像不是和CRX同样展现在右上角？？)

manifest.json

{
    "name":"seeRequest",//这个拓展叫啥
    "version":"1.0.0", //改了几回啊
    "minimum_chrome_version":"10.0",//这个参数就这个数
    "description": "Easily to see ajax request params and infomation",//介绍下是干啥的
    "devtools_page":"index.html", //这个devtools的进入页面是啥
    "manifest_version":2  //和CRX同样，是且只能是2
}
复制代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>seeRequest</title>
</head>
<body>
    <script src="./index.js"></script>
</body>
</html>
复制代码

这个没啥说的，就是简单的html页面，引入一个初始化使用的js。

index.js

const CD = chrome.devtools;

CD.panels.create(
    "seeRequest", //名字叫啥，就是在devtools中展现的名字。
    "N.png",  //使用的图片，暂时没捣鼓出来如何展现
    "panel.html", //这个devtools拓展真正的操做页面
)
复制代码

panel.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>what</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="panel.css">
</head>
<body>
    <div>Fuck,world!</div>
    <div class="show">
        <h1>请求信息</h1>
        <table class="list">
            <tr>
                <th>方法</th>
                <th>地址</th>
                <th>状态</th>
            </tr>
        </table>
    </div>
    <script src="./jquery-2.2.4.min.js"></script>
    <script src="panel.js"></script>
</body>
</html>
复制代码

这个就是普通的页面html了，随便撸。（这个就是展现在控制台中的下面会给出我这个简陋demo的效果图）

panel.js

const CD = chrome.devtools;

//devtools中不认识console.log。使用自带的api inspectedWindow 来弄一个它认识的
const log = (...params) => CD.inspectedWindow.eval(`console.log(...${JSON.stringify(params)})`);

//服务器状态码对应文字 word 以及描述 desc
// status对应文案 网上找的，若是有不对的，但愿指出。
const statusText={
    "200":{
        word:"成功",
        desc: "服务器已成功处理了请求。一般，这表示服务器提供了请求的网页。"
    },
    "201":{
        word: "已建立",
        desc: "请求成功且服务器已建立了新的资源。"
    },
    "202":{
        word:"已接受",
        desc: "服务器已接受了请求，但还没有对其进行处理。"
    },
    "203":{
        word: "非受权信息",
        desc: "服务器已成功处理了请求，但返回了可能来自另外一来源的信息。"
    },
    "204":{
        word:"无内容",
        desc: "服务器成功处理了请求，但未返回任何内容。"
    },
    "205":{
        word:"充值内容",
        desc: "服务器成功处理了请求，但未返回任何内容。与 204 响应不一样，此响应要求请求者重置文档视图（例如清除表单内容以输入新内容）。 "
    },
    "206":{
        word:"部份内容",
        desc: "服务器成功处理了部分 GET 请求。"
    },
    "300":{
        word:"多种选择",
        desc:"服务器根据请求可执行多种操做。服务器可根据请求者 来选择一项操做，或提供操做列表供其选择。 "
    },
    "301": {
        word: "永久请求",
        desc: "请求的网页已被永久移动到新位置。服务器返回此响应时，会自动将请求者转到新位置。您应使用此代码通知搜索引擎蜘蛛网页或网站已被永久移动到新位置。"
    },
    "302": {
        word: "临时移动",
        desc: " 服务器目前正从不一样位置的网页响应请求，但请求者应继续使用原有位置来进行之后的请求。会自动将请求者转到不一样的位置。但因为搜索引擎会继续抓取原有位置并将其编入索引，所以您不该使用此代码来告诉搜索引擎页面或网站已被移动。 "
    },
    "303": {
        word: "查看其余位置",
        desc: "当请求者应对不一样的位置进行单独的 GET 请求以检索响应时，服务器会返回此代码。对于除 HEAD 请求以外的全部请求，服务器会自动转到其余位置。 "
    },
    "304": {
        word: "未修改",
        desc: "自从上次请求后，请求的网页未被修改过。服务器返回此响应时，不会返回网页内容。"
    },
    "305": {
        word: "使用代理",
        desc: "请求者只能使用代理访问请求的网页。若是服务器返回此响应，那么，服务器还会指明请求者应当使用的代理。"
    },
    "306": {
        word: "",
        desc: ""
    },
    "307": {
        word: "重定向",
        desc: "服务器目前正从不一样位置的网页响应请求，但请求者应继续使用原有位置来进行之后的请求。会自动将请求者转到不一样的位置。但因为搜索引擎会继续抓取原有位置并将其编入索引，所以您不该使用此代码来告诉搜索引擎某个页面或网站已被移动。"
    },
    "400": {
        word: "错误请求",
        desc: "服务器不理解请求的语法。"
    },
    "401": {
        word: "身份验证错误",
        desc: "此页要求受权。您可能不但愿将此网页归入索引。"
    },
    "402": {
        word: "",
        desc: ""
    },
    "403": {
        word: "禁止",
        desc: "服务器拒绝请求。"
    },
    "404": {
        word: "未找到",
        desc: "服务器找不到请求的网页。例如，对于服务器上不存在的网页常常会返回此代码。"
    },
    "405": {
        word: "方法禁用",
        desc: "禁用请求中指定的方法。"
    },
    "406": {
        word: "不接受",
        desc: "没法使用请求的内容特性响应请求的网页。 "
    },
    "407": {
        word: "须要代理受权",
        desc: "请求者必须受权使用代理。若是服务器返回此响应，还表示请求者应当使用代理。 "
    },
    "408": {
        word: "请求超时",
        desc: "服务器等候请求时发生超时。 "
    },
    "409": {
        word: "冲突",
        desc: "服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。服务器在响应与前一个请求相冲突的 PUT 请求时可能会返回此代码，以及两个请求的差别列表。 "
    },
    "410": {
        word: "已删除",
        desc: "请求的资源永久删除后，服务器返回此响应。该代码与 404（未找到）代码类似，但在资源之前存在而如今不存在的状况下，有时会用来替代 404 代码。若是资源已永久删除，您应当使用 301 指定资源的新位置。 "
    },
    "411": {
        word: "须要有效长度",
        desc: "服务器不接受不含有效内容长度标头字段的请求。"
    },
    "412": {
        word: "未知足前提条件",
        desc: "服务器未知足请求者在请求中设置的其中一个前提条件。"
    },
    "413": {
        word: "请求实体过大",
        desc: "服务器没法处理请求，由于请求实体过大，超出服务器的处理能力。 "
    },
    "414": {
        word: "URI过长",
        desc: "请求的 URI（一般为网址）过长，服务器没法处理。 "
    },
    "415": {
        word: "不支持的媒体类型",
        desc: "请求的格式不受请求页面的支持。 "
    },
    "416": {
        word: "请求范围不符合要求",
        desc: "若是页面没法提供请求的范围，则服务器会返回此状态码。 "
    },
    "417": {
        word: "未知足指望",
        desc: "服务器未知足‘指望’请求标头字段的要求。"
    },
    "500": {
        word: "服务器内部错误",
        desc: "服务器遇到错误，没法完成请求。 "
    },
    "501": {
        word: "还没有实施",
        desc: "服务器不具有完成请求的功能。例如，当服务器没法识别请求方法时，服务器可能会返回此代码。"
    },
    "502": {
        word: "网关错误",
        desc: "服务器做为网关或代理，从上游服务器收到了无效的响应。 "
    },
    "503": {
        word: "服务器当前不可用",
        desc: "目前没法使用服务器（因为超载或进行停机维护）。一般，这只是一种暂时的状态。"
    },
    "504": {
        word: "网关超时",
        desc: "服务器做为网关或代理，未及时从上游服务器接收请求。 "
    },
    "505": {
        word: "HTTP版本不受支持",
        desc: "服务器不支持请求中所使用的 HTTP 协议版本"
    }
}

//注册回调函数，每个http请求完成后，都会执行。
CD.network.onRequestFinished.addListener((...args)=>{
    const [{
        request,
        response
    }] = args;

    log(request);

    //本事件 每一次请求都会触发，因此使用jq的append
    $(".list").append(`<tr class="${response.status !== 200 ? 'red' : ''}"> <td class="method"><div>${request.method}</div></td> <td class="url"><div>${request.url}</div></td> <td class="status"> <span>${response.status}</span> </td> <td class="statusText"> <span class='word'>${statusText[response.status].word}</span> <span class='desc'>${statusText[response.status].desc}</span> </td> </tr>`);
        
    
});

$("body").on("mouseenter", ".statusText .word", function () {
    $(this).next().show();
});
$("body").on("mouseleave", ".statusText .word", function () {
    $(this).next().hide();
});

复制代码

panel.css

.list{
    margin: 10px;
}
.list li.red{
    color:red;
}
.list tr{
    width: 1100px;
    border: 1px solid blue;
    margin: 10px;
}
.method{
    width: 100px;
}
.url div{
    width: 800px;
    word-wrap:break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.status{
    width: 100px;
    text-align: center;
}
.statusText{
    position: relative;
    width: 100px;
    text-align: center;
}
.word{
    cursor: pointer;
}
.desc{
    display: none;
    position: absolute;
    z-index:99;
    right: 70px;
    top: 20px;
    padding: 5px 10px;
    min-width: 180px;
    text-align: center;
    border: 1px solid rgb(18, 121, 218);
    background-color: rgb(18, 121, 218);
    color:#fff;
    border-radius: 2px;
}
复制代码

大致就是这样，将鼠标移到状态文案中，会有一个描述的tips。

初步这样，后续会优化&美化。

呀嘞呀嘞~忘了说了。 chrome浏览器里添加拓展，选择这个文件夹。通常状况下，关闭控制台，从新打开控制台，就能够刷新你修改的代码以供调试。由于这个demo是和ajax请求相关，因此，从新打开记得刷新页面啊~

（PS:添加拓展的页面里，这个拓展的代码若是出错了。是会有提示的。）

network

上面的demo是network下的onRequestFinished。这个是chrome.devtools.network下的Events之一，还有一个事件。另外还有一个方法。

`chrome.devtools.network`下两个`Events`

onRequestFinished
onNavigated

这两个都须要使用addListener来回调的形式。

chrome.devtools.network.onRequestFinished.addListener(args=>{}) //接受的是request系列的参数。
chrome.devtools.network.onNavigated.addListener(url=>{}) //接受的是url系列的参数。
复制代码

onRequestFinished是每次请求结束都会执行，onNavigated是当你从当前使用这个api的窗口导航到新页面的时候执行。(大意这样，翻译可能有不许。)

`chrome.devtools.network`下的方法

chrome.devtools.network.getHAR

chrome.devtools.network.getHAR返回全部已知网络请求的HAR日志。

就这个getHAR。我的理解。试用了一下，可是发现，不是每次打开控制台&刷新当前页面就会执行。感受好像有个几秒的间隔，不知道这个间隔是否是判断时间戳或者什么的。也没查到相关的东西。。。暂时放一放。。。

panel

panel这个下面api较多，待我一点点整理。

panel下直接可使用三个方法

create
setOpenResourceHandler
openResource

`create`

上面的CD.panels.create()，我声明了const CD = chrome.devtools。

chrome.devtoolspanels.create()接受四个参数。

//这个就是建立一个panel
chrome.devtools.panels.create(
    "title",        //这个panel的标题
    "someImg.jpg",  //这个panel的图标。按照chrome给的demo来看，这个是和title一块儿展现的。可是我还没让它展现出来。。。
    "panels.html",  //这个panel的主题页面
    function(panel){ //这个panel的回调函数
        
    }
)
复制代码

`setOpenResourceHandler`

//指定当用户单击Developer Tools窗口中的资源连接时要调用的函数。
//若是要接触处理程序的设定，传'空'或者'null'来调用。
chrome.devtools.panels.setOpenResourceHandler(function callback(){
    //当用户单击Developer Tools窗口中的有效资源连接时调用的函数。须要注意的是，若是用户单击的是一个无效的URL或者XHR，就不会执行这个函数。
})
复制代码

`openResource`

//请求Devtools在Developer Tools面板中打开URL。
//补一句，这个方法在chrome 38之后可用。
chrome.devtools.panels.openResource(
    'url',  //要打开的资源的URL
    'lineNumber',//指定资源加载时须要滚动到的行号 
    function callback(){
        //成功加载资源后会调用
    }
)
复制代码

其余api，研究研究再补充到笔记里。

感受看chrome的文档好吃力啊。。纯英文就算了。。多是我理解能力有问题。。。
复制代码

chrome.devtools笔记打完收工。纯属我的整理，无抄袭之意。欢迎纠错&讨论。

这个就是devtools扩展有错误的时候的截图，在浏览器的扩展程序里可见。

撸一个本身想要的chrome-devtools拓展之笔记

chrome.devtools的api

network

chrome.devtools.network下两个Events

chrome.devtools.network下的方法

panel

create

setOpenResourceHandler

openResource

`chrome.devtools.network`下两个`Events`

`chrome.devtools.network`下的方法

`create`

`setOpenResourceHandler`

`openResource`