chrome插件开发简介（一）——开发入门

时间 2019-11-30

原文原文链接

chrome做为目前最流行的浏览器，备受前端推崇，缘由除了其对于前端标准的支持这一大核心缘由以外，还有就是其强大的扩展性。
基于其开发规范实现的插件现在已经很是庞大，在国内也是欣欣向荣，如天猫开发了大量的扩展，用于检测页面质量以及页面性能，淘宝开发了许多的扩展以供运营工具的优化等等。其强大性不言而喻。javascript

这里咱们来说一下其插件开发css

基础概念

与chrome应用相似，chrome扩展主要是用于扩充chrome浏览器的功能。他体现为一些文件的集合，包括前端文件（html/css/js）,配置文件manifest.json。
主要采用JavaScript语言进行编写。html

个别扩展可能会用到DLL和so动态库，不过出于安全以及职责分离的考虑，在后续的标准中，将会被舍弃，这里再也不赘述前端
chrome扩展能作的事情：html5
- 基于浏览器自己窗口的交互界面
- 操做用户页面：操做用户页面里的dom
- 管理浏览器：书签，cookie，历史，扩展和应用自己的管理，其中甚至修改chrome的一些默认页面，地址栏关键字等，包括浏览器外观主题都是能够更改的
  
  这里须要着重提一下，前端开发者喜欢的DevTools工具，在这里也能进行自定义java
- 网络通讯：http，socket，UDP/TCP等
- 跨域请求不受限制
- 常驻后台运行
- 数据存储：采用3种方式（localStorage，Web SQL DB，chrome提供的存储API（文件系统））
- 扩展页面间可进行通讯：提供runtime相关接口
- 其余功能：下载，代理，系统信息，媒体库，硬件相关（如usb设备操做，串口通讯等），国际化
chrome扩展的限制：web
- 环境限制：基本上功能性操做都须要经过chrome提供的API来完成，这跟实际的页面js又有一些差别，看上去并无那么的彻底自由。chrome
  
  如chrome扩展的页面脚本，能够获取并操做页面dom，可是，出于安全性的考虑，页面脚本的域是独立区分开来的，即js成员变量不共享。json
  
  即：插入到用户页面的js脚本可执行，可是与原始脚本不一样执行域，互相不会影响。跨域
  
  content_script不能使用除了chrome.extension以外的chrome.*的接口,不能访问它所在扩展中定义的函数和变量,不能访问web页面或其它content script中定义的函数和变量,不能作cross-site XMLHttpRequests
- chrome扩展，其功能受限于chrome的API，好比说文件系统，必须经过chrome的fileSystem接口，而这些接口仅仅只是对html5已有的文件系统接口的扩展，它容许Chrome应用读写硬盘中用户选择的任意位置，而HTML5自己提供的文件系统接口则只能在沙箱中读写文件，并不能获取用户磁盘中真正的目录。

举个栗子

下面以一个简单的例子来简述一下咱们开发扩展过程当中会遇到哪些问题

这个栗子主要用于去自定义用户页面的样式（好比此处为改滚动条样式），插入一个自定义的脚本到用户页面中执行（此处为输出一些简单信息）

【1】编辑扩展程序所须要的主要文件夹

文件结构说明

./
 ├─ manifest.json //扩展的配置项
 ├─ Custom.js     //自定义js脚本
 ├─ Custom.css    //自定义css样式
 ├─ icon.png      //扩展程序的icon
 └─ popup.html    //扩展的展现弹窗复制代码

自定义js脚本：浏览器中执行，但并不是真正意义上的“插入”，与原来页面的js域隔离开

例如，custom.js中的window跟页面js中的window不是同一个对象，变量也没法共享。
```
console.log('执行init');
  console.log(document.title);
  console.log(document.getElementById("abc"));
  // 实例函数，能够供popup.html中调用
  function helloWorld(name){
      console.log(`${name} say 'hello world!'`);
      alert(`${name} say 'hello world!'`);
  }
  //...复制代码
```
这样的脚本路径将以 chrome://extensions/扩展的id串码/path/to/you/js/xxx.js出如今控制台调试时候。

自定义样式：一样，css也不是真正的插入到页面的document中，而是浏览器的样式生效策略中会加入这些样式规则

/* 重置滚动条 */
::-webkit-scrollbar {width:4px!important;height:7px;}
::-webkit-scrollbar-button {display:none;}
::-webkit-scrollbar-thumb {border-radius:3px;background: #45A5DB;}
::-webkit-scrollbar-track {width:4px;height:7px;background:transparent;}
::-webkit-scrollbar-track-piece {background:transparent;}

/* ... */复制代码

小窗口popup.html：这里面是一个按钮，点击后去调用custom.js里面的helloWorld函数

<!doctype html>
<html>
  <head>
    <title>hello world</title>
  </head>
  <body>
    <h2>hello world</h2>
    <p><button onclick="dealClick('王小明')">按钮</button></p>
    <script> function dealClick(name){ //这里值得注意，大部分功能性操做，好比执行脚本，执行函数，都是不能够直接执行，而须要经过chrome.*这样方式进行 chrome.tabs.executeScript( null, { code: `helloWorld('${name}')` // 这里调用的是上面的custom.js重定义好的function } ); } </script>
  </body>
</html>复制代码

核心配置文件manifest.json：

{
  "name": "扩展名称",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "扩展描述",
  "icons" : {           // 扩展的icon
    "16" : "icon.png",
    "48" : "icon.png",
    "128" : "icon.png"
  },
  "browser_action": {   // browser_action表示程序图标会出如今地址栏右侧，若要出如今地址栏，则写成page_action
    "default_title": "日报工具",
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "content_scripts": [  //content_scripts是在Web页面内运行的javascript脚本。
                        //经过使用标准的DOM，它们能够获取浏览器所访问页面的详细信息，并能够修改这些信息。
    {                   //这里的值是数组，能够针对多个站点进行不一样的操做配置
      "matches": [
        "http://www.google.com/*"
      ],
      "css": [
        "custom.css"
      ],
      "js": [
        "custom.js"
      ],
      "all_frames": true,
      "run_at": "document_idle"
    }
  ],
  "permissions": [   //一些权限的配置，
    "cookies",       //好比cookie权限，好比系统通知权限，相似于notify这样的东西，在window系统上未右下角的小气泡
    "notifications"
  ]
}复制代码

page_action，browser_action类型的扩展对应位置

【2】打包生成插件包

浏览器打开 chrome://extensions/（或者‘更过工具->扩展程序’）,左上角有一个 打包扩展程序 按钮

而后，将生成的*.crx文件拖到浏览器便可完成安装。

到这步插件其实已经差很少了，固然，这里的功能都比较简单，你能够本身尝试一些更高级的功能

因为本身DIY的扩展是没有发布到web app store的，因此下次打开浏览器时会被禁掉，解决方法见第二篇文章《chrome插件开发简介（二）——如何添“加浏览器扩展白名单”》