React.js Chrome 擴展 - 如何將 Background.js 中的數據存儲在 React 內部的變量中？

Question

您好，我要做的是發送一個從我的 background.js 文件派生的字符串並將其發送到我的反應應用程序（特別是 App.js 使用的組件）。 我在 component.js 文件的頂部有 /* global chrome */ 並且能夠將數據存儲在 chrome 本地存儲上但是我的問題是如何確保我可以在 React 應用程序之前將這些數據存儲在一個變量中被處理了嗎？ 例如，即使我能夠在組件內部為 chrome 存儲中的數據分配一個變量，它也只會在我的 React 應用程序創建后存儲。 我現在嘗試的是在 background.js 中發送一條 chrome 消息，並嘗試在組件中偵聽此消息以存儲變量，但是偵聽器似乎沒有工作。 任何幫助，將不勝感激。 （ps這是使用功能組件，但對 class 組件的幫助也將不勝感激）

組件.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

你使用了錯誤的方法。 您根本不需要從后台發送此類消息，也不需要在彈出窗口 window 中收聽它們。 只需將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>;
}

Answer 2

我認為您可以在 componentDidMount() 方法中直接訪問 chrome 存儲 API 並從 storage.get() 獲取變量並將值設置為 state 變量。

嘗試這個

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": {}
}

背景.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")
    });
});

測試.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() 方法回調中可用。 您可以設置組件 state 變量或根據需要使用它。

React.js Chrome 擴展 - 如何將 Background.js 中的數據存儲在 React 內部的變量中？

問題描述

2 個解決方案

解決方案1
2 已采納 2020-07-28 09:40:24

解決方案2
-1 2020-07-28 06:54:03

React.js Chrome 擴展 - 如何將 Background.js 中的數據存儲在 React 內部的變量中？

問題描述

2 個解決方案

解決方案1 2 已采納 2020-07-28 09:40:24

解決方案2 -1 2020-07-28 06:54:03

解決方案1
2 已采納 2020-07-28 09:40:24

解決方案2
-1 2020-07-28 06:54:03