详解vue-cli3开发Chrome插件实践

前言

Vue-CLI 3是Vue.js发布的脚手架构建工具。它易于使用，且支持自定义配置，本文就是基于Vue-CLI 3来开发Chrome插件的。

环境

在开始之前，确保本地已经安装了Node.js和Vue-CLI 3，安装方法如下：

1.下载 Node.js：https://nodejs.org/en/download/ 下载并安装；

2.安装 Vue-cli 3：在命令行下输入以下命令：

npm install -g @vue/cli

初始化项目

创建一个新项目并进入项目目录。

1.初始化项目，则命令行输入：

vue create my-plugin

2.在初始化过程中选择手动配置，选择将插件构建为独立的 Vue 组件库，静态资源目录选择public。

配置

安装必要插件：

npm install --save vue-chrome-extension

在src目录下创建background.js文件，用来监听事件和请求：

console.log('background:', 'OK')

在src目录下创建popup.vue文件，用来渲染插件：

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

<script>
  export default {
    data () {
      return {
        message: 'Hello world!'
      }
    }
  }
</script>

更新Vue.config.js配置文件

const ChromeExtensionReloaderPlugin = require('webpack-chrome-extension-reloader');

module.exports = {
  configureWebpack: {
    plugins: [
      new ChromeExtensionReloaderPlugin({
        entries: {
          background: 'background',
          popup: 'popup'
        }
      })
    ]
  }
}

打包

修改webpack配置文件，将output.publicPath字段改为"./"，webpack会自动根据html根目录展开打包文件。

在命令行下输入以下命令打包：

npm run build

此时，打包文件会生成在根目录的 dist 文件夹内。

加载插件

1. 打开谷歌浏览器，输入“chrome://extensions” 并进入扩展程序页面。

2. 把 dist 目录下的文件都放进新建的插件文件夹，然后选择“加载已解压的扩展程序”，选择插件所在的文件夹即可。

示例

下列举两个例子，一个是获取当前标签信息，另一个是获取当前窗口信息。

获取当前标签信息

在popup.vue中添加一个按钮，并绑定click事件：

<template>
  <div>
    <button @click="getTabInfo">获取当前标签信息</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
const getCurrentTabInfo = () => {
  return new Promise((resolve) => {
    chrome.tabquery.getCurrentTabInfo(resolve)
  })
}

export default {
  data () {
    return {
      message: ''
    }
  },
  methods: {
    async getTabInfo() {
      const tab = await getCurrentTabInfo();
      this.message = `当前标签信息：${JSON.stringify(tab)}`
    }
  }
}
</script>

在manifest.json中添加需要的权限：

"permissions": [
  "tabs"
],

获取当前窗口信息

在popup.vue中添加一个按钮，并绑定click事件：

<template>
  <div>
    <button @click="getWindowInfo">获取当前窗口信息</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
const getCurrentWindowInfo = () => {
  return new Promise((resolve) => {
    chrome.windows.getCurrent(resolve)
  })
}

export default {
  data () {
    return {
      message: ''
    }
  },
  methods: {
    async getWindowInfo() {
      const window = await getCurrentWindowInfo();
      this.message = `当前窗口信息：${JSON.stringify(window)}`
    }
  }
}
</script>

在manifest.json中添加需要的权限：

"permissions": [
  "windows"
],

结语

以上是使用Vue-CLI 3开发Chrome插件的详细过程，在本文中，我们简单介绍了Vue-CLI 3的使用以及使用插件开发Chrome扩展程序的方法。如果您还有其他的问题或者不理解的地方，请在评论区留言。