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

【问题标题】：React.js Chrome Extension - How to store data from Background.js in a variable inside React?React.js Chrome 扩展 - 如何将 Background.js 中的数据存储在 React 内部的变量中？
【发布时间】：2020-11-17 12:30:03
【问题描述】：

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

component.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; 
      }); 
   }
});

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

控制台： Extension console image

【问题讨论】：

标签： javascript reactjs google-chrome-extension

【解决方案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>;
}

【讨论】：

【解决方案2】：

我认为您可以直接在 componentDidMount() 方法中访问 chrome 存储 API，并从 storage.get() 中获取变量并将值设置为状态变量。

试试这个

manifest.json

{
    "name": "test2",
    "version": "0.0.1",
    "manifest_version": 2,
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
    "background": {
        "scripts": [
            "./background/background.bundle.js"
        ]
    },
    "permissions": [
        "storage",
        "tabs",
        "activeTab"
    ],
    "browser_action": {}
}

background.js

console.log("inside bg script")
let user = "zzzzzzzzz"
chrome.storage.local.set({ name: user }, function () {
    console.log("User is set to" + user);
})
chrome.browserAction.onClicked.addListener((tab) => {
    chrome.tabs.create({
        url: chrome.runtime.getURL("./test.html")
    });
});

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app-root">
    </div>
    <script src="./index.bundle.js"></script>
</body>
</html>

index.js（反应组件）

import React from "react";
import ReactDOM from "react-dom";
class MainApp extends React.Component {
    render() {
        return (
            <div>
                <h1>hi</h1>
            </div>
        );
    }
    componentDidMount() {
        let newThis = this;
        chrome.storage.local.get(['name'], function (result) {
            console.log("User is " + result.name);
// you can use the variable or set to any state variable from here
        });
    }
}
ReactDOM.render(<MainApp />, document.getElementById("app-root"))

所需的值将在 componentDidMount() 函数 storage.get() 方法回调中可用。您可以设置组件状态变量或根据需要使用它。

【讨论】：

如果我使用功能组件，你知道我应该怎么做吗？
我是 React.js 的初学者。我对此没有任何深入的了解。这可能会对您有所帮助。 medium.com/@timtan93/…stackoverflow.com/questions/53945763/…
这如何工作？ 'chrome' 在哪里声明？
不，不会的，当你尝试运行或构建时，它会抛出错误，说 chrome 未定义！
我想通了，你需要在你的组件上方添加评论这个评论/*global chrome*/