Add button to existing element on the website

[fiery horizon]

Hey, so I'm making a browser extension using Vite.
I want to run it only on a specific website, for now let it be example.com, find element on this website by its path and then add button next to it.
I know how to find element by path but I'm not sure how to make this run automatically on the specified website.

"content_scripts":
    [
        {
        "matches":["*://*.example.com/*"],
        "js":["./src/ContactButton.tsx"]
        }
    ],

but when I try to actually add my extension to the browser

it says that it cant find "ContactButton.tsx"

[oak cove]

@fiery horizon Browsers do not run tsx files: they don't understand either JSX syntax or TS syntax.

You'll need to generate a JS file somehow - common to use some sort of bundling/build tool like rollup or vite.

[fiery horizon]

im using vite

[oak cove]

Then you'd need to point the manifest at a built js file that comes out of vite.

[fiery horizon]

okay but how can i know where the built js will be?

[oak cove]

That's vite configuration. dist is probably the usual place it'd end up.

[fiery horizon]

well its not here

[oak cove]

Well, ContactButton is probably not configured as an entry point for your project in Vite.

[fiery horizon]

yep

i dont want it to be the entry point

[oak cove]

Well, the extension is going to need some sort of entry point to work with.

You can't just point it at a React component

[fiery horizon]

i think the App.tsx is the entry point

or main.tsx

i want the ContactButton to be a separate thing from my main extension that will run only on a specific website

the rest of the extension runs in its popup

[oak cove]

A react component can't really run on its own.

You'll need an entry point for it that loads react and mounts the component.

[fiery horizon]

okay

and how can i achieve that?