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

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

开发Chrome扩展程序可以用于个性化配置Chrome浏览器功能，同时也是Chrome浏览器生态中非常重要的一部分。本篇文章将会向你详细讲解如何使用Vue开发自己的Chrome扩展程序。

准备工作

首先，需要安装最新版的Node.js和 Vue CLI工具。安装完成后，使用以下命令创建一个基于 Vue 的 Chrome 扩展程序模板：

vue create --preset jeneser/chrome-extension my-extension

该命令将使用预先设定好的Vue CLI插件(preset)来自动生成基本的Chrome扩展程序骨架，省去了繁琐的基础应用搭建环节。这个骨架中包含了一个完整的Vue应用，并且已经预置了对Chrome扩展程序的处理方式。

基础骨架

模板创建成功后，我们可以看到以下内容：

my-extension
├── public
│   ├── manifest.json
│   └── index.html
│
├── src
│   ├── background.js
│   ├── components
│   │   └── HelloWorld.vue
│   ├── options
│   │   ├── index.js
│   │   └── Options.vue
│   ├── popup
│   │   ├── index.html
│   │   ├── index.js
│   │   └── Popup.vue
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   └── main.js
└── package.json

所有Chrome扩展程序都需要一个manifest.json文件来描述扩展。Vue CLI 模板已经为我们设置好了manifest.json文件。现在，应该可以通过在Google chrome上，选择“扩展程序”，检查你的新项目是否已经出现在扩展程序管理器中了。

开始开发

Vue CLI的骨架提供了许多方便的功能。我们在src目录下可以看到background.js文件，用于处理Chrome扩展程序的后台任务；popup目录下存放的是当前激活标签页的弹出窗口；。

我们可以使用Vue框架轻松地为我们的扩展添加组件。在components目录下我们可以创建类似Vue组件的文件，该文件应该具有以下特征：

<template>
  <div>Hello, {{ name }}!</div>
</template>

<script>
module.exports = {
  props: ['name']
};
</script>

<style scoped>
div {
  font-weight: bold;
}
</style>

通过上述代码可以看出，Vue组件与网站中的普通组件开发是相似的。另外，需要特别注意的是，为了确保作用域不互相干扰，我们会在样式上使用scoped关键字。这使得样式只会作用于当前组件内部。

示例1 - 扩展程序选项页

从示例中我们可以看出，Vue CLI创建的基础骨架提供了一个名为Options的组件，并且已经为我们设置好了快捷键。该组件在options目录下，而且指定为扩展程序的选项页面。我们可以在src/options/Options.vue文件中列出所有需要在选项页上列出的选项。

<template>
  <div>
    <label>
      <input type="checkbox" v-model="enabled" />
      {{ 'Enable feature' }}
    </label>
  </div>
</template>

<script>
module.exports = {
  data() {
    return {
      enabled: false
    };
  }
};
</script>

在返回的JS对象中，数据里存储了需要在页面上显示的数据，比如全局的选项、复选框的选中状态等。

需要注意的是，在使用v-model时，该变量的值通常应该存储在Vue实例的data中（如示例中的enabled变量）。这样，如果该值发生变化，页面也将相应地更新。现在，只需稍作修改，就能添加更多可供自定义的选项，完成一个功能完备的选项页。

示例2 - 弹出窗口

开发弹出窗口与开发选项页的方式基本相同。下面是一个我们添加到./popup/Popup.vue文件的简单组件的示例:

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
module.exports = {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
      this.message = `Active tab title: ${tabs[0].title}`
    })
  }
}
</script>

该组件会获取当前页面中的标签页地址，并在弹出窗口中显示出来。在background.js文件中设置监听器即可在浏览器标签页上激活弹出窗口：

chrome.browserAction.onClicked.addListener(() => {
  chrome.windows.create({
    url: chrome.runtime.getURL('popup/index.html'),
    type: 'popup',
    width: 360,
    height: 240
  })
})

这段代码监听浏览器当前激活的标签页上的用户单击事件。当用户单击扩展程序图标时，将启动一个新的标签页，并在其中加载popup/index.html文件，最后弹出窗口的大小是360x240像素(需要注意的是，该值不能大于当前屏幕窗口大小)。

打包和发布

在这里我会简单提一下如何打包Vue构建，并在Chrome商店发布扩展程序。

首先需要在manifest.json文件中指定扩展程序的版本号：

{
  "version": "1.0.0",
  // ...
}

然后使用以下命令打包扩展程序：

npm run build

打包完毕后，可以在dist目录下找到生成的所有生产文件。将其压缩为一个zip包，换名为 my-extension.zip。

最终将zip包上传到Chrome 开发者控制台中，即可使用Chrome开发者控制台提供的服务进行发布。

结语

Vue CLI 模板大大简化了创建 Chrome 扩展的过程。即使你不熟悉Chrome扩展程序的工作原理，只要你掌握了Vue框架的相关知识，你依然可以使用它轻松创建扩展程序。祝愿你创建出一个功能完备、简单易用的扩展程序。