🧩 Plasmo Developers•14mo ago

Add content scripts dynamically.

Hello everyone 🖐🏼, I am currently working on developing a Chrome plugin, and I have a specific scenario that I need assistance with. On a webpage, if there is an HTML element with the attribute contenteditable="true", I need to display a floating button that can modify the text inside that element. I'm curious if it's possible to implement this functionality using Plasmo. Has anyone had experience with a similar requirement or can provide guidance on how to achieve this? Thank you in advance for your help!

10 Replies

Avi•14mo ago

I don't think you need to add a dynamic content script for it, just slap a good ol' https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver in a single content script

MutationObserver - Web APIs | MDN

The MutationObserver interface provides the ability to watch for changes being made to the DOM tree. It is designed as a replacement for the older Mutation Events feature, which was part of the DOM3 Events specification.

nivethanOP•14mo ago

@avi12 first of all thank you for helping,
I already used it for a project that added buttons to a website that show flight search results. It got complicated fast. so i'm asking whether is there any easy way with Plasmo. i already saw a MutationObserver mentioned in the docs thats why i raised this question. https://docs.plasmo.com/framework/content-scripts-ui/life-cycle#custom-renderer

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.

YAGPDB.xyz•14mo ago

Gave +1 Rep to @avi12

Avi•14mo ago

It got complicated fast

Do some code splitting, "single responsibility principle", stuff like that

whether is there any easy way with Plasmo.

I'm not aware of a Plasmo-specific way to achieve what you're looking for

I already saw a MutationObserver mentioned in the docs thats why I raised this question.

In general, when I set up a mutation observer I listen on the document, e.g.

new MutationObserver(() => {
  // Do magic
}).observe(document, { attributes: true, attributeFilter: ["contenteditable"] });

new MutationObserver(() => {
  // Do magic
}).observe(document, { attributes: true, attributeFilter: ["contenteditable"] });

If the mutation observer isn't serving you well, you could perhaps ping Louis; he's okay with being pinged to help

lab•14mo ago

This is the case for any software project - you will need to split out your code and organize it. Otherwise anything can get complicated regardless of the tool you use :d... - Plasmo helps a bit by letting you declare as many CS as you needed

Conquerer•14mo ago

mutation observer is the best. It might look complex but it isn't it probably because you do not have enough practise with it..

nithur•10mo ago

Hey @avi12, how would you render the csui in this case? like directly return the React component? Isn't it a bit odd to inject a react component when there is no need in the first place?

Avi•10mo ago

It depends on how complex you plan your content script to be For a single point of interactivity in the content script, you can use a CSUI without an issue On the other hand, a few years ago I made https://github.com/avi12/youtube-downloader in which I instantiated multiple Vue instances in the content script and therefore Plasmo won't be a good fit for this extension

GitHub

GitHub - avi12/youtube-downloader: A browser extension for simplify...

A browser extension for simplifying downloading YouTube videos. - avi12/youtube-downloader

nithur•10mo ago

Got it, thanks.

Avi•10mo ago

I mean technically I could use Plasmo, just not the CSUI feature

Gaming

Programming

Add content scripts dynamically.