Vue 创建 Chrome 掘金作者榜扩展

浏览器扩展是可以修改和增强 WEB 浏览器功能的小程序，可以用于各种各样的任务，例如屏蔽广告、管理密码、组织标签、改变网页的外观和行为等等。

浏览器扩展对于前端开发人员来说并不难，因为它们主要使用前端比较熟悉的知识（HTML、CSS 和 JavaScript）创建，跟普通的前端项目一样。与常规WEB项目不同的是，扩展程序可以访问许多特定于浏览器的 API，可以轻松跨域同源策略的限制与任意WEB API 进行通信。

本文以 VUE 来构建掘金 TOP 100 作者榜的 Chrome 扩展，涉及的代码在GItHub上找到，或者直接下载安装文件 DevPoint.crx。

基本知识

一个 Chrome 扩展程序一般包含以下组件：

• manifest.json：告诉 Chrome 扩展程序是什么、如何启动以及需要的额外权限。
  
• background.js：用于创建负责管理扩展程序生命周期的事件页面。
  
• code：包括 HTML、JS、CSS 和 Native Client 模块。
  
• icons：所有图标
  

创建一个 Chrome 扩展程序的一般步骤：

1. 创建 manifest.json 文件；
   
2. 创建 background.js 文件，
   
3. 创建窗口页面
   
4. 创建 icons
   
5. 运行调试扩展程序：单击 Chrome 设置图标 -> 更多工具 > 扩展程序 来打开扩展程序管理页面，打开开发者模式，然后加载已解压的扩展程序，选择文件夹即可。
   

而使用 VUE 来开发扩展，与普通 VUE 项目开发一样，在不改变原有 VUE 项目开发的流程的基础上，增加文件 manifest.json ，如下：

{
"manifest_version": 2,
"name": "DevPoint扩展",
"description": "DevPoint扩展",
"version": "0.0.2",
"browser_action": {
"16": "./statics/icons/logo-16.png",
"19": "./statics/icons/logo-32.png",
"38": "./statics/icons/logo-64.png"
},
"icons": {
"128": "./statics/icons/logo-128.png",
"64": "./statics/icons/logo-64.png",
"32": "./statics/icons/logo-32.png",
"16": "./statics/icons/logo-16.png"
},
"background": {
"persistent": true,
"scripts": [
"./statics/background.js"
]
},
"permissions": [
"storage",
"cookies",
"activeTab",
"tabs",
"notifications",
"<all_urls>",
"http://*/",
"https://*/"
],
"offline_enabled": true,
"content_security_policy": "script-src 'self' 'unsafe-eval' https://*.juejin.cn ; object-src 'self'",
"content_scripts": [],
"web_accessible_resources": [
"*"
]
}

上面代码中比较重要的属性有以下几个：

• permissions：设置控制浏览器相关的权限，如 activeTab
  
• content_security_policy：用于有限地放宽CSP（内容安全策略），通常前端项目通过AJAX是不能正常与其他站点进行数据交互，这个配置用于设置通讯的白名单。
  

接下来增加 background.js，主要是实现基于 Chrome 事件的逻辑，如下：

/* eslint-disable no-undef */
((chromeHelper) => {
// 获取当前选项卡ID
const tabUrl = chromeHelper.extension.getURL("index.html");
let tabId = 0;
const getCurrentTabId = (
callback,
options = { active: true, currentWindow: true }
) => {
chromeHelper.tabs.query(options, (tabs) => {
if (callback) callback(tabs.length ? tabs[0].id : null);
});
};
const openUrlTab = (url, openedId, callback) => {
const tabOptions = { url: url };
if (openedId === 0) {
chromeHelper.tabs.create(tabOptions);
getCurrentTabId((currentId) => {
callback(currentId);
});
} else {
chromeHelper.tabs.update(openedId, { active: true }, (res) => {
if (!res) {
chromeHelper.tabs.create(tabOptions);
getCurrentTabId((currentId) => {
callback(currentId);
});
}
});
}
};
chromeHelper.browserAction.onClicked.addListener(() => {
openUrlTab(tabUrl, tabId, (currentId) => {
tabId = currentId;
});
});
})(chrome);

上面的代码实现了点击插件图标打开一个新的 tab 标签，跳转到插件页面，但在浏览器其他 tab 信息的时候再点击插件图标回到插件标签页。

为了更好的调试 VUE 插件，增加一个启动脚本，修改 package.json ，增加一个命令，用于调试插件。

"chrome": "VUE_APP_VERSION=1.0.0 vue-cli-service build --watch",

覆盖 Chrome 的新标签页

当打开一个新标签时显示插件页面内容，就需要修改配置 chrome_url_overrides 来做到这一点，主要是修改 manifest.json` 配置信息，如下：

"chrome_url_overrides": {
"newtab": "index.html"
},

这个配置项主要是三个属性，如下：

• bookmarks：当用户从 Chrome 菜单中选择书签管理器菜单项或在 Mac 上从书签菜单中选择书签管理器项时出现的页面，也可以通过输入 URL chrome://bookmarks 来访问此页面。
  
• history：当用户从 Chrome 菜单中选择历史菜单项或在 Mac 上从历史菜单中选择显示完整历史项时出现的页面，也可以通过输入 URL chrome://history 来访问此页面。
  
• newtab：用户创建新选项卡或窗口时显示的页面，也可以通过输入 URL chrome://newtab 来访问此页面，掘金插件就是使用这个选项。
  

发布扩展

如果想让其他人可以下载你的扩展程序，可以通过发布到 Chrome 网上应用店来完成。

这里通过 Chrome 扩展管理来打包扩展程序，点击按钮选择项目跟目中的 dist 文件夹

点击按钮 打包扩展程序 等待打包提示，.crx 即为扩展程序的安装程序，在谷歌浏览器中输入 chrome://extensions/ 并文件拖到这里即可完成安装。

由于扩展没有发布，因此在 Chrome 无法正常打开，如有兴趣建议拉取代码下料以开发模式打开。

总结

本文简要介绍了如何使用 VUE 制作一个 Chrome 浏览器扩展，一般只需要public文件夹中增加 manifest.json 和 backgroud.js 。代码简单实现了一个掘金用户榜单，这不是最适合的场景，但以此展示 Chrome 扩展能够做什么。