前言

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

好消息是浏览器扩展并不难写。你可以用熟悉的Web技术(HTML、CSS和JavaScript)创建——，就像普通的网页一样。但是与网页不同，扩展可以访问许多特定于浏览器的API，这很有趣。

在本教程中，我将向您展示如何为Chrome构建一个简单的扩展，它可以改变新选项卡的行为。对于这个扩展的JavaScript部分，我将使用Vue.js框架，因为它将允许我们快速启动和运行，与Vue一起工作非常有趣。

本教程的代码可以在GitHub上找到

Chrome扩展的基本知识

Chrome扩展的核心部分是清单文件和后台脚本。清单文件采用JSON格式，并提供了关于扩展的重要信息，如版本、资源或所需权限。后台脚本允许扩展对特定的浏览器事件做出反应，例如创建新的选项卡。

为了演示这些概念，让我们写一篇“你好，世界！”Chrome扩展

创建一个名为hello-world-chrome的新文件夹和两个文件：manifest.json和background.js:

mkdir hello-world-chrome CD hello-world-chrome touch manifest . jsonbackground . js打开manifest.json并添加以下代码：

{ ' name ' : ' Hello World Extension '，' version': '0.0.1 '，' manifest_version': 2，' background ' : { ' scripts ' :[' background . js ']，Persistent ' : false } }名称、版本和manifest_version都是必填字段。名称和版本字段可以是您想要的任何内容；清单版本应该设置为2(从Chrome 18开始)。

后台允许我们注册一个后台脚本，并将其列在脚本后面的数组中。除非扩展需要使用chrome.webRequest API来阻止或修改网络请求，否则持久键应该设置为false。

将以下代码添加到background.js中，使浏览器在安装扩展时弹出hello对话框：

chrome . runtime . on installed . addlistener(()={ alert(' Hello，World！');});最后，安装扩展程序。打开Chrome，在地址栏中输入Chrome :///extensions/即可。您应该会看到一个显示已安装扩展的页面。因为我们想从一个文件(而不是Chrome在线应用商店)安装自己的扩展程序，所以我们需要使用页面右上角的切换按钮来激活开发者模式。

这应该会添加一个额外的带有“加载未打包”选项的菜单栏。点击这个按钮，选择你之前创建的hello-world-chrome文件夹。点击打开，你应该可以看到安装的扩展，并弹出“你好，世界！”窗户。

恭喜你！你刚刚做了一个Chrome扩展。

覆盖Chrome的新标签

为了在打开新标签页时欢迎我们，这是我们自己的扩展程序。您可以通过使用覆盖页面应用编程接口来实现这一点。

注意：在您取得进展之前，请确保禁用可以覆盖Chrome新选项卡的其他扩展。一次只允许一个扩展来更改此行为。

首先，创建一个要显示的页面，而不是一个新的选项卡。我们称之为tab.html。它应该与清单文件和后台脚本位于同一文件夹中：

！DOCTYPE html html lang=' en ' hearteta charset=' UTF-8 '标题我的新标签页！/title/head dy1我的新标签页！/h1 pyou可以在这里放任何你喜欢的内容/p/body/html接下来，你需要让扩展知道页面的存在。您可以通过在清单文件中指定chrome_url_overrides来做到这一点，如下所示：

chrome _ URL _ overrides ' : { ' new tab ' : ' tab . html ' }最后，您需要重新加载扩展才能使更改生效。你可以通过点击Chrome扩展页面上Hello World扩展的重载图标来实现。

现在，当您打开一个新的选项卡时，您的自定义消息将会出现。

将Vue添加到分机

现在我们有了一个非常基本的扩展，然后我们必须实现剩余的必需功能。当用户打开新选项卡时，我希望扩展：

从精彩笑话网站icanhazdadjoke.com获得一个笑话。以良好的格式向用户展示笑话。显示用户喜欢这个笑话的按钮。通过这种方式，您可以将笑话保存到chrome.storage显示一个按钮，供用户查看最喜欢的笑话。当然，你也可以用纯JavaScript或者像jQuery这样的库来完成所有这些——，只要你开心就好！

但是出于本教程的目的，我将使用Vue和awesome vue-web扩展模板来实现这个功能。

使用Vue可以让我更快更好地编写更有条理的代码。正如我们所看到的，模板文件提供了几个脚本，可以解决构建Chrome扩展时一些令人痛苦的常见任务(例如，无论何时进行更改，都必须重新加载扩展)。

vue-web-扩展-样板

本节假设您的计算机上安装了节点和npm。如果不是这样，您可以去nodejs.org/en/获取相关的二进制文件，或者使用版本管理器。我建议使用版本管理器。

我们还需要安装Vue CLI和@vue/cli-init包：

npminstall-g @ vue/clipminstall-g @ vue/CLI-init完成后，让我们获取模板的副本：

这将打开一个向导，并问你一大堆问题。为了确保本教程的重点，我列出了答案：

？项目名称新建-选项卡-页面？项目描述A Vue.js web扩展？作者詹姆斯希巴德？许可麻省理工学院？使用Mozilla的网络扩展polyfill？没有吗？提供选项页面？没有吗？安装vue路由器？没有吗？安装vuex？没有吗？安装axios？什么事？安装ESLint？没有吗？安装更漂亮？没有吗？自动安装依赖项？Npm您可以根据自己的喜好调整答案，但必须安装axios。我们会用它来开玩笑。

接下来，切换到项目目录并安装依赖项：

Cd new-tab-pagenpm安装，然后我们可以使用模板提供的脚本构建新的扩展：

Npm运行watch:dev这将在项目根目录的dist文件夹中构建扩展，用于开发和监控更改。

要向Chrome添加扩展名，请按照上述步骤操作，并选择dist文件夹作为扩展名目录。如果一切按计划进行，你应该会看到“你好世界！”当扩展初始化时，消息。

项目设置

让我们花点时间看看模型给了我们什么。当前文件夹结构应该如下所示：区 该建了extension节点_模块 一两个文件和folderspackage.jsonpackage-lock.json脚本 建-zip . jsremove-evals.jssrc后台. js图标图标_ 128 . png图标_ 48 . png图标. xcf清单. json弹出vuepopup.html在项目的根目录中可以看到webpack.config.js，而模板文件是使用webpack的。这很好，因为它为我们的后台脚本提供了热模块重载。

src文件夹包含我们将用于扩展的所有文件。Manifest文件和background.js是我们熟悉的，但是我们也应该注意包含Vue组件的弹出文件夹。当模板文件将扩展名构建到dist文件夹中时，它将管理所有的。通过vue-loader加载vue文件，并输出浏览器可以理解的JavaScript包。

src文件夹中还有一个图标文件夹。如果你看看Chrome的工具栏，你会看到我们扩展程序的新图标(也叫浏览器动作)。这是我从这个文件夹里得到的。如果你点击它，你应该会看到一个弹出窗口显示“你好世界！”这是由popup/App.vue创建的

最后，请注意scripts文件夹中的两个脚本：一个是删除eval用法，以符合Chrome Web Store的内容安全策略，另一个是当您想要将其上传到Chrome Web Store时，将扩展名打包为. zip文件。

各种脚本也在package.json文件中声明。我们将使用npm运行watch:dev开发扩展，然后使用npm运行build-ZIP生成一个ZIP文件上传到Chrome Web Store。

在新选项卡中使用Vue组件

首先，从background.js中删除烦人的alert语句

在src文件夹中创建一个新的标签文件夹来存储新标签的代码。我们将在这个新文件夹中添加三个文件—— App.vue、tab.html和tab.js:

mkdir src/tab touch src/tab/{ app . vue，tab.html，tab.js}打开tab.html并添加以下内容：

！DOCTYPE html html lang=' en ' hearteta charset=' UTF-8 ' title new Tab Page/title link rel='样式表' href='tab.css' rel='外部no follow '/Headymdiv id=' app '/div script src=' http : Tab . js '/script/body/html这里没什么特别的。这是一个简单的HTML页面，将保存我们的Vue实例。

然后添加tab.js:

从“Vue”导入Vue；从“”导入应用程序。/App '；new Vue({el: '#app '，render :h=h(App)})；在这里导入Vue，用它传递元素的选择器，然后告诉它渲染App组件。

最后，在App.vue中编写以下代码：

template p { { message } }/p/templatescriptexport default { data(){ return { message : ' My new tab page ' } } }/script style scope DP { font-size : 20px；}/style在使用这个新选项卡之前，我们需要更新清单文件：

{'name' :' new-tab-page '，chrome _ URL _ overrides ' : { ' new tab ' : ' tab/tab . html ' } }为了使它们可用于扩展，我们还需要让模板编译我们的文件并将其复制到dist文件夹中。

通过修改webpack.config.js更新条目和插件密钥，如下所示：

entry: {'background': '。/background.js '，' popup/popup': '。/popup/popup.js '，' tab/tab': '。/tab/tab.js'}plugins: [.新的copywebpackkplugin([{ from : ' icons '，to: 'icons '，ignore: ['icon.xcf'] }，{ from: 'popup/popup.html '，to: 'popup/popup.html '，transform: transformHtml }，{ from: 'tab/tab.html '，to: 'tab/tab.html '，Transform:transform html}，})您需要重新启动npm run watch:dev任务才能使这些更改生效。完成后，重新加载扩展并打开一个新的选项卡。您应该会看到“我的新标签页”。

获取并展示笑话

好了，我们已经覆盖了Chrome的新标签，并用mini Vue应用取代了它。但我们需要做的不仅仅是展示一条信息。

在src/tab/App.vue中更改模板部分，如下所示：

template div div v-if=' loading ' p loading./p/div/div v-elsep class=' joke ' { joke } }/p/div/div/template将脚本部分更改为以下代码：

从“axios”脚本导入axios；export default { data(){ return { load : true，joke: ' '，}}，mounted(){ axios . get(' https://icanhazdadjoak.com/'，{ ' headers ' : { ' Accept ' : ' application/JSON ' } })。然后(RES={ this . joke=RES . data . joke this . loading=false；});}}/script最后，将样式部分更改为以下代码：

stylebody { height: 98vh文本对齐：中心；color: # 353638font-size : 22px；线高： 30px；字体-family:梅里韦瑟，佐治亚州，衬线；背景尺寸size: 200pxdisplay: flexalign-items:居中；justice-content : center；}.笑话{ max-width : 800 px；}/style如果您正在运行npm run watch:dev任务，扩展程序会自动重新加载，每次打开新选项卡时都会看到一个笑话。

然后花点时间知道你做了什么。

在模板中，我们使用v-if块来显示加载消息或笑话，具体取决于加载状态。最初它被设置为真(显示加载消息)，然后我们的脚本将触发Ajax请求来检索笑话。一旦Ajax请求完成，loading属性将被设置为false，导致组件被重新呈现并显示笑话。

在脚本部分，我们导入了axios，然后声明了几个数据属性——，前面提到的加载属性和一个笑话属性来保存这个笑话。然后，使用挂载生命周期钩子，一旦我们的Vue实例被挂载，它就会触发，并向joke API发送Ajax请求。请求完成后，更新两个数据属性，使组件重新呈现。

到目前为止，还算不错。

将笑话保存到Chrome Storage

接下来，添加一些可以让用户喜欢一个笑话的按钮，列出喜欢的笑话。由于我们将使用Chrome的存储API来保存这些笑话，我们可能需要添加第三个按钮来删除存储中的笑话。向v-else块添加一个按钮：

div v-elsep class=' Joke ' { { Joke } }/pbutton @ click=' like Joke ' : disabled=' like button disabled ' like Joke/关于button button @ click=' log chains ' class=' BTN ' log chains/button button @ click=' clear storage ' class=' BTN ' clear storage/button/div。请注意，我们将按钮状的禁用属性绑定到Vue实例上的数据属性，以确定其状态。这是因为用户不应该喜欢一个笑话很多次。

接下来，将单击处理程序和禁用的类似按钮添加到脚本部分：

导出默认值{ data(){ return { load : true，joke: ' '，likeButtonDisabled: false}}，methods : { likeJoke(){ chrome . storage . local . get(' jokes '，(res)={if(！RES . kicks)RES . kicks=[]；RES . jocks . push(this . jocks)chrome . storage . local . set(RES)；this.likeButtonDisabled=true});}，LogChalls(){ chrome . storage . local . get(' challs '，(RES)={ if(RES . challs)RES . challs . map(joke=console . log(joke))})；}，clearStorage(){ chrome . storage . local . clear()；}}，已挂载(){ 0.}}在这里，我们声明三个新方法来处理这三个新按钮。

likeJoke方法在Chrome的存储中查找笑话属性。如果它不存在(也就是说，用户还不喜欢一个笑话)，它将被初始化为一个空数组。然后，它将当前笑话推送到该阵列，并将其保存到存储中。最后，将likeButtonDisabled数据属性设置为true，并禁用Likebutton。

LogLoggles方法还在chromesotorage中查找笑话属性。如果找到，它将遍历所有条目，并将它们输出到控制台。

ClearStorage方法负责清除数据。

继续在扩展中调整这个新功能，直到您满意为止。

为扩张做一些美化

它可以工作，但是按钮很丑，页面有点简单。让我们润色一下分机。

接下来，安装vue-awesome库。它使我们能够使用页面上的字体真棒图标，并使这些按钮看起来更漂亮：

该库由npm install vue-awesome在src/tab/tab.js中注册：

从“Vue”导入Vue；从“”导入应用程序。/App '；导入‘vue-awesome/icons’；从“vue-awesome/components/Icon”导入图标；Vue.component('icon '，Icon)；new Vue({el: '#app '，render :h=h(App)})；修改模板：

template div div v-if=' loading ' class=' centered ' ploading./p/div div v-elsep class=' joke ' { { joke } }/pdiv class=' Button-container ' Button @ click=' like joke ' : disabled=' like Button disabled ' class=' BTN ' icon name='竖起大拇指'/icon/Button Button @ click=' logchains ' class=' BTN ' icon name=' list '/icon/Button @ click=' clearstorage ' class=' BTN ' icon name='垃圾桶'/icon/Button/div/模板最后，让我们添加更多内容

stylebody { height: 98vh文本对齐：中心；color: # 353638font-size : 22px；线高： 30px；字体-family:梅里韦瑟，佐治亚州，衬线；background : URL(' https://dab 1 mslvvntp . cloud front . net/WP-content/uploads/2018/12/1544189726 roll-dad . png ')no-repeat 1% 99%；背景尺寸size: 200pxdisplay: flexalign-items:居中；justice-content : center；}.笑话{ max-width : 800 px；}.按钮容器{ position: absoluteright: 0pxtop : calc(50%-74px)；}.BTN { background-color : # D8d 8d 8；border:无；color:白色；padding: 12px 16pxfont-size : 16px；cursor:指针；display:块；边距-bottom : 5px；宽度： 50px；} . BTN : hover { background-color : # C8c 8；} . BTN : disabled { background-color : # 909090；}/style重新加载扩展并打开一个新的选项卡。你应该看看这样的东西。

将扩展上传到Chrome网络商店

如果你想让别人使用你的扩展，你可以通过Chrome Web Store来实现。

首先，你需要有一个谷歌帐户，你可以用它登录开发者仪表板。系统会提示您输入开发人员的详细信息，在发布第一个应用程序之前，您必须支付5美元的开发人员注册费(通过信用卡)。

接下来，您需要为您的应用程序创建一个ZIP文件。您可以通过npm run build-zip在本地实现这一点。这将在项目的根目录中创建一个名为dist-ZIP的文件夹，其中包含要上传到网络商店的ZIP文件。

对于简单的小扩展，这就足够了。但是，在您上传您的扩展之前，请务必阅读Chrome网络商店指南中的官方发布。

摘要

在本教程中，我主要介绍了Chrome扩展的主要部分，并展示了如何在Vue.js中使用vue-web-extension模板构建扩展。最后，我解释了如何将扩展上传到Web Store。

我希望你喜欢这个教程，并使用它来指导你建立自己的Chrome扩展。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。