How to access browser tab information in react web extension?

Firefox Development
#1

I created my first firefox sidebar extension where, amongst other things I need access to the information of the tab I’m on. If I run the sidebar here I get the url of this page. If I toggle to another tab, the information on the sidebar changes.

manifest.js

{
    ...
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "run_at": "document_end",
            "js": [
                "content-script.js"
            ]
        }
    ],
    "background": {
        "persistent": false,
        "scripts": [
            "background.js"
        ]
    } 
    "sidebar_action": {
        "default_icon": "icon.png",
        "default_title": "testing sidebar sidebar",
        "default_panel": "index.html",
        "open_at_install": false
    }
}

background.js

browser.browserAction.onClicked.addListener(() => {  
  browser.sidebarAction.open();
});

With vanilla JS I could do this (and other event listeners)

browser.tabs.onActivated.addListener(function (activeInfo) {
    browser.tabs.get(activeInfo.tabId, function (tab) { 
      GetInitialInfo(tab);
    });
  });

I tried to do the following with react (to give you an idea of what I think I need)

function App() {
  if (browser) {
    browser.tabs.onActivated.addListener(function (activeInfo) {
      browser.tabs.get(activeInfo.tabId, function (tab) {
        console.log("tab change", tab);
        return (
          <div className="App">
            <header className="App-header">
              <p>This is a test</p>
            </header>
          </div>
        );
      });
    });
  } else {
    return <p>loading</p>
  }
}

But of course browser isn’t defined and so app doesn’t build.

Or is there some other way I could get my react app/firefox-sidebar to have access to the tab information.

#2

There are a few different ways to access browser tab information in react web extension. One way is to use the browser.tabs API. This API provides various methods for interacting with tabs, including getting the current tab’s information.

Another way to access browser tab information is through the context menu. The context menu is accessed by right-clicking on an element in the browser. From the context menu, you can select “Inspect Element” to open the developer tools. The developer tools provide a variety of information about the currently open tab, including the tab’s URL and title.

Finally, you can also access browser tab information through the browser console. The console provides a variety of information about the currently open tab, including the tab’s URL and title.