关于chrome:记一次前端chrome插件基础实战分享会建议收藏下篇

承接上文

十. 鼠标右键菜单

须要先在权限外面加上菜单的权限manifest.json "permissions": ["contextMenus"],.
具体的增加菜单的代码, 咱们放在background.js文件外面

  chrome.contextMenus.create({    title: "敢不敢点击我",    onclick: function(){alert('点击了人家');}  });

这里点击后就调用咱们定义的点击办法了

第二种形式: 咱们把菜单做成选项, 比方三种模式让用户选一种

chrome.contextMenus.create({  title: "选项1",  "type": "radio",  onclick: function(){alert('应用1');}});chrome.contextMenus.create({  title: "选项2",  "type": "radio",  onclick: function(){alert('应用2');}});chrome.contextMenus.create({  title: "选项3",  "type": "radio",  onclick: function(){alert('应用3');}});

当然了, 多选也是有的

chrome.contextMenus.create({  title: "选项1",  "type": "checkbox",  onclick: function(){alert('应用1');}});chrome.contextMenus.create({  title: "选项2",  "type": "checkbox",  onclick: function(){alert('应用2');}});chrome.contextMenus.create({  title: "选项3",  "type": "checkbox",  onclick: function(){alert('应用3');}});

右键菜单的第二大类

