Unable to get state value in when using long-lived connection in react base chrome extension

Question

I have a Popup.jsx and a Background.js. The Popup creates a long lived connection to my background service worker.

I am maintaining a state in my Popup.jsx, which looks like this

const [projectDetail, setProjectDetail] = useState({ projectCode: null })

The useEffect of my Popup.jsx looks like this,

useEffect(() => {
    port = chrome.runtime.connect({ name: 'Background Connection' })
    port.onMessage.addListener(({ action, payload }) => {

      switch (action) {
        case ACTION.SET_PROJECT_DETAIL:
          setProjectDetail(payload);
          break;
  
        case ACTION.CHECK_STATE:
          console.log(projectDetail)
          break;
   
        
        default:
          break;
      }
  
    })
    port.postMessage({ action: ACTION.GET_PROJECT_DETAIL })
    return () => {
      port.disconnect()
    }
  }, [])

As you can see, after attaching the listener for onMessage on the port variable (which is defined outside the component scope), I am sending a message to the Background.js to get project detail. The Background.js responds back with as per the following code:

chrome.runtime.onConnect.addListener(function (port) {
  // console.log(" ~ file: index.js ~ line 182 ~ chrome.runtime.onConnect.addListener ~ port", port)

  port.onMessage.addListener(function ({ action, payload }) {

    if (action === ACTION.GET_PROJECT_DETAIL) {
       port.postMessage({ action: ACTION.SET_PROJECT_DETAIL, payload: { projectCode: "Some value"} })
    }

   // ...Removed more code for brevity

  });
});

Assume that I have a user interaction button which tells the Background.js to send a message to the Popup.jsx which matches the case ACTION.CHECK_STATE:, so evidently, I am expecting the Popup.jsx to console log the value {projectCode: "Some value"} as the state in the component has been updated (I have verified that it does by using ReactDevTools).

However, it prints { projectCode: null } which was the initial state value.

Note: the user interaction does not happen immediately after the component mounts, so its not that I am trying to get the state value immediately after I have set it.

I am unable to get the updated state value inside the callback function for addListener. Not sure what am I doing wrong here.

I guess it's because service worker terminates after 5 minutes, meaning you need to reconnect the port, [example](https://stackoverflow.com/a/66618269) (see "If you already use ports"). — wOxxOm, Jun 14 '22 at 13:33
@wOxxOm That could be the case, but even if the `CHECK_STATE` action gets triggered under 2 minutes, I still get old state value. — Whyashh, Jun 14 '22 at 14:10
@wOxxOm I verified the case, even when the service worker is active, the result is the same. — Whyashh, Jun 15 '22 at 06:02
So either the message wasn't received or setProjectDetail is bugged. You can set breakpoints there and see what actually happens. To open the popup's devtools, right-click inside the popup and select "inspect" in the menu. — wOxxOm, Jun 15 '22 at 07:14

score 0 · Accepted Answer · answered Jun 30 '22 at 13:10

The reason it was not working was that the port variable was declared outside the functional component itself.

Initially, the Popup.jsx was defined like this,

//...import statements

let port = null;
const Popup = () => {
  port = chrome.runtime.connect({ name: 'Background Connection' });
  
  //...more code
}

Afterwards, I changed it into,

//...import statements

const Popup = () => {
  let port = chrome.runtime.connect({ name: 'Background Connection' });
  
  //...more code
}

I can't say specifically what exactly was the reason. However, it seems to me that it was scoping issue.

Unable to get state value in when using long-lived connection in react base chrome extension

1 Answers1