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

Posted 2023-02-23

【中文标题】将 background.js 中的数据存储到 vuex 存储中

【英文标题】：Store data from background.js into the vuex store

【发布时间】：2019-06-29 04:08:06

【问题描述】：

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

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

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

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

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

【问题讨论】：

如果你需要获取当前标签页的url，你可以使用window.location.hostname。以这种方式将其保存在商店状态会更容易。

【参考方案1】：

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

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

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

Vue Vuex vuex-webextensions webextension-polyfill

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

还可以导入您在应用的 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 存储实例：background.js 中的 1 个和 popup.js 中的 1 个。 Vuex-webextensions 插件使用chrome.storage API 来保持两个存储同步。它将background.js 存储视为主实例，并将所有其他实例视为该主实例的副本。

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

Storage Area Explorer

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

【讨论】：

它对我不起作用。存储不持久。并且存储区域资源管理器不显示任何内容。