Chrome 插件特性及实战场景案例分析

2021年11月23日 阅读数:9
这篇文章主要向大家介绍Chrome 插件特性及实战场景案例分析,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

1、前言

提起Chrome扩展插件(Chrome Extension),每一个人的浏览器中或多或少都安装了几个插件,像一键翻译、广告屏蔽、录屏等等,经过使用这些插件,能够有效的提升咱们的工做效率;但有时候,咱们想要的某个功能市面上没有现成的插件,做为开发者天然而然想到,本身是否能够动手开发一个定制化的插件?网上目前不少不错的关于Chrome插件的开发教程,能够帮助咱们快速上手开发一个插件, 本文换个思路,从应用着手,经过讲解插件的特性来启发读者在工做中哪些场景能够经过插件来解决。css

本文侧重点不是Chrome插件的基础开发,而是聚焦于原理及应用,会从插件的一些重要特性讲起,结合实际的插件案例,来分析这些特性的做用,从而可以启发读者利用这些特性开发出本身的效率工具,打造本身的趁手利器。

2、什么是Chrome扩展插件

什么是Chrome扩展插件?在咱们印象中,它就像跑在浏览器中的应用,能够把浏览器想象成手机,那么插件就像是应用,咱们从Chrome应用商店中下载,而后安装到Chrome浏览器中,就能够在浏览器中进行运行了。html

咱们看看官方解释:前端

Chrome Extension是一个小的软件程序,它能够用来定义浏览器的浏览体验,让用户能够根据我的需求或者偏好定制Chrome浏览器的功能和行为,主要使用的技术栈是HTML、Javascript和CSS。

一句话总结:Chrome扩展插件是用前端的技术栈,来定制浏览器的功能,改善用户体验java

可能你们还听过一个词:Chrome Plugin。翻译过来是Chrome插件,和Chrome扩展插件很相近,特别容易搞混,那么他们之间有什么区别呢?web

  • Chrome Extension仅仅是用来加强浏览器网页的功能,它是利用浏览器提供的已有功能和和各类API,进行功能组合,从而改善浏览器体验,停留在浏览器层面;
  • Chrome Plugin不只能加强网页的功能,同时可以扩展浏览器自己的功能;当浏览器提供的功能已经没法知足你的需求,就须要你经过C/C++这样的编译语言来扩展浏览器的功能,例如咱们经常使用的Flash 插件,Chrome Plugin工做在内核层面。

3、Chrome扩展插件组成及核心机制

3.1 Chrome扩展插件的组成

一个 Chrome 扩展插件一般由 3 类文件组成:chrome

1) 配置文件 manifest.json,用于配置扩展的名称、版本号、做者、图标 icon、弹出界面、权限、脚本路径等信息;json

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之间的消息通讯。

4、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();

5、业务实践

痛点:我目前主要负责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特性,新开一个标签页打开多语言后台,进行登陆,登陆成功后就能够实现请求的受权修改了。

6、总结

最后总结一下,生活中常常会感叹:看过好多人生道理,依然过很差这一辈子。一样,使用过不少Chrome插件,依然码很差本身的一个插件,因此最后再送给你一个阅读Chrome插件源码的插件,堪称插件中的插件,插件中的王者——Chrome extension source viewer。经过它能够很方便的查看其它插件的源码,让咱们可以站在巨人的肩膀上往前走~~

做者:vivo互联网前端团队-Zhang hao