只有选中某些内容了才展现的菜单

  chrome.contextMenus.create({    title: '选中了：%s', // %s示意选中的文字    contexts: ['selection'], // 只有入选中文字时才会呈现此右键菜单    onclick: function(params)    {     alert('查问某个货色')    }  });

第一种与第二种菜单同时creat, 显示时只显示对应的一种状况

十一. content_scripts ‘歹意广告’的首恶？

什么是content_scripts

比方拜访某个页面, 我会把我的代码注入到这个页面的js代码外面, 这就是content_scripts的作用, 我能够或者以后页面的dom构造以及document.

配置引入content_scripts

manifest.json, 上面这段话的意思就是所有页面都插入, "content/index.js"的代码逻辑

  "content_scripts":     [        {            "matches": ["<all_urls>"],            "js": ["content/index.js"],        }  ],

插入的机会

content_scripts配置是一个Array类型, 所以阐明他能够配置多组逻辑, 并且其中还能够配置代码失效的机会;
"run_at": "document_start" dom刚开始加载的工夫
"run_at": "document_end" dom加载实现(此时能力获取dom)
"run_at": "document_idle" 页面闲暇的时候(默认是他)

咱们轻易写一段代码

console.log('我注入了')console.log('获取window', window)console.log('获取document', document)

而后更新组件, 在不同页面看一下成果:

每个网站加载时都会执行一遍, 然而一些注意事项在第七条外面, 别忘了看看.

插入操作的dom, 可否获取源js的变量?

这里咱们本人设置一个html页面, 来一一验证咱们的问题.

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title></head><body>  <div id="wo">我会被获取</div>  <script>    var  cc = '金毛'  </script></body></html>

插件外面减少逻辑

console.log('我注入了')console.log('获取window', window)console.log('获取document', document)console.log('获取cc', window.cc)console.log('获取dom',document.getElementById('wo'))

这里其实不倡议咱们改变用户的js代码逻辑, 不论是平安因素还是整体逻辑的自洽都不倡议如此操作, 这里也就不介绍能够拜访js变量的办法了, 用趣味的能够去官方网站查一查.

配置css

咱们还能够再页面插入css代码, 是页面样子发生变化
在manifest.json进行批改

"content_scripts":     [        {          "matches": ["<all_urls>"],          "js": ["content/index.js"],          "css": ["content/index.css"]        }  ],

css能够影响页面上的所有dom构造, 包含本来的dom和咱们后插入的dom构造
content/index.css外面

#wo {  border: 1px solid red;}

页面成果如下

插入歹意广告与批改dom

既然获取了dom那么咱们当然就能够批改dom, 或者是新增dom倒你的页面.

批改元素内容
document.getElementById('wo').innerText = '被批改后的内容'

增加元素到页面上.....

const div = document.createElement('div');div.className = 'cc'div.innerHTML = "是兄弟就来kanwo"document.body.append(div);div.addEventListener('click', ()=>{  alert('支付999999')})

款式也要好看一点

.cc {  display: flex;  color: white;  position: fixed;  align-items: center;  justify-content: center;  background-color: black;  right: 0;  bottom: 0;  width: 300px;  height: 200px;}

实际效果就是图里这样了

权限留神:
①: 这个办法在插件扩大页面有效!!! 请去一般页面调试!
②: 获取不到本页面的变量
③: 页面变更不会触发从新执行, 只有页面刷新才会触发从新执行

十二. devtools借鉴面板，监测网页的一举一动

这个我先举个例子你就这道这是个啥性能了

它能够分为两个局部, devtools_page能够用来操作tab栏的, panel是每一个具体的tab外面的html构造与逻辑

创立一个标签
在manifest.json中减少这样的一段配置
"devtools_page": "devtools/index.html"
在这个文件外面咱们定义js的援用

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title></head><body>  <script src="./index.js"></script></body></html>

index.js文件外面写上

// 创立自定义面板，同一个插件能够创立多个自定义面板// 几个参数顺次为：panel题目、图标（不必写）、要加载的页面、加载胜利后的回调chrome.devtools.panels.create('被我霸占了', null, 'panel/index.html', function(){  // 这个必须要敞开控制台, 再关上能力显示进去, 中文也没问题哈  console.log('自定义面板创立胜利！');  // 他本人也是个html页面, 所以能够二次查看});

肯定要留神, 这个肯定要f12敞开控制台再关上控制台才会失效, 刷新没有用的别被坑了!!

这里是控制台嵌套控制台，是不是很神奇，与咱们平时的了解有点点出入感。

那么问题来了，这第一个控制台其实能够算是一个页面，那他的html怎么搞？？其实就是依附`panel`

panel/index.html

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title></head><body>  <script src="./index.js"></script></body></html>

panel/index.js

console.log('我是panel页面的控制台, 大家好')

既然它相当于一个页面, 那么必定就能够操作他的dom构造, 咱们来实现以下
操控他的dom

const nr = document.getElementById('nr');const bt = document.getElementById('bt');bt.onclick = function(){  nr.innerHTML = "内容被扭转了"}

后果当然很明确了

十三. 获取被审查页面资源

panel次要的一个性能就是联合页面的状况给出一个解决剖析的计划, 那么咱们要如何与被审查页面进行交换那?
panel/index.js

 chrome.devtools.inspectedWindow.getResources ((res)=>{   console.log('获取的资源元素', res)  const obj = {}  res.forEach((el, i) => {    obj[el.type] = el.url + `xxxxxxx-> ${i}`  });  console.log('类型对象', obj) })

咱们定义的简略页面:

网上比较复杂的页面:

有下面的信息能够看出, 这个获取被审查页面资源的api次要是获取加载的资源类型与连贯, 依照次要的类型分类就那几个.
咱们能够利用这个api剖析我的项目加载的资源构造.

十四. 获取被审查页面dom

这个有点绕, 你也能够尝试其余办法获取dom, 这里介绍的是eval办法
从一个最根本的例子说起

chrome.devtools.inspectedWindow.eval("window.location", (res, isException)=>{   console.log('执行后果是: ', res, isException) })

chrome.devtools.inspectedWindow.eval 是在被审查页面执行的语句
第一个参数是被执行的语句
res是执行语句的返回值
isException 是执行有没有报错, 如果出现异常则为true
值得注意的一点是, res只承受无效的json对象, 这条十分十分重要!

第一次你可能会这样写

 chrome.devtools.inspectedWindow.eval(`document.getElementsByTagName('*')`, (res)=>{    console.log('执行后果是document: ', res)  })

你会发现打印出了奇奇怪怪的货色如下图

考验基本功的时候到了, 你晓得是为啥么? 本人思考一下

答案在这里

原来是咱们获取构造的时候进行了json化解决, 那就明确了dom构造不能拿过去解决, 要在eval办法外面解决好再拿过去, 就有了如下代码.

chrome.devtools.inspectedWindow.eval(`[...document.getElementsByTagName('*')].map((item)=>item.localName)`, (res)=>{  const obj = {}  res.forEach((item)=>{    obj[item] = obj[item]?(++obj[item]):1;  })  console.log('执行后果是: ', obj)})

也就是把解决逻辑放在eval外面做完, 返回的是解决好的后果

十五. 拦挡被审查页面申请

这个也是很罕用的性能, 吧用户每个申请都剖析列举进去.

chrome.devtools.network.onRequestFinished.addListener( (res) => {  console.log('申请体: ' , res)});

申请的根本信息都有, 那咱们能玩的花色就很多了.

十六. 为什么要把权限都配置在main文件外面

这个思维还挺有意思的, 咱们平时写代码能够借鉴一下, 先把须要的权限写在配置文件外面, 这样应用你的扩大的时候能够先询问用户是否给你相干性能, 如果用户没给相干性能那么就把相干性能的对象变为空之类的, 达到了从源头配置权限的性能.

十七. 乏味的实战畅想（bug监测零碎）

测试提的bug须要在bug平台上查看, 每次要切换页面, 那我可不可以与bug平台相干的api联动, 比方某一页有bug, 那么我右上角的图标就显示为红色, 并且表明bug的数量或者额类型
并且联合popup下拉后能够对bug进行根底的操作, 解决中, 已实现, 等等状态的批改.

十八. 乏味的实战畅想（页面主题批改零碎）

在页面中插入dom构造, 点击更换主题的时候 , 更改本业dom构造的本省色调系数
或者把选项写在右侧菜单的单选项外面, 让用户去选, content_script监测到缓存外面配置变了就更新页面样子.

十九. 乏味的实战畅想（监测我的项目内反复申请的接口）

如果我的项目内存在反复调用一个接口的状况下, 把这个接口指出来, 而后剖析为什么会呈现反复调用, 如果不是问题那就把这个接口放在白名单里不取监控.

二十. 乏味的实战畅想（vpn的代理）

既然能够拿到用户的申请信息, 那么能够用拿到的url进行申请地址的代理, 这个性能我就不在这里具体说了, 因为很多vpn的插件就是这样实现的.