React.js Chrome Extension - How to store data from Background.js in a variable inside React?

Question

Hello what I am trying to do is send a string that I derived from my background.js file and send it to my react app (specifically a component used by App.js). I have /* global chrome */ at the top of the component.js file and am able to store data on the chrome local storage however my question is how do I make sure that I can store this data in a variable before the React app is processed? For example, even though I am able to assign a variable inside the component the data from chrome storage, it is only stored after my React app is created. What I'm trying now is to send a chrome message in background.js and try to listen for this message in the component to store the variable however the listener does not seem to be working. Any help would be appreciated! (p.s. this is using functional components but help in class components would also be appreciated)

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

Console: Extension console image

score 5 · Accepted Answer · answered Jul 28 '20 at 09:40

You use wrong approach. You don't need to send such messages from background at all, nor need to listen for them in your popup window. Just add chrome.storage.local.get call into your popup entry point (likely index.js) and wrap ReactDOM.render with its callback. Something like this:

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

Then, the data from chrome.storage will be available in all sub-components of the root <App> via props. Something like this:

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

score -1 · Answer 2 · answered Jul 28 '20 at 06:54

I think you can directly access the chrome storage API inside the componentDidMount() method and fetch the variable from the storage.get() and set the value to a state variable.

Try this

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 (react component)

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"))

the required value will be available in the componentDidMount() functions storage.get() methods callback. You can set to the component state variable or use it as your wish.

Do you know how I should do this if I'm using functional components? — struggleatreact, Jul 28 '20 at 07:41
I am a beginner in React.js. I don't have any deep knowledge about it. This may help you. https://medium.com/@timtan93/states-and-componentdidmount-in-functional-components-with-hooks-cac5484d22ad https://stackoverflow.com/questions/53945763/componentdidmount-equivalent-on-a-react-function-hooks-component — Noob dev, Jul 28 '20 at 08:16
@KJSudarshan. 'chrome' is the API namespace used by chrome extension. It will be automatically available inside the chrome extension instance( inside background, popup, contentscript..etc) — Noob dev, Mar 02 '21 at 04:49
No it won't, when you try to run it or build, it will throw error saying chrome is not defined! — Nodir Nasirov, Mar 02 '21 at 10:09
As @NodirNasirov mentioned, it will fail when trying to run or build. If this were not a react specific .js file, then in the context of background script or anything else particular to chrome, then it would have worked. — KJ Sudarshan, Mar 03 '21 at 05:24
I figured it out, you need to add comment this comment `/*global chrome*/` above your component — Nodir Nasirov, Mar 03 '21 at 08:24

React.js Chrome Extension - How to store data from Background.js in a variable inside React?

2 Answers2