Is it possible to build an extensions like the following?
I want to build an extension that:
- Injects a header on the current active tab page (can be any page), and has an active/inactive state button.
- When the status is active, whenever you click on any element inside the page, it will prevent the click event propagation and open a small popup (like a tooltip) in the element you clicked with some information inside.
I'm sorry for the question. I'm new to Plasmo and Chrome extensions, so I'm a bit lost on the direction I should follow.
2 Replies
I think so, you would use CSUI for the majority of the logic, with which you can capture the clicked location. Then you can spawn UI at the click position (prob use absolute position here)
See
https://github.com/PlasmoHQ/examples/tree/main/with-content-scripts-ui for an example, and
https://docs.plasmo.com/framework/content-scripts-ui/life-cycle#anchor for detailed docs
You can do
pnpm create plasmo --with-content-scripts-ui to test outGitHub
examples/with-content-scripts-ui at main · PlasmoHQ/examples
🔰 Example projects that demonstrate how to use the Plasmo Framework and integrate with popular tools - PlasmoHQ/examples
Plasmo Docs
Life Cycle of Plasmo CSUI – Plasmo
Plasmo's CSUI orchestrates a lifecycle dedicated to mounting and unmounting your React, Vue, or Svelte components in a content script.