CODEWITHSUNDEEP
javascriptjquerygoogle-chrome-extension
dipole_moment
dipole_moment

Reputation: 5854

JS Challenge: Load changed text into the DOM on page reload

I'm working on a JS chrome extension that allows the user to modify text on any web page. The challenge is that when the user visits the web page again, he/she should see the modified text rather than the original page's text. Let's assume the user can only modify paragraph elements (p)

In another words, on page load, the extension needs to scan the document - find the matching text and modify it.

This is a challenging problem because:
- In between visits, the page could change
- There could be any number of text occurrences. For example, the string "I am a ninja" could appear 10 times in a page. - Other extensions could modify the DOM as well (who knows what extensions the user have installed). - This needs to work on ANY WEB PAGE

On a subsequent page visit, when the user needs to see his/her modified text - how would you go about determining what text to modify? Right now I'm doing simple string matching which is far from ideal.

Ideally, I will have a function which scans each element in the document and return a percentage degree of certainty (0 - 1) of the likelihood that this is the element the user modified.

FOOTNOTE: I realize that there will be instances where the page will be modified completely and it will be impossible to find the element but, I'm not interested int those instances - In those cases, I will render those differently.

Upvotes: 0

Views: 62

Answers (1)

Gaurang Tandon
Gaurang Tandon

Reputation: 6753

Simply thinking it over, I came up with this (yet not complete solution): Whenever the user selects the text to modify, right clicks and calls your extension, what you should do is:

Use Selection and Range objects to get the nearest proper node (having class and id) (if none present, then simply the nearest node) in which the range is present. I assume that the marked text cannot be within textarea or input element. Then, get the offset of the selected text. Grab details of that nearest proper node i.e. class and id.

Store this all data into the synced or local quota storage and then use this data to remodify the text next time the user visits the page.

Note that this assumes that these proper nodes would not be modified at later point of time. Like, if I mark some text in this answer, then delete some other part of the answer, which makes this texts offset shift left, then the above solution would not work.

Upvotes: 1

Related Questions