chrome extension 干货（记录中）

image.png

什么是Chrome插件

严格来讲，我们正在说的东西应该叫Chrome扩展(Chrome Extension)，真正意义上的Chrome插件是更底层的浏览器功能扩展，可能需要对浏览器源码有一定掌握才有能力去开发。鉴于Chrome插件的叫法已经习惯，本文也全部采用这种叫法，但需知道本文所描述的Chrome插件实际上指的是Chrome扩展。

Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包，其实不只是前端技术，Chrome插件还可以配合C++编写的dll动态链接库实现一些更底层的功能(NPAPI)，比如全屏幕截图。

公司在开发安全浏览器过程中，采用了chrome extension技术实现了标签页的替换，本文将针对标签页替换做简单介绍。

首先讲一下manifest.json插件配置文件

这是一个Chrome插件最重要也是必不可少的文件，用来配置所有和插件相关的配置，必须放在根目录。其中，manifest_version、name、version3个是必不可少的，description和icons是推荐的。

示例：

{
  "manifest_version": 2,
  "name": "***",
  "version": "1.0.0",
  "default_locale":"zh_CN",
  "description": "__MSG_pluginDesc__",
  "icons": {
    "16": "img/icon.png",
    "48": "img/icon.png",
    "128": "img/icon.png"
  },
  "background": { // 可常驻浏览器后台的脚本，可以连接其他页面
    "scripts": ["js/background.js"]
  },
  "author" : {
    "name" : "L.PL",
    "birth" : 1991
  },
  "file_system_provider_capabilities": { // 使用chrome.fileSystemProvider API创建文件系统，可以从Chrome OS上的文件管理器访问。
    "configurable": true,
    "multiple_mounts": true,
    "source": "network"
  },
  //"page_action": {},// 图标显示在地址栏右侧，只在特定页面高亮
  "content_scripts": [// 所有页面注入content-scripts和原始页面共享DOM，但是不共享JS，如要访问页面JS（例如某个JS变量），只能通过injected js来实现
    {
      "matches": [
        "<all_urls>"// "<all_urls>" 表示匹配所有地址
      ],
      "js": [
        "js/content-script.js" //里面去引入inject.js实现“ 在页面上添加一个按钮并调用插件的扩展API ”需求
      ],
      "run_at": "document_start",// 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle
      "all_frames": true
    }
  ],
  "web_accessible_resources": [// 普通页面能够直接访问的插件资源列表，这些资源的访问URL是 chrome-extension://[PACKAGE ID]/[PATH]，可通过调用chrome.extension.getURL构造出。 这些白名单资源
    "js/inject.js"
  ],
  "optional_permissions":[],//chrome.permissions.request 去请求权限,并且需要获得用户授权
  "offline_enabled": true,// 是否可离线
  "permissions": [ // 权限申请列表
    "management",// chrome.management 模块提供了管理已安装和正在运行中的扩展或应用的方法。对于重写内建的新标签页的扩展尤其有用
    "tabs", // 标签chrome.tabs
    "webRequest", // web请求
    "webRequestBlocking",
    "storage", // 插件本地存储
    "http://*/*", // 可以通过executeScript或者insertCSS访问的网站
    "https://*/*", // 可以通过executeScript或者insertCSS访问的网站
    "unlimitedStorage",//H5文件系统免于申请权限
    "background",//后台页面权限
    "topSites"//常用访问
  ],
  "chrome_url_overrides": { //只支持bookmarks、history、newtab三个页面
    "newtab": "newtab.html"
  },
  "minimum_chrome_version": "49",
  "content_security_policy": "script-src chrome://resources 'self' 'unsafe-eval';object-src 'none';child-src 'none'"
  //"platforms": ,// 可以将部分基于平台的功能文件放入_platform_specific目录然后列在此项中减少插件体积
  //"plugins": [{ "path": "extension_plugin.dll" }],// NPAPI插件已经支持，现在支持PPAPI
}

创建 newtab.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>新建标签页</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <link href="./img/icon.png" rel="shortcut icon" type="image/x-icon">
</head>

<body>
<div id="app">
   Hello World!
</body>
</html>

在chrome 浏览器地址栏中打开chrome://extensions/ 打包扩展程序生成.crx安装包即可。
快点动手，实现自己的第一个Chrome扩展吧！

原创不易，点赞支持~