文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

用 Vue 开发自己的 Chrome 扩展

2024-12-03 07:04

关注

浏览器扩展程序是可以修改和增强 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 ：

  1. mkdir hello-world-chrome 
  2. cd hello-world-chrome 
  3. touch manifest.json background.js 

打开 manifest.json 并添加以下代码：

  1. { 
  2.   "name": "Hello World Extension", 
  3.   "version": "0.0.1", 
  4.   "manifest_version": 2, 
  5.   "background": { 
  6.     "scripts": ["background.js"], 
  7.     "persistent": false 
  8.   } 
  9. } 

name 、 version 和 manifest_version 都是必填字段。 name 和 version 字段可以是你想要的任何内容; manifest version 应设置为2（从Chrome 18开始）。

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

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

  1. chrome.runtime.onInstalled.addListener(() => { 
  2.   alert('Hello, World!'); 
  3. }); 

最后安装扩展程序。打开 Chrome 并在地址栏中输入 chrome://extensions/ 。你应该看到一个显示已安装扩展程序的页面。

由于我们要从文件（而不是Chrome网上应用店）安装自己的扩展程序，因此需要使用页面右上角的切换按钮来激活 开发者模式 。这应该添加一个额外的菜单栏，其中包含 Load unpacked 选项。单击此按钮并选择你之前创建的 hello-world-chrome 文件夹。单击 打开 ，应该能够看到已安装的扩展，并弹出“Hello，World！”窗口。

 


Hello World

 

恭喜！你刚刚制作了一个 Chrome 扩展程序。

覆盖 Chrome 的新标签页

为了在打开新选项卡时迎接我们的是自己的扩展程序。可以通过使用 Override Pages API 来完成此操作。

注意：在你取得进展之前，请务必停用其他能够覆盖 Chrome 新标签页的扩展程序。一次只允许一个扩展改变这种行为。

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

  1.  
  2. "en"> 
  3.  
  4.   "UTF-8"> 
  5.   My New Tab Page! 
  6.  
  7.  
  8.    
  9.   
    You can put any content here you like
     
  10.  
  11.  

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

  1. "chrome_url_overrides": { 
  2.   "newtab": "tab.html" 
  3. } 

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


重新加载扩展

 

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

将Vue添加到扩展

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

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

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

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

vue-web-extension-boilerplate

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

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

  1. npm install -g @vue/cli 
  2. npm install -g @vue/cli-init 

完成后，让我们得到样板的副本：

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

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

  1. ? Project name new-tab-page 
  2. ? Project description A Vue.js web extension 
  3. ? Author James Hibbard @example.com> 
  4. ? License MIT 
  5. ? Use Mozilla's web-extension polyfill? No 
  6. ? Provide an options page? No 
  7. ? Install vue-router? No 
  8. ? Install vuex? No 
  9. ? Install axios? Yes 
  10. ? Install ESLint? No 
  11. ? Install Prettier? No 
  12. ? Automatically install dependencies? npm 

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

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

  1. cd new-tab-page 
  2. npm install 

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

  1. npm run watch:dev 

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

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

项目设置

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

  1. . 
  2. ├── dist 
  3. │   └──  
  4. ├── node_modules 
  5. │   └──  
  6. ├── package.json 
  7. ├── package-lock.json 
  8. ├── scripts 
  9. │   ├── build-zip.js 
  10. │   └── remove-evals.js 
  11. ├── src 
  12. │   ├── background.js 
  13. │   ├── icons 
  14. │   │   ├── icon_128.png 
  15. │   │   ├── icon_48.png 
  16. │   │   └── icon.xcf 
  17. │   ├── manifest.json 
  18. │   └── popup 
  19. │       ├── App.vue 
  20. │       ├── popup.html 
  21. │       └── popup.js 
  22. └── 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 ：

  1. mkdir src/tab 
  2. touch src/tab/{App.vue,tab.html,tab.js} 

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

  1.  
  2. "en"> 
  3.  
  4.   "UTF-8"> 
  5.   New Tab Page 
  6.   "stylesheet" href="tab.css"> 
  7.  
  8.  
  9.   "app">
 
  •   "tab.js"> 
  •  
  •  
    •

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

    接下来在 tab.js 中添加：

    1. import Vue from 'vue'; 
    2. import App from './App'; 
    3.  
    4. new Vue({ 
    5.   el: '#app', 
    6.   render: h => h(App) 
    7. }); 

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

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

    1.  
    2.  
    3.  
    4.  
    5.  
    6. p { 
    7.   font-size: 20px; 
    8. } 
    9.  

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

    1. { 
    2.   "name":"new-tab-page", 
    3.   ... 
    4.   "chrome_url_overrides": { 
    5.     "newtab": "tab/tab.html" 
    6.   } 
    7. } 

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

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

    1. entry: { 
    2.   'background': './background.js', 
    3.   'popup/popup': './popup/popup.js', 
    4.   'tab/tab': './tab/tab.js' 
    5. } 
    6. plugins: [ 
    7.   ... 
    8.   new CopyWebpackPlugin([ 
    9.     { from: 'icons', to: 'icons', ignore: ['icon.xcf'] }, 
    10.     { from: 'popup/popup.html', to: 'popup/popup.html', transform: transformHtml }, 
    11.     { from: 'tab/tab.html', to: 'tab/tab.html', transform: transformHtml }, 
    12.     ... 
    13.   }) 

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

     


    My new tab page

     

    获取并显示笑话

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

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

    1.  

    将  

    最后，将  

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

     

    一个英文笑话

     

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

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

    在