一、前言

提起Chrome扩大插件(Chrome Extension)，每个人的浏览器中或多或少都装置了几个插件，像一键翻译、广告屏蔽、录屏等等，通过应用这些插件，能够无效的进步咱们的工作效率；但有时候，咱们想要的某个性能市面上没有现成的插件，作为开发者自然而然想到，本人是否能够入手开发一个定制化的插件？网上目前很多不错的对于Chrome插件的开发教程，能够帮忙咱们疾速上手开发一个插件，本文换个思路，从利用着手，通过解说插件的个性来启发读者在工作中哪些场景能够通过插件来解决。

本文侧重点不是Chrome插件的根底开发，而是聚焦于原理及利用，会从插件的一些重要个性讲起，结合实际的插件案例，来剖析这些个性的作用，从而可能启发读者利用这些个性开发出本人的效率工具，打造本人的趁手利器。

二、什么是Chrome扩大插件

什么是Chrome扩大插件？在咱们印象中，它就像跑在浏览器中的利用，能够把浏览器设想成手机，那么插件就像是利用，咱们从Chrome利用商店中下载，而后装置到Chrome浏览器中，就能够在浏览器中进行运行了。

咱们看看官网解释：

Chrome Extension是一个小的软件程序，它能够用来定义浏览器的浏览体验，让用户能够依据集体需要或者偏好定制Chrome浏览器的性能和行为，次要应用的技术栈是HTML、Javascript和CSS。

一句话总结：Chrome扩大插件是用前端的技术栈，来定制浏览器的性能，改善用户体验。

可能大家还听过一个词：Chrome Plugin。翻译过去是Chrome插件，和Chrome扩大插件很相近，特地容易搞混，那么他们之间有什么区别呢？

Chrome Extension仅仅是用来加强浏览器网页的性能，它是利用浏览器提供的已有性能和和各种API，进行性能组合，从而改善浏览器体验，停留在浏览器层面；
Chrome Plugin不仅能加强网页的性能，同时可能扩大浏览器自身的性能；当浏览器提供的性能曾经无奈满足你的需要，就须要你通过C/C++这样的编译语言来扩大浏览器的性能，例如咱们罕用的Flash 插件，Chrome Plugin工作在内核层面。

三、Chrome扩大插件组成及外围机制

3.1 Chrome扩大插件的组成

一个 Chrome 扩大插件通常由 3 类文件组成：

1）配置文件 manifest.json，用于配置扩大的名称、版本号、作者、图标 icon、弹出界面、权限、脚本门路等信息；

2）图片、css 等资源文件；

3）js脚本文件，其中蕴含：

popup.js：用于搭配 popup.html 应用，点击插件图标的时候展现页面及页面逻辑管制；
background.js：用于定义一个后盾页面，相当于一个常驻页面，生命周期和浏览器统一；
content_scripts.js：用于向页面中注入 JS 脚本，它能够操作页面dom，但不会和页面中的脚本产生抵触。

3.2 Chrome扩大插件的外围机制

Chrome扩大插件中比拟外围的几个概念：Extension Page、background.js、Content_script.js ，它们在什么机会触发，扮演着什么角色，彼此之间如何进行通信？能够看一下上面的关系图：

从图中能够看出，存在三个过程：扩大过程（Extension Process）、页面渲染过程（Render Process）、浏览器过程（Browser Process）。

1）扩大过程中运行Extension Page，Extension Page次要包含backgrount.html和popup.html：

backgrount.html中没有任何内容，是通过background.js创立生成，当浏览器关上时，会主动加载插件的background.js文件，它独立于网页并且始终运行在后盾，它次要通过调用浏览器提供的API和浏览器进行交互；
popup.html则不同，它有内容，是一个实实在在的页面，和咱们一般的web页面一样，由html、css、Javascript组成，它是按需加载的，须要用户去点击地址栏的按钮去触发，能力弹出页面。

2）渲染过程次要运行Web Page,当关上页面时，会将content_script.js加载并注入到该网页的环境中，它和网页中引入的Javascript一样，能够操作该网页的DOM Tree，扭转页面的展现成果；

3）浏览器过程在这里更多起到桥梁作用，作为直达能够实现Extension Page和Content_script.js之间的音讯通信。

四、Chrome扩大插件能做什么

Chrome扩大插件的应用方向次要蕴含两个局部：

扭转浏览器的外观：

brower Actions
page Actions
content menus
桌面告诉
Omnibox
override 代替页

和浏览器进行交互：

Cookie管制
标签管制
书签管制
下载管制
事件监听
网络申请
代理...

上面咱们通过实例来剖析这些性能的应用案例：

实例1:替换页面

