浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序。它们可用于各种任务，例如阻止广告，管理密码，组织标签，改变网页的外观和行为等等。
好消息是浏览器扩展并不难写。可以用你已经熟悉的 Web 技术（HTML、CSS 和 JavaScript）创建 —— 就像普通网页一样。但是与网页不同的是，扩展程序可以访问许多特定于浏览器的 API，这才是有趣的地方。
在本教程中，我将向你展示如何为 Chrome 构建一个能够改变新标签页行为的简单扩展。这个扩展程序的 JavaScript 部分，我将使用 Vue.js 框架，因为它将允许我们快速启动并运行，而且用 vue 工作是很有趣的。
Chrome 扩展程序的基础知识
Chrome扩展程序的核心部分是 manifest 文件 和后台脚本。manifest 文件采用JSON格式，提供有关扩展的重要信息，例如其版本、资源或所需的权限。后台脚本允许扩展对特定的浏览器事件做出反应，例如创建新选项卡。
为了演示这些概念，让我们先写一个“Hello，World！” Chrome 扩展。
创建一个名为 hello-world-chrome 的新文件夹和两个文件：manifest.json 和 background.js：
mkdir hello-world-chrome cd hello-world-chrome touch manifest.json background.js
打开 manifest.json 并添加以下代码：
{ "name": "Hello World Extension", "version": "0.0.1", "manifest_version": 2, "background": { "scripts": ["background.js"], "persistent": false } }
name、version 和 manifest_version 都是必填字段。 name 和 version 字段可以是你想要的任何内容; manifest version 应设置为2（从Chrome 18开始）。
background 允许我们注册一个后台脚本， 在scripts 后面的数组中列出。除非扩展需要用 chrome.webRequest API来阻止或修改网络请求，否则 persistent 键应设置为 false。
将以下代码添加到 background.js ，使浏览器在安装扩展时弹出出 hello 对话框：
chrome.runtime.onInstalled.addListener(() => { alert('Hello, World!'); });
最后安装扩展程序。打开 Chrome 并在地址栏中输入 chrome://extensions/。你应该看到一个显示已安装扩展程序的页面。
由于我们要从文件（而不是Chrome网上应用店）安装自己的扩展程序，因此需要使用页面右上角的切换按钮来激活开发者模式。
这应该添加一个额外的菜单栏，其中包含 Load unpacked选项。单击此按钮并选择你之前创建的 hello-world-chrome 文件夹。单击打开，应该能够看到已安装的扩展，并弹出“Hello，World！”窗口。
恭喜！你刚刚制作了一个 Chrome 扩展程序。
覆盖 Chrome 的新标签页
为了在打开新选项卡时迎接我们的是自己的扩展程序。可以通过使用 Override Pages API 来完成此操作。
注意：在你取得进展之前，请务必停用其他能够覆盖 Chrome 新标签页的扩展程序。一次只允许一个扩展改变这种行为。
首先创建一个要显示的页面，而不是新的标签页。我们称之为 tab.html。它应该与清单文件和后台脚本位于同一文件夹中：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My New Tab Page!</title> </head> <body> <h1>My New Tab Page!</h1> <p>You can put any content here you like</p> </body> </html>
接下来需要让扩展知道页面的存在。可以通过在清单文件中指定 chrome_url_overrides 来实现，如下所示：
"chrome_url_overrides": { "newtab": "tab.html" }
最后，你需要重新加载扩展才能使更改生效。你可以通过在 Chrome 的扩展程序页面上单击 Hello World 扩展程序的 reload 图标来执行此操作。
现在，当你打开新标签页时，你的自定义消息会出现。
将Vue添加到扩展
现在我们有一个非常基本的扩展，接下来要实现剩下的需功能了。当用户打开新标签页时，我希望扩展能够：
当然你也可以用纯 JavaScript 或像 jQuery 这样的库来完成所有这些 —— 你开心就好！
但是出于本教程的目的，我将用 Vue 和令人敬畏的vue-web-extension 样板来实现此功能。