Getting value from a div element in a online/running site - javascript

So Lets say I have a site like this one http://www.worldtimeserver.com/
and I want somehow to get the value of the time every second and write that value in a .txt file. I was going to use a OCR(optical character recognition) software for this job but ..... in the end this option wasn a good choice because I could not rely on exact position of the clock.
Then I started to think "is there a way to inject/put some code in the browser that would do this?". When I inspect the web-page (in Chrome) I saw that the Div containing the time has an id="theTime". So is there a way to do this? I have some basic experience in JS & DOM ... but this I have no idea how to do or from where to start. Also i would like to point out that I need to rely that the script will do this job for hours and hours and that the value of the clock is set by outside (a server).

If the value does not require the browser to refresh to change the value.. you can save it using localstorage and later copy paste it in a txt file

this is a possible duplicate.
Get value of input field inside an iframe
use an iframe (you can hide it if you don't want users to see it).

Related

Identifying the source of a value in a reactive object on a website

This website contains a numeric "value adjustment" value (highlighted on the left in the image below) that appears when visitors populate fields elsewhere on the page with certain values.
My goal is to find the code that calculates the value adjustment. I know that populating the fields that makes this value appear queries a database, but the values from that database are then passed to some sort of program/code somewhere that computes the "value adjustment."
As I'm a novice when it comes to Javascript and web design, my first step was to inspect the elements around the value adjustment in Chrome Developer Mode. As you can see on the right-hand side of the image, it's straightforward to find that value. However, I have no idea how that value was produced.
At a high level, what steps can I take to try to figure this out? For example, does the fact that the value is "hard-coded" in that image as a string imply that there is a script file that is sourced somewhere every time that value is updated? How can I look for/inspect this script? Or are these scripts not observable?
When you inspect the elements tab in dev tools you are inspecting what is rendered on the webpage. It always looks hard coded. It's showing you the end result.
If you inspect an element that changes things on the page when it's interacted with, it probably has js 'event listeners' attached to it. You can inspect the code for the listeners in dev tools which would reference specific js functions which are called when specific events occur. You can do essentially the same thing via the console too.
Additionally, If you look in the network tab of a web page you can see all the client side files served to you when a page is loaded. You can filter for js files. However, there could also be js embedded within html.
Depending on how the page was made, libraries/frameworks used, and what processing was done to the js before being added to production environment, the js code could be quite a nightmare to attempt to read even if you have an in-depth knowledge of JS.

Self-changing javascript bookmarklet?

Basically, I have a bookmarklet with code in it that I can and want to update later.
Is it possible to make the bookmark update itself if it is out of date? I don't want to force my users to always manually update it.
I have tried to look it up but the results are either chrome extensions adding/updating the bookmark, or just putting javascript in bookmarks, which I already know how to do.
Is it possible to do what I am trying to do? Or do I have to store the main code in localStorage and update that?
(Ignoring the problem about detecting the version and fetching the updated code, I got that covered)

What is preferred implementation of Chrome extension that catches and reads newly added list values on one specific web page?

I need to create a Chrome extension that will work only for one webpage with specific URL. It will monitor changes to list of items (orders) located on page and if new order appears, it will read some values from order and do something with them. It also may be neccessary to refresh the page from time to time (using timer, maybe).
What architechture will be suitable to accomplish such a task?
Now - to thoughts I have so far. I think now of using only one content script bound to page URL. Will it be enough? Or should I introduce some background script also? Or anything else?
As #wOxxOm said in the comments, creating one content script must be sufficient for reading the values and page refreshing.

How can you change a value in javascript from another webpage?

I've created a loop in JS and have a condition that say if(minute === 15), once the clock hits 15mins past (whatever) the condition is met.
I want to make that "15" a variable that can be changed from another webpage.
website.com/alarm
Contains the loop
website.com/alarmConfig
Contains a text field used to set the minute.
I originally was going to make that script read a notepad that has the value in it, but because the page will be running on a range of devices I need those browsers to be able to do that.
What would be the simpliest way of doing this? Doesn't need to be in real-time
You can't do it. But you can use cookies or localStorage to share these variables.
For simple synchronous storage access HTML 5 introduces the localStorage attribute on the Window object:
localStorage["status"] = "Idling.";
You can make an Ajax call to "website.com/alarmConfig" webpage and then retrieve the value of the text field used to set the minute and then update the loop in "website.com/alarm".
Also, you will make the call after the said duration is over and once you retrieve the updated value, you can run the loop again.

How to identify source of data field being updated on web page

I am trying save data from a web site. There are fields in the html that look like this
<td class="data-value" id="v0">yellow</td>
where the text yellow changes as the user moves the mouse on the page. (To be clear, these fields do not appear in the source if I just do "view-source", but if I use Chrome Develpment Tools and do "inspect element" I can see this.)
I want to find and save the source of this text, which I'm pretty sure is coming from JSON somehow, but I'm not that familiar with Ajax and other tools that the site appears to be using.
So, is there a way to identify where this text is coming from and access it? In other words, I'd like to be able to parse the HTML, and identify what call to make to just see the JSON that is populating this text.
The text may be remotely generated, in which case you will have to simulate the same AJAX requests to access all of the cases.
If the text is stored locally (Javascript), you can access it via events. The first step would be to identify the type of event. Is it a onmouseover or onmousemove? What is the event callback attached to? The page, or the elements being "overed"?
After identifying those criteria with a debugger, you will be able to search the html and javascript references for where these events are being attached in code. That will lead you to a callback function (the one making the decision of which text to post). This callback may perform AJAX, it could have a local table, or it could be a different callback for each element. Any way you go, at that point you will know which file to have your script look at to parse out the data you're looking for.

Categories