侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

使用Vue开发自己的Chrome扩展程序过程详解

前端  /  管理员 发布于 5年前   3147

前言

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

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

在本教程中,我将向你展示如何为 Chrome 构建一个能够改变新标签页行为的简单扩展。这个扩展程序的 JavaScript 部分,我将使用 Vue.js 框架,因为它将允许我们快速启动并运行,而且用 vue 工作是很有趣的。

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

Chrome 扩展程序的基础知识

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

为了演示这些概念,让我们先写一个“Hello,World!” Chrome 扩展。

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

mkdir hello-world-chromecd hello-world-chrometouch 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。它应该与清单文件和后台脚本位于同一文件夹中:

My New Tab Page!

My New Tab Page!

You can put any content here you like

接下来需要让扩展知道页面的存在。可以通过在清单文件中指定 chrome_url_overrides 来实现,如下所示:

"chrome_url_overrides": {"newtab": "tab.html"}

最后,你需要重新加载扩展才能使更改生效。你可以通过在 Chrome 的扩展程序页面上单击 Hello World 扩展程序的 reload 图标来执行此操作。

现在,当你打开新标签页时,你的自定义消息会出现。

将Vue添加到扩展

现在我们有一个非常基本的扩展,接下来要实现剩下的需功能了。当用户打开新标签页时,我希望扩展能够:

  • 从精彩的笑话网站 icanhazdadjoke.com 获取一个笑话。
  • 以良好的格式向用户显示该笑话。
  • 显示用户喜欢该笑话的按钮。这样可以把笑话保存到 chrome.storage。
  • 显示一个按钮,供用户查看已收藏的笑话。

当然你也可以用纯 JavaScript 或像 jQuery 这样的库来完成所有这些 ―― 你开心就好!

但是出于本教程的目的,我将用 Vue 和令人敬畏的vue-web-extension 样板来实现此功能。

用 Vue 可以让我又快又好地编写更有条理的代码。正如我们所看到的,样板文件提供了几个脚本,可以在构建 Chrome 扩展程序时解决一些痛苦的常见任务(例如:每当你进行更改时都必须重新加载扩展程序)。

vue-web-extension-boilerplate

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

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

npm install -g @vue/clinpm install -g @vue/cli-init

完成后,让我们得到样板的副本:

vue init kocal/vue-web-extension new-tab-page

这将打开一个向导,询问你一堆问题。为了保证本教程的重点,我把回答列出来:

? Project name new-tab-page? Project description A Vue.js web extension? Author James Hibbard ? License MIT? Use Mozilla's web-extension polyfill? No? Provide an options page? No? Install vue-router? No? Install vuex? No? Install axios? Yes? Install ESLint? No? Install Prettier? No? Automatically install dependencies? npm

你可以根据自己的喜好调整答案,但是你一定要安装 axios。我们会用它来获取笑话。

接下来,切换到项目目录并安装依赖项:

cd new-tab-pagenpm install

然后就可以用样板提供的脚本构建我们的新扩展了:

npm run watch:dev

这会将扩展构建到项目根目录中的 dist 文件夹中,来进行开发并监视更改。

要将扩展程序添加到 Chrome,请执行上述相同的步骤,要选择 dist 文件夹作为扩展程序目录。如果一切按计划进行,那么当扩展程序初始化时,你应该看到“Hello world!”消息。

项目设置

让我们花一点时间来看看样板给了我们些什么。当前文件夹结构应如下所示:

.├── dist│ └── ├── node_modules│ └── ├── package.json├── package-lock.json├── scripts│ ├── build-zip.js│ └── remove-evals.js├── src│ ├── background.js│ ├── icons│ │ ├── icon_128.png│ │ ├── icon_48.png│ │ └── icon.xcf│ ├── manifest.json│ └── popup│ ├── App.vue│ ├── popup.html│ └── popup.js└── webpack.config.js

在项目根目录中可以看到,样板文件正在使用 webpack。这很好,因为这为我们的后台脚本提供了 Hot Module Reloading。

src文件夹包含我们将用于扩展的所有文件。manifest 文件和 background.js 对于我们来说是熟悉的,但也要注意包含Vue 组件的 popup 文件夹。当样板文件将扩展构建到 dist 文件夹中时,它将通过vue-loader 管理所有 .vue 文件并输出一个浏览器可以理解的 JavaScript 包。

