How to auto bundle the HTML file containing chrome.tabs.create?

[v5out]

I'm trying to do chrome.tabs.create but don't know where to put it. I tried the code below in a Welcome.html page but I don't know where to put the page so it is automatically bundled. I've tried "public", etc. The only way it works is if I manually copy the Welcome.html page into the "dev" dir.

Or maybe there's some way to do this without an HTML page? E.g., chrome.tabs.create({url: 'Magic.js'}); ??

background.js -
chrome.runtime.onInstalled.addListener(() => {
console.log('Chrome extension successfully installed!');
chrome.tabs.create({
url: 'Welcome.html'
});
return;
});

[apple-4ppl3-apple]

@v5out I got the context menu to show up and open a tab, but only after building the project. Can't figure out how to do it in dev mode. Not the best dev experience obviously but I'm sure there's a way to do it properly.

// If your extension doesn't need a background script, just leave this file empty

messageInBackground();

// This needs to be an export due to typescript implementation limitation of needing '--isolatedModules' tsconfig
export function messageInBackground() {
  console.log("I can run your javascript like any other code in your project");
  console.log("just do not forget, I cannot render anything !");
}

// @ts-ignore
chrome.runtime.onInstalled.addListener(function () {
  // @ts-ignore
  chrome.contextMenus.create({
    title: 'Search Google for "%s"',
    contexts: ["selection"],
    id: "myContextMenuId",
  });
});

// @ts-ignore
chrome.contextMenus.onClicked.addListener(function (info, tab) {
// @ts-ignore
  chrome.tabs.create({
    url:
      "http://www.google.com/search?q=" +
      encodeURIComponent(info.selectionText),
  });
});