Programatically set controlled form values from a Chrome extension - javascript

I'm trying to write a Chrome extension that makes the process of uploading to various social media platforms a little smoother.
This requires being able to set form inputs such as the Title and Description on, for example the IGTV upload page . I have tried to do this with javascript such as document.querySelector('input[placeholder="Title"]').value = 'My New Title' and this appears to work.
However if you then 'focus' on the inputs once my code has filled them in, they revert to being empty again. I expect this is because they are being controlled by some frontend React code that is not being altered by my code.
Can you please suggest a way for me to set these inputs with my code in a way that the frontend framework will detect?

Related

How to detect if a site lets you upload files?

I would like to be able to tell if a site lets you upload files. I can think of two main ways sites do it and ideally I'd like to be able to detect both:
Button
Drag & Drop
PhantomJS documentation has this example snippet:
var webPage = require('webpage');
var page = webPage.create();
page.uploadFile('input[name=image]', '/path/to/some/photo.jpg');
but it's not clear how I could figure out that input[name=image] actually supports uploading.
Currently, my crawlers are following all links and buttons on sites but I am not sure how to detect that "a file upload pop-up has been opened". The D&D case is even less clear to me. I need a solution for a single page and obviously I can then go and apply it to every page I pass.
UPDATE
Turns out most of the time this does the trick:
document.querySelector('input[type=file]').click()
However, D&D areas aren't always clickable and you can't always assume [ondrop] will be present. Sometimes, the drop listener is added in code:
object.addEventListener("drop", myScript);
How can I check for presence of such elements then?
You can check if a form has enctype="multipart/form-data" or not. or search for input with type=file in html page.
AFAIK the best approach to upload files with selenium is to send the file to be uploaded directly to element located by this CSS Selector input[type=file].
So in order to check if some web page supports file uploading you can by checking if that page contains input[type=file] element.
This element is normally not visible and not interactable by GUI so you can only check it's existence, not visibility etc.
Nothing can get you 100%, but i think 99% it works with input[type=file] unless user wasn't creating it at runtime using javascript.
Or you can check for form's enctype but also it isn't always works as there's a good chance that user compress and changes the file into base64, then there will be no need for enctype to be multipart/form-data.
So input[type=file] is the best way.

how to change input field using javascript

I'm trying to change input value on website using chrome development tools.
I tried many different way, but still not working.
cuz many triggers embedded there.
source page below.
https://upbit.com/exchange?code=CRIX.UPBIT.KRW-BTC

Calling OA Page from custom JSP

I'm trying to launch a custom OAF page from a custom JSP. Although the OAF page is loading fine and functionality is also working correctly, but there is drastic change in the look and feel of the OAF page. FOr eg: Go/Clear buttons are displayed as rectangles. Also, for LOVInput fields, the Quick Select is coming as an hyperlink rather than Image that we see normally.
I'm using Oracle 11i and Jdev 9i.
I have registered my OAF page through AOL function, and calling using javascript from my custom JSP.
I have tried looking at various sites but mostly they deal with launching of OAF page (which i already have done).
https://community.oracle.com/thread/571687?start=0&tstart=0
https://community.oracle.com/thread/388873?start=15&tstart=0
My issue is with the difference in look and feel of the OAF page. It is working fine in JDev.
Image showing Go and QUick Select buttons
Fixed this issue by updating the profile option "Oracle Application Look and Feel" value at User/Responsibility level as "Browser Look and Feel".

Logging in to the Netflix website using JavaScript

I'm trying to write a wrapper for the Netflix web page in Qt using QWebEngine so that I can use my remote control to navigate. For those who didn't know, the Netflix website can't even be navigated using the arrow keys...
So, anyway, I have used QWebChannel to inject some JavaScript code into the web page, and can (visually, at least) modify the relevant elements:
document.getElementsByName("email")[0].value = "%1";
document.getElementsByName("password")[0].value = "%2";
document.getElementsByClassName("btn login-button btn-submit btn-small")[0].click();
This actually works (I can see the fields filled with what I provide for %1 and %2, and the button is pressed programmatically), except for one crucial issue: this results in the messages below the input forms telling me "Please enter a valid email." and "Your password must contain between 4 and 60 characters.". These tell me somehow just setting the HTML elements' values doesn't have the same effect as me manually typing in the values. Could someone help me figure out why this doesn't work, and how I can make it work? I would like to restrict myself to plain JavaScript, it seems like a simple enough task to achieve without e.g. jQuery or some other Javascript library.
I understand this is a terrible way to approach the whole Netflix-on-a-HTPC thing, but I don't want to go digging through e.g. Flix2Kodi's Python to figure out what they are doing (which seems to me is a lot more susceptible to bad breakage than the end result I'm aiming for).
The input field for the email uses some sort of HTML5 and ReactJS validation mix.
However it seems like ReactJS validation cant handle the the dynamic value change, so I tried to find a way to deactivate it, which I did not directly, but I guessed that it has to add some sort of event handler to the form so I came up with this:
var validatingForm = document.getElementsByClassName("simple-login-form")[0];
var nonValidatingForm = document.getElementsByClassName("simple-login-form")[0].cloneNode(true);
validatingForm.parentNode.replaceChild(nonValidatingForm, validatingForm);
which gets rid of all event handlers and therefore ReactJS's validation. Now you can set your value using your code:
document.getElementsByName("email")[0].value = "%1";
document.getElementsByClassName("btn login-button btn-submit btn-small")[0].click();
Note that HTML5 is still validating the inputs, so you have to provide an E-Mail Adress, if you want to get rid of that too set the input type to text before changing the value:
document.getElementsByName("email")[0].setAttribute("type", "text");
However the next page after the Button click asks for the password so you'll have to provide it there as I didn't find a way around this.
Buuuuuttt could you not have saved the password in your browser, let it do it's autofill work and fire the click event only?

Reverse engineering which javascript/ jquery function is being called

I need assistance determining what is doing client side validation on a site.
There is a web form on a site, and it does some client side validation on a field labelled Email (named Question2). This is the page: http://www.home-energy-analytics.co.uk/concrete5.6.1/index.php?cID=132.
If you add a "1" to the email field and then change the focus to another element, you'll see the border turn red. If you try to submit the form, the client prevents it, and shows what looks like an absolutely positioned div with the text, "Please enter an email address". It doesn't seem possible to inspect this element using firefox or firebug. I have checked all the inline scripts and those in separate files, but cannot see what is doing these validations.
It looks like there may be a script which is created dynamically by the client using the ccm_addHeaderItem function in the ccm-base script, but I cannot see how that function is being called, in order to work out the URL of any dynamically created script.
Are you able to find the function(s) doing these validations?
Note, as this is a concrete5 site, I have asked on the concrete5 forums without success.
This is a HTML5 feature. It will be implemented by browser default behavior.
Check the example here http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_email
This behaviour can be seen anywhere for a input field with type "email"

Categories