在 src 文件夹中还有一个 icons 文件夹。如果你看一眼 Chrome 的工具栏,会看到我们的扩展程序的新图标(也被称为 browser action)。这就是从此文件夹中拿到的。如果单击它,你应该会看到一个弹出窗口,显示“Hello world!” 这是由 popup/App.vue 创建的。

最后,请注 scripts 文件夹的两个脚本:一个用于删除 eval 用法以符合 Chrome Web Store 的内容安全策略,另一个用于当你要把扩展上传到Chrome Web Store时将其打包到 .zip 文件中,。

在 package.json 文件中还声明了各种脚本。我们将用 npm run watch:dev 来开发扩展,然后使用 npm run build-zip 生成一个ZIP文件以上传到 Chrome Web Store。

在新标签页中使用 Vue 组件

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

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

mkdir src/tabtouch src/tab/{App.vue,tab.html,tab.js}

打开 tab.html 并添加以下内容:

New Tab Page

这里没什么特别的。这是一个简单的 HTML 页面,它将保存我们的 Vue 实例。

接下来在 tab.js 中添加:

import Vue from 'vue';import App from './App';new Vue({el: '#app',render: h => h(App)});

在这里导入 Vue,用它为元素传递一个选择器,然后告诉它渲染 App 组件。

最后在 App.vue 中写如下代码:

在使用这个新标签页之前,我们需要更新 manifest 文件:

{"name":"new-tab-page",..."chrome_url_overrides": {"newtab": "tab/tab.html"}}

为了使它们可用于扩展,我们还需要让样板编译我们的文件并复制到 dist 文件夹。

像下面这样修改 webpack.config.js,更新entry和plugins键:

entry: {'background': './background.js','popup/popup': './popup/popup.js','tab/tab': './tab/tab.js'}plugins: [...new CopyWebpackPlugin([{ 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: transformHtml },...})

你需要重新启动 npm run watch:dev 任务才能使这些更改生效。完成此操作后,重新加载扩展程序并打开新选项卡。你应该会看到“My new tab page”。

获取并显示笑话

好的,我们已经覆盖了 Chrome 的新标签页,并且将其替换为了 mini Vue app。但是我们要做的不仅仅是显示一条消息。

更改 src/tab/App.vue 中的模板部分如下:

将

最后,将

如果你正在运行 npm run watch:dev 任务,则扩展程序会自动重新加载,并且每当你打开新标签页时都会看到一个笑话。

接下来花点时间来了解一下自己都做了些什么。

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

在

  • 分类目录
  • 人生(杂谈)
  • 技术
  • linux
  • Java
  • php
  • 框架(架构)
  • 前端
  • ThinkPHP
  • 数据库
  • 微信(小程序)
  • Laravel
  • Redis
  • Docker
  • Go
  • swoole
  • Windows
  • Python
  • 苹果(mac/ios)
  • 相关文章
  • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
  • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
  • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
  • 使用mock-server实现模拟接口对接流程步骤(0个评论)
  • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
  • 近期文章
  • 智能合约Solidity学习CryptoZombie二课:让你的僵尸猎食(0个评论)
  • 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
  • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
  • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
  • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
  • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
  • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
  • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
  • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
  • Laravel从Accel获得5700万美元A轮融资(0个评论)
  • 近期评论
  • 122 在

    学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
  • 123 在

    Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
  • 原梓番博客 在

    在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
  • 博主 在

    佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
  • 1111 在

    佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
  • 2016-10
  • 2016-11
  • 2017-06
  • 2017-07
  • 2017-08
  • 2017-09
  • 2017-10
  • 2017-11
  • 2018-03
  • 2018-04
  • 2018-05
  • 2018-06
  • 2018-09
  • 2018-11
  • 2018-12
  • 2019-02
  • 2020-03
  • 2020-04
  • 2020-05
  • 2020-06
  • 2021-04
  • 2021-05
  • 2021-07
  • 2021-08
  • 2021-09
  • 2021-10
  • 2021-11
  • 2022-08
  • 2022-09
  • 2022-10
  • 2022-11
  • 2022-12
  • 2023-01
  • 2023-02
  • 2023-03
  • 2023-04
  • 2023-05
  • 2023-06
  • 2023-07
  • 2023-09
  • 2023-10
  • 2023-11
  • 2023-12
  • 2024-01
  • 2024-02
  • 2024-03
  • 2024-04
Top

Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

侯体宗的博客