关于前端:Chrome-插件特性及实战场景案例分析

提起 Chrome 扩大插件(Chrome Extension)，每个人的浏览器中或多或少都装置了几个插件，像一键翻译、广告屏蔽、录屏等等，通过应用这些插件，能够无效的进步咱们的工作效率；但有时候，咱们想要的某个性能市面上没有现成的插件，作为开发者自然而然想到，本人是否能够入手开发一个定制化的插件？网上目前很多不错的对于 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）配置文件 manifest.json，用于配置扩大的名称、版本号、作者、图标 icon、弹出界面、权限、脚本门路等信息；

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

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

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

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 扩大插件的应用方向次要蕴含两个局部：

扭转浏览器的外观：

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.js
chrome.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.js
chrome.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

关于前端:Chrome-插件特性及实战场景案例分析

一、前言

二、什么是 Chrome 扩大插件

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

3.1 Chrome 扩大插件的组成

3.2 Chrome 扩大插件的外围机制

四、Chrome 扩大插件能做什么

五、业务实际

六、总结

Just My Socks（注册教程内含优惠码）

关于前端:Chrome-插件特性及实战场景案例分析

一、前言

二、什么是 Chrome 扩大插件

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

3.1 Chrome 扩大插件的组成

3.2 Chrome 扩大插件的外围机制

四、Chrome 扩大插件能做什么

五、业务实际

六、总结

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）