vue开发chrome插件，实现获取界面数据和保存到数据库功能

准备工作

在开发vue开发chrome插件前，我们需要先安装vue-cli脚手架和Chrome浏览器。

安装命令：

npm install -g vue-cli

创建新项目

通过vue-cli脚手架创建新项目，并选择webpack模板。

vue init webpack my-project

安装依赖：

cd my-project && npm install

安装需要的插件

在chrome插件开发中，需要安装一些相关的插件，如“chrome-extension-async”、“vue-chrome-extension”。

npm install --save chrome-extension-async vue-chrome-extension

添加配置文件

在项目根目录下添加“vue.config.js”文件，并添加以下内容：

module.exports = {
  pages: {
    popup: {
      template: 'public/browser-extension.html',
      entry: './src/popup/main.js',
      title: 'Popup'
    }
  },
  pluginOptions: {
    browserExtension: {
      components: {
        background: true,
        popup: true,
        options: true
      },
      registry: undefined,
      usePolyfill: true,
      api: 'chrome'
    }
  }
}

编写代码

接下来，我们需要编写插件的代码。首先，我们需要在“popup”文件夹下创建vue组件，并在“main.js”中引入组件。

在组件中添加获取界面数据和保存至数据库的功能。具体示例代码可参考如下：

<template>
  <div class="wrapper">
    <button @click="getData">获取数据</button>
    <button @click="saveData">保存数据到数据库</button>
    <p v-show="loading">Loading...</p>
  </div>
</template>

<script>
import Chrome from 'vue-chrome-extension'
const chrome = new Chrome()

export default {
  data () {
    return {
      loading: false,
      data: {}
    }
  },
  methods: {
    async getData () {
      this.loading = true
      try {
        // 获取界面数据
        const [tab] = await chrome.tabs.query({
          active: true,
          currentWindow: true
        })

        const data = await chrome.tabs.sendMessage(tab.id, {cmd: 'getData'})
        this.data = data
        this.loading = false
      } catch (e) {
        console.error(e)
        this.loading = false
      }
    },
    async saveData () {
      this.loading = true
      try {
        // 保存数据到数据库
        const result = await chrome.runtime.sendMessage({cmd: 'saveData', data: this.data})
        console.log('result', result)
        this.loading = false
      } catch (e) {
        console.error(e)
        this.loading = false
      }
    }
  }
}
</script>

其中，通过“chrome.tabs.sendMessage()”方法可以获取到当前Tab页中的数据，通过“chrome.runtime.sendMessage()”方法可以将数据保存到后台数据库。