亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何將來自 Background.js 的數據存儲在 React 中的變量中?

如何將來自 Background.js 的數據存儲在 React 中的變量中?

白衣染霜花 2022-12-09 16:53:47
你好,我想做的是發送一個從我的 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"); 
查看完整描述

2 回答

?
蝴蝶刀刀

TA貢獻1801條經驗 獲得超8個贊

你使用錯誤的方法。您根本不需要從后臺發送此類消息,也不需要在彈出窗口中收聽它們。只需將chrome.storage.local.getcall 添加到您的彈出入口點(可能)并用其回調index.js包裝。ReactDOM.render是這樣的:


chrome.storage.local.get(null, function (data) {

  ReactDOM.render(

    <App {...data} />,

    document.getElementById('root')

  )

});

然后,來自的數據將通過 propschrome.storage在根的所有子組件中可用。<App>是這樣的:


function YourComponent(props) {

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

  return <h1>Hello, {props.name}</h1>;

}


查看完整回答
反對 回復 2022-12-09
?
哈士奇WWW

TA貢獻1799條經驗 獲得超6個贊

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


嘗試這個


清單.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>

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


查看完整回答
反對 回復 2022-12-09
  • 2 回答
  • 0 關注
  • 133 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號