React.js Chrome 扩展 - 如何将来自 Background.js 的数据存储在 React 内的变量中？

Question

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

组件.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"); 

控制台： 扩展控制台图像

Answer 1

你使用了错误的方法。您根本不需要从后台发送此类消息，也不需要在弹出窗口中监听它们。只需将chrome.storage.local.get调用添加到弹出入口点（可能index.js）并ReactDOM.render用其回调包装即可。像这样的东西：

chrome.storage.local.get(null, function (data) {
  ReactDOM.render(
    <App {...data} />,
    document.getElementById('root')
  )
});

然后，来自的数据chrome.storage将通过 props 在根的所有子组件中可用<App>。像这样的东西：

function YourComponent(props) {
  console.log("User is " + props.name);
  return <h1>Hello, {props.name}</h1>;
}