I created a basic firefox sidebar extension and now I want to rewrite it with the help of parceljs

The extension works by getting information from the browser tab. Now that I'm trying to rewrite it in parceljs, browser.tab doesn't seem to work

This is what I have without parceljs

//manifest.json
    "sidebar_action": {
        "default_icon": "icon.png",
        "default_title": "Theme integrated sidebar",
        "default_panel": "sidebar/index.html",
        "open_at_install": false
    }
// sidebar/index.html

<script src="main.js"></script>
<script src="extension.js"></script>

// extension.js

 browser.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
    if (changeInfo.status == "complete") {
      GetInitialInfo(tab);
    }
  });
function GetInitialInfo(tab) {
  document.body.style.backgroundColor = "#202020";
  const string = "watch?v";
  if (findLetter(tab.url, string)) {
    YoutubeScript(url, tab.title, "editor_countainer");
  }
}
// main.js
function YoutubeScript(youtube_url, title, container) {
  fetchData(youtube_url, title);
  // and then is just a case of injecting data in the dom
}

With parceljs.js I tried this**

//manifest.json
    "sidebar_action": {
        "default_icon": "icon.png",
        "default_title": "Theme integrated sidebar",
        "default_panel": "sidebar/dist/index.html",
        "open_at_install": false
    }
// sidebar/index.html
<script src="extension.js"></script>
// extension.js
 import "./main.js"
 browser.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
    if (changeInfo.status == "complete") {
      GetInitialInfo(tab);
    }
  });
function GetInitialInfo(tab) {
  document.body.style.backgroundColor = "#202020";
  const string = "watch?v";
  if (findLetter(tab.url, string)) {
    YoutubeScript(url, tab.title, "editor_countainer");
  }
}

I have to change the index.html output by adding a dot in src=".extension.js". Then everything work apart from the browser.tab, that doesn't work