一、前言说到Chrome扩展（ChromeExtension），每个人的浏览器都或多或少安装过几个插件，比如一键翻译、广告拦截，录屏等等，通过使用这些插件，我们可以有效的提高我们的工作效率；但是有时候，我们想要的某个功能，市场上并没有现成的插件，作为开发者，自然会想到是否可以自己开发一个定制的插件呢？目前网上有很多不错的Chrome插件开发教程，可以帮助我们快速开发一个插件。本文换个思路，从应用出发，讲解插件的特点，启发读者在工作中哪些场景可以通过插件来解决。本文的重点不是Chrome插件的基础开发，而是原理和应用。将从插件的一些重要特性入手，结合实际插件案例分析这些特性的作用，以期启发读者利用这些特性开发自己的效率工具，打造属于自己的得心应手武器。2.什么是Chrome扩展什么是Chrome扩展？在我们的印象中，它就像一个运行在浏览器中的应用程序。我们可以把浏览器想象成一部手机，把插件想象成一个应用程序。我们从Chrome应用商店下载并安装到Chrome浏览器中，然后我们就可以在Chrome浏览器中下载了。在浏览器中运行。我们来看看官方的解释：ChromeExtension是一款可以用来定义浏览器浏览体验的小软件程序，允许用户根据个人需要或喜好自定义Chrome浏览器的功能和行为。使用的主要技术栈是HTML、Javascript和CSS。一句话总结：Chrome扩展使用前端技术栈来自定义浏览器功能，提升用户体验。你可能听说过一个词：ChromePlugin。翻译过来就是Chromeextension，和Chromeextension很像，特别容易混淆。那么它们之间有什么区别呢？ChromeExtension仅用于增强浏览器网页的功能。它利用浏览器提供的现有功能和各种API进行功能组合，提高浏览器体验，停留在浏览器层面；ChromePlugin不仅可以增强网页的功能，还可以扩展浏览器本身的功能；当浏览器提供的功能已经不能满足你的需求时，你需要通过C/C++等编译型语言来扩展浏览器的功能，比如我们常用的Flash插件，Chrome插件工作在内核级别.3.Chrome扩展的组成及核心机制3.1Chrome扩展的组成一个Chrome扩展通常由三类文件组成：1）配置文件manifest.json，用于配置名称、版本号、作者、图标扩展界面的图标、弹窗、权限、脚本路径等信息；2）图片、css等资源文件；3）js脚本文件，其中包括：popup.js：与popup.html一起使用，点击插件图标时，显示页面和页面逻辑控件；background.js：用于定义一个背景页面，即相当于一个常驻页面，与浏览器具有相同的生命周期；content_scripts.js：用于在页面中注入JS脚本，可以操作页面dom，但不会与页面中的脚本冲突。3.2ChromeExtension的核心机制ChromeExtension中有几个核心概念：ExtensionPage、background.js、Content_script.js，它们什么时候被触发，分别扮演什么角色，它们之间又是如何通信的？大家可以看下面的关系图：从图中可以看出，一共有三个进程：ExtensionProcess、RenderProcess、BrowserProcess。1）在扩展过程中运行扩展页面。ExtensionPage主要包括background.html和popup.html：background.html没有内容，由background.js生成。当浏览器打开时，它会自动加载插件的背景。js文件，独立于网页，一直在后台运行，主要通过调用浏览器提供的API与浏览器进行交互；popup.html就不一样了，它是有内容的，它是一个真实的页面，和我们普通的网页一样，它是由html、css、Javascript组成的。它是按需加载的，需要用户点击地址栏中的按钮来触发页面弹出。2）渲染进程主要运行网页。当页面打开时，content_script.js将被加载并注入到网页的环境中。和网页中介绍的Javascript是一样的。它可以操作网页的DOMTree，改变页面的显示。影响;3）浏览器进程在这里更多的起到了桥梁作用，作为一个中转，可以实现ExtensionPage和Content_script.js之间的消息通信。4.Chrome扩展可以做什么Chrome扩展的使用主要包括两个部分：改变浏览器的外观：浏览器ActionspageActionscontent菜单DesktopnotificationOmniboxoverrideAlternativepage与浏览器的交互：Cookies控制标签控制书签控制下载控制事件监听到网络请求代理...让我们通过示例来分析这些功能的用例：示例1：替换页面使用替换页面，您可以在Chrome中默认替换某些特定页面，并使用扩展程序提供的页面代替。这使得开发者可以开发出更有趣或更实用的页面，具有基本的功能。"chrome_url_overrides":{"newtab":"newTab.html",//替换新标签页"bookmarks":"bookmarks.html",//替换书签管理器页面"history":"history.html"//替换历史页面}，下面是替换新标签页的效果图：示例2：Cookie控件通过CookieAPI，您可以添加、删除、修改和查看浏览器的Cookies。比如在我们的开发工作中，经常需要经常清理浏览器缓存。每次我们需要找到清除按钮，弹出对话框，确认。操作非常麻烦。如果我们开发一个chrome扩展插件，可以轻松实现一键快捷清除浏览器cookies等缓存，可以参考ClearStore插件。示例3：Tab控件使用chrome.tabsAPI与浏览器的标签系统进行交互，可以在浏览器中查询、创建、修改和重新排列标签页；我们在使用浏览器的时候，经常会打开很多标签页，看起来很混乱。当你想找到你中途打开的某个页面时，效率低下且痛苦。如果您可以组织这些选项卡并有序地显示它们，那就太好了。这里推荐一款Chrome扩展插件：OneTab，它将所有打开的标签页有序的排列在新页面上，如下图，一目了然。我们甚至可以通过选项卡实现选项卡之间的交互。出于安全考虑，tabs的属性中没有document，所以在extension中无法直接获取tab页中的dom元素，但是可以通过发送事件请求来实现：chrome.tabs.sendRequest(tab_id,{hello:"ok"},function(response){//响应处理});chrome.extension.onRequest.addListener(function(request,sender,sendResponse){if(request.hello=="ok"){sendResponse({data:$("#hello")//获取id为hello的元素并将其发送过去});}});示例四：在页面的性能点拦截请求或反向代理在检查的时候，我们经常会检查页面图片资源的大小是否过大，比如200K，得到的图片列表页面过大。chrome.webRequestAPI只能在background.js中使用，所以可以通过图片进行拦截，通过消息将链接发送到当前页面的content\_script.js，即可下载图片并在content\_script.js中检查大小。//background.jschrome.webRequest.onBeforeRequest.addListener(function(details){//url为图片下载链接const{url,tabId}=details//将下载图片链接发送到content_script.jschrome.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元素来操作页面元素，实现自动登录，解放双手。//输入函数input(inputElement,content){letevent=document.createEvent('HTMLEvents');event.initEvent('输入',true,true);inputElement.value=内容；inputElement.dispatchEvent(event)}constusernameDom=document.getElementById("userName");//用户名constpwdDom=document.getElementById("password");//密码constbtnDom=document.getElementById("submitBtn");//按钮//输入后，点击确认输入(usernameDom,"name");input(pwdDom,"密码");//登录btnDom.click();五、业务实践痛点：本人目前主要负责vivo全球商城的业务，全球业务会面对国际化语言的问题，我们自主开发了多语言管理后台，配置key-value，前端通过界面获取页面的多语言显示；进行如下图所示的一系列操作：可以看到，当操作者想要修改文案时，首先要知道文案对应的key值，但是在页面上获取不到key值，就需要开发提供，然后需要去多语言管理平台更新对应key的值。这种方式有两个问题：看不到得到什么，看到页面也不知道key值；不能直接修改看到的，需要去别的管理平台修改；目前这个在修改内容比较少的时候还是可以操作的，在修改内容很多的时候，这个操作非常繁琐，效率低下。思考：1）能否直接在页面修改操作并生效？2）如果可以修改，如何实现跨域请求？3）如何实现登录授权？如果你熟悉Chrome扩展，你会发现Chrome就是为此量身定做的，可以完美解决这些问题。实施方案：1）修改页面中与文案相关的dom，绑定多语言键值。
