Question

因此，我尝试将vuex存储用于chrome扩展程序。我的整个项目都基于VueJ。

我有一个弹出窗口，单击扩展按钮后会打开。我也正在使用background.js通过chrome API监听当前标签页的网址。

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

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

P.S。我对chrome扩展程序开发还很陌生，一些代码参考或指南可能会有所帮助：）

Answer 1

您可以将此插件用于Vuex：vuex-webextensions

如何使用此功能执行所需操作的示例是：

在后台脚本中进行扩展导入：

Vue
Vuex
vuex-webextensions
webextension-polyfill

我建议使用webextension-polyfill，因为您可以将chrome的回调样式API用作Promise API（为您提供使用.then()或async / await的选项。

还可以导入您在应用程序的Vuex存储中使用的所有操作，变异，获取方法等。

// 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存储的两个实例：background.js中的1个实例和popup.js中的1个实例。 Vuex-webextensions插件使用chrome.storage API使两个商店保持同步。它将background.js存储区视为主存储区，并将所有其他实例视为该主存储区的副本。

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

Storage Area Explorer

我希望能有所帮助。让我知道是否需要进一步说明。

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

1 个答案: