猿问

如何将来自 Background.js 的数据存储在 React 中的变量中？

你好，我想做的是发送一个从我的 background.js 文件派生的字符串，并将其发送到我的 React 应用程序（特别是 App.js 使用的组件）。我在 component.js 文件的顶部有 /* global chrome */ 并且能够将数据存储在 chrome 本地存储上但是我的问题是如何确保我可以在 React 应用程序之前将这些数据存储在变量中处理了吗？例如，即使我能够在组件内部为 chrome 存储中的数据分配一个变量，它也只会在我的 React 应用程序创建后存储。我现在正在尝试的是在 background.js 中发送一条 chrome 消息，并尝试在组件中侦听此消息以存储变量，但侦听器似乎无法正常工作。任何帮助，将不胜感激！（附言


组件.js：


chrome.runtime.onMessage.addListener(function(msg) { 

   if(msg.type == "USER_STORED") {

      chrome.storage.local.get(['name'], function(result) { 

         console.log("User is " + result.name); 

         username = result.name; 

      }); 

   }

});

背景.js：


chrome.storage.local.set({name: username}, function() { 

      console.log("User is set to " + username);

      chrome.runtime.sendMessage({type: "USER_STORED" });

      console.log("message sent"); 

    }); 


    // Open extension window

    console.log("WINDOW_OPENED"); 

    var win = window.open("index.html", "extension_popup"); 


白衣染霜花
浏览 107回答 2
2回答

蝴蝶刀刀

你使用错误的方法。您根本不需要从后台发送此类消息，也不需要在弹出窗口中收听它们。只需将chrome.storage.local.getcall 添加到您的弹出入口点（可能）并用其回调index.js包装。ReactDOM.render是这样的：chrome.storage.local.get(null, function (data) {&nbsp; ReactDOM.render(&nbsp; &nbsp; <App {...data} />,&nbsp; &nbsp; document.getElementById('root')&nbsp; )});然后，来自的数据将通过 propschrome.storage在根的所有子组件中可用。<App>是这样的：function YourComponent(props) {&nbsp; console.log("User is " + props.name);&nbsp; return <h1>Hello, {props.name}</h1>;}
0

哈士奇WWW

我认为您可以直接访问 componentDidMount() 方法中的 chrome 存储 API，并从 storage.get() 获取变量并将值设置为状态变量。尝试这个清单.json{&nbsp; &nbsp; "name": "test2",&nbsp; &nbsp; "version": "0.0.1",&nbsp; &nbsp; "manifest_version": 2,&nbsp; &nbsp; "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",&nbsp; &nbsp; "background": {&nbsp; &nbsp; &nbsp; &nbsp; "scripts": [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "./background/background.bundle.js"&nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; },&nbsp; &nbsp; "permissions": [&nbsp; &nbsp; &nbsp; &nbsp; "storage",&nbsp; &nbsp; &nbsp; &nbsp; "tabs",&nbsp; &nbsp; &nbsp; &nbsp; "activeTab"&nbsp; &nbsp; ],&nbsp; &nbsp; "browser_action": {}}背景.jsconsole.log("inside bg script")let user = "zzzzzzzzz"chrome.storage.local.set({ name: user }, function () {&nbsp; &nbsp; console.log("User is set to" + user);})chrome.browserAction.onClicked.addListener((tab) => {&nbsp; &nbsp; chrome.tabs.create({&nbsp; &nbsp; &nbsp; &nbsp; url: chrome.runtime.getURL("./test.html")&nbsp; &nbsp; });});测试.html<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <meta name="viewport" content="width=device-width, initial-scale=1.0">&nbsp; &nbsp; <title>Document</title></head><body>&nbsp; &nbsp; <div id="app-root">&nbsp; &nbsp; </div>&nbsp; &nbsp; <script src="./index.bundle.js"></script></body></html>index.js（反应组件）import React from "react";import ReactDOM from "react-dom";class MainApp extends React.Component {&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>hi</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }&nbsp; &nbsp; componentDidMount() {&nbsp; &nbsp; &nbsp; &nbsp; let newThis = this;&nbsp; &nbsp; &nbsp; &nbsp; chrome.storage.local.get(['name'], function (result) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("User is " + result.name);// you can use the variable or set to any state variable from here&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }}ReactDOM.render(<MainApp />, document.getElementById("app-root"))所需的值将在 componentDidMount() 函数 storage.get() 方法回调中可用。您可以设置组件状态变量或根据需要使用它。
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答