将 background.js 中的数据存储到 vuex 存储中

Question

所以我试图在我的 chrome 扩展中使用 vuex 商店。我的整个项目都基于 VueJs。

我有一个弹出窗口，在我单击扩展按钮后会打开。我还使用 background.js 来收听使用 chrome API 的当前选项卡的 url。

现在，我想要做的就是将这个 url 从 background.js 存储到商店，然后我可以使用它将数据放入我的 popup.html 并在其中呈现 url。

现在我不知道如何在我的插件中使用 vuex 商店。

PS 我对 chrome 扩展开发还很陌生，一些代码参考或指导可能会有所帮助:)

Answer 1

你可以在 Vuex 中使用这个插件：vuex-webextensions

如何使用它来做你想做的事情的一个例子是：

在您的扩展导入的后台脚本中：

1. 视图
2. Vuex
3. vuex-webextensions
4. webextension-polyfill

我建议使用 webextension-polyfill，因为您可以使用 chrome 的回调样式 API 作为承诺 API（让您可以选择使用.then()或异步/等待。

还要导入您在应用程序的 Vuex 商店中使用的任何操作、突变、getter 等。

// background.js

import Vue from 'vue';
import Vuex from 'vuex';
import VuexWebExtensions from 'vuex-webextensions';

import * as actions from './store/actions';
import * as getters from './store/getters';
import mutations from './store/mutations';

global.browser = require('webextension-polyfill');

Vue.use(Vuex);

const store = new Vuex.Store({
  plugins: [VuexWebExtensions({
    persistentStates: ['currentTabUrl'],
  })],
  state: {
    currentTabUrl: '',
  },
  getters,
  mutations,
  actions,
});

/* if you want to get the active tab URL anytime someone clicks your extension icon,
 * you'll need to listen for the onClicked event on browserAction.
 * The onClicked event handler receives an optional parameter which is the current tab.
 * You'll also need to ensure you've set "tabs" permission in your manifest.json

https://developer.chrome.com/extensions/browserAction#event-onClicked
*/

// Assuming you've used the webextension-polyfill as I have:

browser.browserAction.onClicked.addListener((tab) => {
  store.dispatch('nameOfYourActionToUpdateStore', tab.url)
});

// or without using the webextension-polyfill

chrome.browserAction.onClicked.addListener((tab) => {
  store.dispatch('nameOfYourActionToUpdateStore', tab.url)
});

export default store;

现在，对于您的弹出窗口，您可能有一个 Vue 应用程序 + Vuex 商店的实例。例如：

// popup.js

import Vue from 'vue';
import Vuex from 'vuex';
import VuexWebExtensions from 'vuex-webextensions';
import App from './App';

// import any actions, mutations, getters you might have
import * as actions from './actions';
import * as getters from './getters';
import mutations from './mutations';


// Assuming you've used the webextension-polyfill as I have:
global.browser = require('webextension-polyfill');

// Assuming you've used the webextension-polyfill as I have:
Vue.prototype.$browser = global.browser;

Vue.use(Vuex);

const store = new Vuex.Store({
  plugins: [VuexWebExtensions({
    persistentStates: ['currentTabUrl'],
  })],
  state: {
    currentTabUrl: '',
  },
  getters,
  mutations,
  actions,
});

new Vue({
  el: '#app',
  store,
  render: h => h(App),
});

export default store;

在我们的示例中，App.vue 可能如下所示：

// App.vue

<template>
 <p> {{ currentTabUrl }} </p>
</template>

<script>
import { mapState } from 'vuex'

export default {
  updated() {
    console.log(this.$store.state.currentTabUrl);
  },
  data() {
    return {};
  },
  computed: {
    ...mapState([
      'currentTabUrl'
    ])
  },
};
</script>

<style lang="scss" scoped>
p {
  font-size: 20px;
}
</style>

本质上，现在你的扩展有两个 Vuex 存储实例： 1 inbackground.js和 1 in popup.js。该Vuex-webextensions插件使用chrome.storageAPI 来保持两个商店的同步。它将background.jsstore 视为 Master，并将所有其他实例视为此 master 的副本。

需要注意的一件事是，您无法在常规 chrome devtools 中检查此存储空间。要查看此存储空间的内容，您需要安装以下扩展：

存储区浏览器

我希望这有帮助。如果有什么需要进一步解释的，请告诉我。