Chrome插件编写实战

一、原理

1.1、chrome插件(Chrome扩展-Chrome Extension)

• 我们所描述的Chrome插件实际上指的是Chrome扩展。Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包.

1.2、安装方式

• 扩展程序中添加文件夹
• 安装.crx格式的文件

1.3、manifest.json文件

• manifest.json是一个Chrome插件最重要也是必不可少的文件，用来配置所有和插件相关的配置，必须放在根目录。其中，manifest_version、name、version3个是必不可少的，description和icons是推荐的。
• manifest_version：2.（必选项：用整数表示manifest文件自身格式的版本号。目前为止只接受 2 （版本目前为2））

1.4、chrome插件的8种表现形式

• 浏览器右上角图标browserAction（popup）
  • manifest.json文件中添加：“default_popup”:"popup.html"
• 地址栏右侧pageAction（popup）与浏览器的右上角的区别是只在特定情况下出现
• 右键的菜单新增选项
• 覆盖特定页面的形式
• 开发者工具
  • manifest.json文件中添加：“devtools_page”: “devtools.html”,
• option
• omnibox
• 桌面通知

1.5、开发者工具形式（devtools）

• 展现：打开F12调试，与Element、console同等级的panel
  
• 每打开一个开发者工具窗口，都会创建devtools页面的实例，F12窗口关闭，页面也随着关闭，所以devtools页面的生命周期和devtools窗口是一致的
  
• 可访问的接口：
  • chrome.devtools.panels：面板相关；
  • chrome.devtools.inspectedWindow：获取被审查窗口的有关信息；
  • chrome.devtools.network：获取有关网络请求的信息；

1.6、调试方式

• 保存编辑好的插件文件，在浏览器扩展程序页面按下Ctrl+R重新加载插件，关闭和再重新打开F12开发者调试页面即可刷新最新的插件代码

二、实战-埋点工具

2.1、文件目录内容

• manifest.json，配置以devtools_page形式开发插件
  
• devtools.html，配置devtools.js，代表要加载devtools.js，去实现该扩展插件的功能
  
• devtools.js，编写获取数据，解析数据的js脚本，并在panel.html上渲染出来
  
• panel.html，以表格的形式渲染出解析出来的数据。并增加搜索、高亮等功能

2.2、截取请求并解析内容的实现

需求截获的请求url格式，如：http://log.xxx.xxx.xx/exposure/standard?_=1552487600873&dpmxx=1.xx_1xx.24.1&dcmxx=xx.xx.xx.0&domain=%2F%2Fembedlog.duiba.com.cn

• 监听请求
• 筛选含有dcm和dpm的请求（包含单个dcm和dpm参数的，也包含批量dcm和dpm参数）
• 解析数据：dcm和dpm的值，请求的类型（曝光和点击），请求状态，请求的url
• 以表格形式输出：直接将所解析出来的字段拼接在表格的div中