Vue 创建 Chrome 掘金作者榜扩展

1,128 阅读4分钟

「本文已参与好文召集令活动,点击查看:后端、大前端双赛道投稿,2万元奖池等你挑战!

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

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

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

WX20210722-194234@2x.png

image.png image.png image.png

基本知识

一个 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 文件夹

image.png

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

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

总结

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