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

40次阅读

共计 5980 个字符，预计需要花费 15 分钟才能阅读完成。

承接上文

十. 鼠标右键菜单

须要先在权限外面加上菜单的权限 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‘歹意广告’的首恶？

  1. 什么是 content_scripts

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

  1. 配置引入 content_scripts

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

  "content_scripts": 
    [
        {"matches": ["<all_urls>"],
            "js": ["content/index.js"],
        }
  ],
  1. 插入的机会

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)

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

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

  1. 插入操作的 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 变量的办法了, 用趣味的能够去官方网站查一查.

  1. 配置 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;}

页面成果如下

  1. 插入歹意广告与批改 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;
}

实际效果就是图里这样了

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

十二. 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)
 })
  1. chrome.devtools.inspectedWindow.eval 是在被审查页面执行的语句
  2. 第一个参数是 被执行的语句
  3. res 是执行语句的返回值
  4. isException 是执行有没有报错, 如果出现异常则为 true
  5. 值得注意的一点是, 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 的插件就是这样实现的.

end

接下来筹备做 3d 和微前端相干的文章, 心愿大家多多反对
这次就这么多, 心愿和你一起提高.

正文完
chrome
发表至： chrome
2021-01-27
 0
关于chrome:chrome插件教程5了解csp网站安全策略
关于chrome:谷歌-Chrome-94-稳定版正式发布默认启用空闲检测-API-引争议
关于chrome:推荐一个-Chrome-浏览历史记录管理的扩展-History-Trends-Unlimited
关于javascript:了解V8二类型转换V8是怎么实现12的