时间戳

首页 > 解决方案 > 将 background.js 中的数据存储到 vuex 存储中

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

问题描述

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

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

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

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

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

标签： javascriptgoogle-chrome-extensionvuejs2vuex

解决方案

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

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

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

  1. Vue
  2. Vuex
  3. vuex-webextensions
  4. webextension-polyfill

我推荐使用 webextension-polyfill，因为您可以使用 chrome 的回调样式 API 作为 Promise 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 中检查此存储空间。为了查看此存储空间的内容，您需要安装以下扩展：

存储区浏览器

我希望这会有所帮助。让我知道是否需要进一步解释。

推荐阅读