How do we access content script from popup.html file

I am creating a browser extension using WXT
I have set up the basic styles for popup.html and now i was trying to create a element from the dom using the extension. In order to do that i have written up a very basic js code which creates a video element (This is to test if it actually works and to my surprise i got an error saying “document is not defined”). So after debugging for a while i found out that we cannot access dom or storage related stuffs from background worker. In order to get access to these we would have to do so by using content script.

So, then i started digging into implementing an approach where i can create an element using content script of the extension but i cant seem to wrap my head around it.

For you guys:

# popup.html
      const [tab] = await browser.tabs.query({ active: true, currentWindow: true })
      if (!tab?.id) throw new Error("No tab found!")
      console.log("tab ", tab)


      const resp = await browser.tabs.sendMessage(tab.id, "to_content_script")
      console.log("resp ", resp)

# background.ts
import { browser } from "wxt/browser";

export default defineBackground(() => {
console.log("background worker initialized")
}

# content.ts
export default defineContentScript({
  matches: ["*://*/*"],

  async main() {
    console.log("content script initialized")
  },
}); 

CURRENT PROBLEM: the content script never actually initialized, no matter what i do.
I tried sending an message from popup.html to content.ts file where i was listening for the message.
I also tried sending a message from popup.html to background.ts(This worked), then from background.ts to content.ts file, where this didnt worked.

# wxt.config.ts
import { defineConfig } from 'wxt';

// See https://wxt.dev/api/config.html
export default defineConfig({
  extensionApi: 'chrome',
  srcDir: 'src',
  modules: ['@wxt-dev/module-react'],
  runner: {
    startUrls: ["https://wxt.dev"],
  },
  manifest: {
    version: "0.0.1",
    permissions: ["activeTab", "tabCapture", "tabs", "webRequest", "scripting"],
    host_permissions: ["<all_urls>"],
    background: {
      service_worker: "background.ts",
      type: "module"
    },
    content_scripts: [
      {
        "matches": ["<all_urls>"],
        "js": ["content-scripts/content.js"]
      }
    ],
    content_security_policy: {
      extension_pages: "script-src 'self'; object-src 'self';",
    },
    web_accessible_resources: [
      {
        resources: ["*"],
        matches: ["<all_urls>"],
      },
    ],
  }
});