I want to show the icon in linkedin(only) website post input but I cannot see my extension when i configure my content_scripts

[piyushyadav0191]

wxt.config.ts

import { defineConfig } from 'wxt';

// See https://wxt.dev/api/config.html
export default defineConfig({
  modules: ['@wxt-dev/module-react'],
  manifest: {
    permissions: ["activeTab"],
    content_scripts: [
      {
        "matches": ["https://www.linkedin.com/*"],
        //  "js": ["content.js"]
      }
    ]
  },
});

Can anyone tell why extension is not showing even on linkedin.com website

[aklinker1]

Don't list content scripts in your manifest. WXT looks for content script files in your enterypoints/ directory, and generates the manifest for you.

Here's an example: https://github.com/wxt-dev/examples/blob/main/examples/inject-script/entrypoints/content.ts

And here's the docs: https://wxt.dev/guide/directory-structure/entrypoints/content-scripts.html

[piyushyadav0191]

Oh Thanks. I understand I am kinda confused using WXT because I always write extension in Normal Html, css, JS bundle one.

How can i achieve this functionality?

[1natsu172]

@piyushyadav0191 Call ui.mount(); ui.remove(); at the timing of the focus event or control it with CSS display while it is mounted.

• About UI docs: https://wxt.dev/guide/key-concepts/content-script-ui.html
• Issue related to dynamic UI mounting: Mount and unmount Content Script UI with MutationObserver #537