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.
Related
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.
I'm building extension for Chrome using manifest V3. Interaction I'm trying to achieve is:
User clicks a button in context menu.
Extension communicates with the server and receives some string in response.
User clicks another button in context menu and said string gets pasted where their cursor is.
I see two ways I could achieve it and I'm not sure which one makes more sense (or how to get either to work, really):
One would be to have said string put into clipboard and then have user access it with paste command.
Second would be to have a separate context menu button which upon pressing pastes the string where the cursor is.
Either solution would work for me, however I prefer one that asks for less permissions from user (I'm already accessing storage, requests and context menus). So far I was also able to avoid using background workers and event pages, which provided some convenience when working with context menus - I'd like to keep it that way, but I'd rather have my extensions actually working ^^
Unfortunately Chrome documentation is rather confusing, bordering on circular, when explaining how to achieve something like this, especially within Manifest V3. How do I go about it?
The title probably isn't great but there isn't an easy way to explain what I am trying to do.
I have a div with Content editable enabled. I want to make is so that any text written will be saved. I don't want to use localStorage but want to just directly save the text in the html file. I'm not sure if this is possible and I have looked for anything similar and wasn't able to find anything.
No: it is not possible to edit the files you serve to users using only front-end specific technologies. It would be very dangerous.
However, you could trigger an event on text modification and then send changes information to you back-end. There you would have to do some logic to ensure next loading will contain the data changed by your user.
I'm playing around with Google Chrome Extensions and wanted to make one where you fill out a form beforehand. Then whenever, a certain URL is opened, it fills in the information you filled out. I can save the information, and track the tab URL with one of Google's packages. However, when the URL is loaded, how can I tell what form to put the saved strings into? I know how to use var.document.getElementById(""), and can see the ids when I inspect element, but since it's not my webpage, I can't link it to my JavaScript file, so it doesn't help. I've seen this been done before but just can't find the right tools. Any guidance to an answer would be appreciated.
I'm creating a webform using a marketing automation platform. I want to add a field that functions with jquery to do an autocomplete. Unfortunately, the forms are generated through a WYSIWYG editor in the software, and then generated and put into the page when it renders. The only code for the form that appears in the HTML for the page is a simple variable placeholder - %%FORM::DEFINITION%% - which is then replaced with the form code when you visit the URL. The software support team tells me that making the change I want to make is impossible, which I see as a challenge.
The only thing I need to be able to do is add an id="autocomplete-dynamic" attribute to the input on the form. I had two ideas how I could achieve this.
The first, and most preferable option, would be some script that runs at the bottom of the page that simply inserts the attribute into the input tag after the page renders out. This would only be a client-side change, but since all this does is make the text field capable of looking up values out of another table, it should be fine. If someone had a script blocker in place, they would not be prevented from typing into the text field normally, it's just that the auto-lookup wouldn't work. We're trying to make it easier to select an item from a list of thousands of possibilities, but if someone had to type in their own entry without the autocomplete, it would not be a disaster. This seems like a clean solution, but I am not sure if it can be done.
The other possibility is to get the form code out of the software and embed it in a separate HTML document, and make the change there. You can extract the raw HTML for the form for use on another page, but pasting this code right back into the landing page causes errors. So, the thought then was that if I have taken the code generated by the software and put it in an HTML page on a separate web server, I could modify it as needed, and then turn around and use an iframe to stick it right back in the landing page. The software shouldn't complain because the form is being used on an external site like it's supposed to be... I have just hidden that external site back inside the platform-hosted page.
Option 1 would still be much easier to implement, I think, provided it is actually possible.
Thanks in advance.
Your first solution seems completely appropriate.
$(function() {
$('#myForm input').attr('id', 'autocomplete-dynamic');
});
This can be added anywhere inside a script tag because it's wrapped in a shorthand document.ready function, which waits to run until the DOM is ready.