应用代替页，能够将Chrome默认的一些特定页面替换掉，改为应用扩大提供的页面。这让开发者能够开发更多乏味或者实用的基本功能页面。

 "chrome_url_overrides": {      "newtab": "newTab.html", //替换新标签页      "bookmarks":"bookmarks.html",   //替换书签管理器页面      "history":"history.html"   //替换历史记录页面   },

上面是一个替换新标签页的效果图：

实例2：Cookie管制

通过Cookie的API，能够对浏览器的Cookie进行增删改查工作。例如咱们在开发工作中，常常须要频繁的革除浏览器缓存，每次都须要先找到革除按钮，弹出对话框，进行确认，操作很繁琐，如果开发一个chrome扩大插件，就能够轻松实现一键快捷革除浏览器Cookie等缓存，能够参考Clear Store插件。

实例3：标签管制

应用chrome.tabs API与浏览器的标签零碎进行交互，能够查问，创立、批改和重新排列浏览器中的标签页;咱们在应用浏览器时，常常会关上很多标签页，显得很凌乱，中途想要找关上的某个页面时，效率低且苦楚，如果能将这些标签页进行整顿并有序的展现该多好，这里给大家举荐一个Chrome扩大插件：OneTab，该插件将所有关上的标签页在新的页面中有序的排列进去，如下图，高深莫测。

咱们甚至能够通过tabs 实现页签之间的交互，出于平安思考，tab的属性中没有document, 因而无奈在扩大中间接获取某个标签页面中的dom元素，然而能够通过发送事件申请来实现：

chrome.tabs.sendRequest(tab_id, {      hello: "ok"    }, function(response){        // response解决});

chrome.extension.onRequest.addListener(  function(request, sender, sendResponse) {    if (request.hello == "ok"){        sendResponse({        data: $("#hello") // 获取id是hello的元素发过来      });    }  });

实例4：拦挡申请或者反向代理

在在页面性能点检时，咱们常常会查看页面图片资源是否存在尺寸过大，例如200K，获取一个过大的图片列表页面。

chrome.webRequest API只能在background.js中应用，所以能够通过图片拦挡，将链接通过音讯传给以后页面的content\_script.js，而后在content\_script.js中进行图片下载和大小查看。

// background.jschrome.webRequest.onBeforeRequest.addListener(  function(details) {    // url就是图片下载的链接    const { url ,tabId} = details    // 向content_script.js发送下载图片链接    chrome.tabs.sendMessage(tabId, {picUrl: url}, function(response) {       //...     });    return {cancel: isCancel};  },  {urls: ["http://baidu.com"],types: "image"},  ["blocking"]);

// content_script.jschrome.runtime.onMessage.addListener(function(request, sender, sendResponse){    if(sender.tab && request.picUrl && request.picUrl == sender.tab.id){       //获取图片大小并下载    }});

实例5：页面元素操作

利用Content_script.js可操作dom元素，进行对页面元素进行操作，实现自动化登录，解放双手。

//输出function input(inputElement, content) {    let event = document.createEvent('HTMLEvents');    event.initEvent('input', true, true);    inputElement.value = content;    inputElement.dispatchEvent(event)}const usernameDom = document.getElementById("userName");  //用户名const pwdDom = document.getElementById("password");  //明码const btnDom = document.getElementById("submitBtn");//按钮//输出后，点击确认input(usernameDom, "姓名");input(pwdDom, "明码");//登录btnDom.click();

五、业务实际

痛点：我目前次要负责vivo寰球商城的业务，全球化的业务都会面临国际化语言的问题，咱们自主开发了一个多语言治理后盾，配置key-value,前端通过接口获取多语言在页面展现；如果经营查看页面，感觉某个文案不太适合，想要批改，须要进行如下图的一系列操作：

能够看到当经营想要批改文案时，他先要晓得该文案对应的key值，而页面下面无奈获取到key值，须要让开发提供，而后须要到多语言治理平台去更新对应key的值。

这样遇到两个问题：

不能所见即所得，看到页面不能晓得key值；
所见无奈间接批改，须要到另一个治理平台去批改；

目前这个在批改内容少的状况下，还是能够操作的，当批改内容很多时，这样操作起来很繁琐，效率很低。

思考：

1）经营是否能够间接在页面上批改并失效？
2）如果能够批改，怎么去实现跨域申请？
3）怎么实现登录受权？

如果对Chrome扩大插件相熟，会发现Chrome就是为这量身定制，能够完满解决这些问题。

实现计划：

1）对页面中波及文案dom进行批改，绑定多语言key值。

<div data-lang-key="address.delete.button">{{ language.addressDeleteButton }}</div>

2）利用Content_script,js能够操作页面dom元素，当启动插件时，将页面所有可批改的文案的dom减少contenteditable属性，反对可编辑，如图；

3）创立一个批改面板，获取以后选中的key值和value值，和批改后的值，如上图，右上角面板。

4）利用Chrome插件反对跨站申请的个性，向多语言平台间接发送批改申请。

chrome.runtime.onMessage.addListener(  function(request, sender, sendResponse) {    var xhr = new XMLHttpRequest();    xhr.open("POST", url, true);    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');    xhr.onreadystatechange = function () {      if (xhr.readyState == 4) {        try{          sendResponse(JSON.parse(xhr.response));        }catch(e) {          // 异样解决        }      }    };    xhr.send(new URLSearchParams(params));    return true  });

5）利用Chrome插件能够获取浏览器中Cookie个性，新开一个标签页关上多语言后盾，进行登录，登录胜利后就能够实现申请的受权批改了。

六、总结

最初总结一下，生存中常常会感叹：看过好多人生情理，仍然过不好这毕生。同样，应用过很多Chrome插件，仍然码不好本人的一个插件，所以最初再送给你一个浏览Chrome插件源码的插件，堪称插件中的插件，插件中的王者——Chrome extension source viewer。通过它能够很不便的查看其它插件的源码，让咱们可能站在伟人的肩膀上往前走~~

作者：vivo互联网前端团队-Zhang hao