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

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.

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.

Related

is there a way to change elements of a page before opening it

I have designed a page to be used as a tool. I am getting some challenges here since my experience is very little in the field and im only new.
- my goal is to change values of an element on a page that is not open yet.
- is there a function i can make on current page to change the values of the element on the next page to preset it to some static numbers or some of them are dynamic
I dont know how to manipulate something that is not open yet, i dont even know if that's something possible. I was able to change elements on my open current page, but dont know how to change something on the next page if i click on one of the links
Park Property Management
Millgate Manor
Weston Towers
Kingston
Region Of Peel
so i expect to click on one of the links and when the link opens some elements in the links i need them to be filled with some values that are static always
You can't directly influence the content of another page with JavaScript in the current page. That would have very big security concerns.
However, you could indirectly influence the content if you have access to the source for both pages, and can add JavaScript to both of them. Then, as some comments suggested, you can for example use search paramaters in the link url to pass along information.
(Search parameters are the stuff that comes at the end of a url sometimes and looks something like ?name=john&id=555)
You can read more about about working with search parameters in JavaScript here:
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
Don't get discouraged! You're capabilities will grow as you try to make things work. (That's almost the only time they will grow.)
A word of caution!
Please be very careful when using search parameters to modify or display content on a page as there are some real security concerns involved. Never display anything from the search parameters directly on the page without validating the input first. A good way to handle dynamic content based on search parameters, at least if you know the possible options available, is to have some if .. else statements or maybe a switch block that you try to match the search parameters against, and simply not display anything at all if the content of the parameter does not match any input that you're expecting.

Choosing second page in domain with same path for local overrides

I wish to use Chrome devtools' "local overrides" for a test project. I wish to only change a single character on this page, and save it to my computer. On the webpage I have chosen, there is a page I wish to change. This page is only accessible via clicking a button on the previous page. Both the previous page and the page I wish to change have the exact same URL, like so:
https://stackoverflow.com/questions/ask?guided=false (page 1 with button)
https://stackoverflow.com/questions/ask?guided=false (page 2 reached from page 1)
The pages hold some similar elements that do not change, but a large portion of the page switches from one table to another.
All elements in the table are text with hyperlinks, and in regular inspect element it is trivial to find and replace the character on the second page, but within local overrides' 'Network,' and 'Page' tabs, II can only ever find reference and elements of the first page. Is what I am attempting even possible? Please excuse any ignorance on my part, I am simply trying to better understand local overrides, and how it would work here.

Pass Range instance through different contexts on Opera Extension

I am developing an extension for Opera, which is an absolute first for me, and at some point I want to save the context where a user highlighted some text, so that when the user refreshes the site, or reopens it later, the highlighted text will be highlighted. I execute a js script that does the highlighting, and it sends it back to the background process, which stores it in an array (for now I want it to be persistent at least through a single session of Opera). Then, once any tabs finishes loading, the background process has it run a different js script that highlights any previously saved text from that webpage. To do this, I have a highlight object, that currently has the highlighted text, along with the source url, and an ID. I tried passing the range that I used for highlighting the text, but as soon as the range object gets sent to the background process, it is just received as a generic object, which I cannot use.
So the problem I am facing right now is that once a page loads, I know what pieces of text had previously been highlighted on that page, but I don't have a way to highlight them.
I guess what I was trying to do (passing the range, or the start and end containers) didn't really make a lot of sense, but I can't think of another way to do it, nor can I find anything online to help.

Get certain element on a page to manipulate its value (HTML)

I have a specific question about a forum page I visit often, which I'm trying to manipulate locally with a custom script (extension).
This one for example
Looking at the code I can see that every message has its own section, and inside them there's a DIV with the id "likes-post-xxxx" where you can see on the page the users that gave the post a "thanks" or a "like". That DIV is always present, even when the post have no "thanks", but when it does there's an optional part that shows what users gave the thanks and an element with the Class "OverlayTrigger" that groups users on a pop-up when they are more than 4 I think.
My question is how can I get to this "OverlayTrigger" element, when it exists within a message, to get its contents (the number) and then manipulate the entire message that actually have this element to mark it in some way (like, change its color when there are certain number of users in the element, etc).
I've tried getting the element by Class Name but ended up with undefined values, I guess is because the number of messages on a page doesn't correspond to the actual number of elements containing the "thanks" since not all the posts have them.
All this in HTML/Javascript.

How to record the position of text on a page?

What I'm trying to do is allow the user to select a piece of text on the page and highlight it, then be able to load this selection and re-highlight it on further visits (with purely client side JavaScript, I intend to package this into a Chrome extension in future).
I am selecting the text with window.getSelection, but AFAIK this doesn't give me any kind of index or placement data about the selected text (or element).
The only way I can currently think of is to record the actual text and search for it, but this raises the problem of uniqueness (the same string of text is likely to appear multiple times on a given page). Is there a way of traversing the DOM tree upwards and storing the 'path' to the containing element (and then only having to worry about uniqueness within that one element)? I'd be happy with that if there isn't a better way.
Thanks
Edit: what I am doing right now is something similar to this: http://jsfiddle.net/e3XX6/
Have you examined the selection object returned by the getSelection() method? For example, it has an anchorNode property that in turn has a parentElement property. That last property will tell you the element that contains the text.
See this version of your fiddle (open your console!): http://jsfiddle.net/e3XX6/1/
Also, since you're going to make this a Chrome Extension, I'd just recommend using HTML5 Web Storage to remember the selection.

Categories

Resources