Recommand · October 14, 2021 0

(Chrome/Opera/Etc) Extensions: Accessing *ALL* Text in Editable Object through Context Menu (not just selected/highlighted portions of the text)?

I am working to build a browser extension. I am a complete beginner at creating extensions as well as json and js; at the moment I am working to create this extension in Opera.

Ultimately, the final application of this extension will be as follows:

  1. Grab ALL text in an editable text object via right-click context menu (specifically, NOT SELECTED/HIGHLIGHTED TEXT)
  2. Apply specific modifications to it as dictated by user selection in the context menu.
  3. Then replace the original text with the modified text within the editable text object.

Repeated for its importance: I would like to gain access to all of the text in an editable object, not simply the highlight/selected portion of it. In other words, I want to right click on an editable object, such as a textbox, and grab all of the text within it.

And this is where I’ve run into a problem: how do I grab all of the text in an editable object, not just the selection/highlighted portion of the text in the object?

For my basis, I am using this simple example:

I’ve also found this 10 year old post ("Programmatically select text in a contenteditable HTML element?") but I do not have enough experience to try to implement it to see if the solutions work.

If anyone is familiar with how to achieve the basics of this, I would be grateful if you could provide me with a rough outline of code to show me how to properly implement the solution from the link above or another method that would work.

Thank you kindly.