关于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的插件就是这样实现的.

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

承接上文

十. 鼠标右键菜单

右键菜单的第二大类

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

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

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

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

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

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

十四. 获取被审查页面dom

答案在这里

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

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

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

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

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

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

end

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

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

承接上文

十. 鼠标右键菜单

右键菜单的第二大类

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

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

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

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

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

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

十四. 获取被审查页面dom

答案在这里

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

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

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

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

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

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

end

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

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

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

发表回复取消回复