Chrome 插件特性及实战场景案例分析_过往记忆的博客

相关文章推荐

谦和的乌冬面 · 关于select的id以及value传给后台 ...· 4 月前 ·

有情有义的汤圆 · 创建供其他人部署的 ClickOnce ...· 5 月前 ·

开心的大海 · Django ...· 6 月前 ·

腼腆的眼镜 · JS正则表达式用星号*替换字符串开头或结尾几 ...· 1 年前 ·

直爽的莴苣 · 数据分析(一)-时序数据采集（zabbix\ ...· 1 年前 ·

提起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.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) {
          sendResponse(JSON.parse(xhr.response));
        }catch(e) {
          // 异常处理
    xhr.send(new URLSearchParams(params));
    return true
 5）利用Chrome插件可以获取浏览器中Cookie特性，新开一个标签页打开多语言后台，进行登录，登录成功后就可以实现请求的授权修改了。 
 最后总结一下，生活中经常会感叹：看过好多人生道理，依然过不好这一生。同样，使用过很多Chrome插件，依然码不好自己的一个插件，所以最后再送给你一个阅读Chrome插件源码的插件，堪称插件中的插件，插件中的王者——Chrome extension source viewer。通过它可以很方便的查看其它插件的源码，让我们能够站在巨人的肩膀上往前走~~ 
                    一、前言提起Chrome扩展插件(Chrome Extension)，每个人的浏览器中或多或少都安装了几个插件，像一键翻译、广告屏蔽、录屏等等，通过使用这些插件，可以有效的提高我们的工作效...
				在开发 Chrome 扩展时经常需要在页面之间进行通讯，比如 background 与 content script 之间，background 与 popup 之间等等，本文结合官方文档中的例子介绍了 chrome 扩展开发中消息传递的基本实现。
一般情况下，我们会让 background 来控制一切，将扩展的主要逻辑都放在 background 中比较便于管理。其它页面可以通过消息传递的
				嗯，标题不是翻译。
        简言 content_scripts 在浏览的网页中运行（注入），background & options_page 在应用里运行，但 content_scripts 可与应用通信，窗体的交互参考前面提供的文档或官方的图和介绍这里不赘述。
       前后台消息通信，刚开始接触时使用一些文档中提供的方法用不了。前后台的发送、接收消息的方式不同，长连
				插件是一个可以自定义浏览体验的小应用程序。它们可以让用户根据自身需求或者喜好修改Chrome浏览器的功能以及行为。插件以HTML、JavaScript以及CSS等网络技术为基础。
插件需满足目的单一的要求，也就是一个插件只解决一个问题，并且应该易于理解。一个插件可以包含多个组件以及多个功能，但这些组件和功能应该服务于同一个目的。
用户界面应该尽可能小并且意图明显。它们可以小到仅仅是一个图标，例如下图所示的查收Google Mail的插件；也可以大到重写了整个页面。
用户下载安装的插件所包含的文件都被打包在
				上节课我们实现的是在google搜索框中输入内容，但是这个内容是在注入的js代码中定义的，我们的目的是当点击菜单项时，把菜单项的内容填写到google搜索框中。如下图GIF动画所示:
请看点击下面的缩略图片进行GIF动画演示。
上节课我们所实现的是当html文档加载完毕时就执行所注入的js代码，但是从上面的GIF动画所演示的效果来看是当用户点击了菜单时才会执行相关的js代码。这种效...
				您好！对于Chrome插件的开发，您可以参考以下文档：
1. [Chrome插件官方文档](https://developer.chrome.com/docs/extensions/mv3/)：这是Chrome官方提供的插件开发文档，包含了插件的基本概念、API文档、示例代码等内容。
2. [Chrome插件开发者指南](https://developer.chrome.com/docs/extensions/mv3/devguide/)：这个指南提供了更详细的插件开发说明，包括如何构建插件、调试和测试插件、发布插件等。
3. [Chrome插件开发入门教程](https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html)：这是一篇较为详细的入门教程，适合初学者快速上手。
4. [Chrome插件开发视频教程](https://www.bilibili.com/video/BV1HJ411t7uF?from=search&seid=1072336349018660225)：这是一系列的视频教程，通过实例演示了插件开发的各个方面。
5. [Chrome扩展程序开发全攻略](https://github.com/sxei/chrome-plugin-demo)：这是一个GitHub项目，包含了大量的Chrome插件开发示例代码和案例，非常适合学习和参考。
希望以上资源对您有帮助！如果有更多问题，请随时提问。