「本文已参与好文召集令活动,点击查看:后端、大前端双赛道投稿,2万元奖池等你挑战!」
浏览器扩展是可以修改和增强 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 扩展程序的一般步骤:
-
创建
manifest.json
文件; -
创建
background.js
文件, -
创建窗口页面
-
创建
icons
-
运行调试扩展程序:单击 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 上从书签菜单中选择书签管理器项时出现的页面,也可以通过输入 URLchrome://bookmarks
来访问此页面。 -
history
:当用户从 Chrome 菜单中选择历史菜单项或在 Mac 上从历史菜单中选择显示完整历史项时出现的页面,也可以通过输入 URLchrome://history
来访问此页面。 -
newtab
:用户创建新选项卡或窗口时显示的页面,也可以通过输入 URLchrome://newtab
来访问此页面,掘金插件就是使用这个选项。
发布扩展
如果想让其他人可以下载你的扩展程序,可以通过发布到 Chrome 网上应用店来完成。
这里通过 Chrome 扩展管理来打包扩展程序,点击按钮选择项目跟目中的 dist
文件夹
点击按钮 打包扩展程序
等待打包提示,.crx
即为扩展程序的安装程序,在谷歌浏览器中输入 chrome://extensions/
并文件拖到这里即可完成安装。
由于扩展没有发布,因此在 Chrome 无法正常打开,如有兴趣建议拉取代码下料以开发模式打开。
总结
本文简要介绍了如何使用 VUE 制作一个 Chrome 浏览器扩展,一般只需要public文件夹中增加 manifest.json
和 backgroud.js
。代码简单实现了一个掘金用户榜单,这不是最适合的场景,但以此展示 Chrome 扩展能够做什么。