Debug javascript from a generated page - javascript

In my application I made some computing server side with a Javascript interpreter. I'd like to take advantage from F12 debug engine in my browser chroome to let the user debug his scripts. To do that a generare a new page and open it in a new window
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "/test/tipoManufatto", true);
xhttp.setRequestHeader("Content-Type", "application/json");
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var new_window = window.open(null, '');
new_window.document.write(this.responseText);
}
};
xhttp.send(JSON.stringify($scope.tc.selected));
the page is generated correctly and the server side generated scripts runs fine but if get into F12 tools
I cannot see my script in the source tab therefore I cannot set any breakpoints.
Is there a better way to open a dynamically generated page in a new window? I need to generate the page from the back-end with a POST verb in order to send some data.
Here is what my network tabs looks like

Related

Receiving a 404 error from any website I attempt to pull data from

I'm attempting to create a simple web app that pulls data from a website depending on user input, but no matter what URL I use, it produces a 404 error in the console.
Here's the code, there's nothing else relevant as I've changed my other code for testing to simply submit a basic URL that doesn't depend on user input, by calling the function as so:
httpGet(myUrl);
function httpGet(theUrl){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("definition").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
}
This is a security feature, these third party pages might not want clients from other peoples apps to access that service as API but visit those pages directly. A solution can be using your own server as some kind of proxy. Your html-app will request your server, and your server access the remote service/website.
I see there is also a github page. Instead of having JSON files, you could wrap that data into a function-call and store as .js file (see jsonp). if the repo belongs to someone else, you can clone it into your own github page. But check if the license allow that.

How to get the IP Adress in JS - Firefox Addon Devloment

I am building a small custom Firefox Addon with regards to the Firefox documentation. Basically it uses javascript and can also use some Firefox JS Extension APIs. I am trying to get the browser IP adress from inside the extension, usually I would use a PHP script for that but here I think I am limited to this HTML and JAVASCRIPT combination, Any ideas about this?
var xmlhttp = new XMLHttpRequest();
var url = "https://api.ipify.org/?format=json&callback=getIP";
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var myArr = JSON.parse(this.responseText);
var ip = myArr.ip;
console.log(ip);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
you can use HTTP Request for Getting IP Add. of your client
https://api.ipify.org this website provides you the user ip address as a json object
<script>alert(window.location.hostname)</script>
in this case an alert will pop-up but the code is inside of it

How to open popup div after sending xml http request?

I am building an extension that should help users use certain site more easily.
Now I am new to AJAX,XML and everything similar so this can be easy question,but I am not sure.
On that website, after clicking on one button, it send xmlhttprequest and after receiving some information it opens a popup div(Displays personas stats etc. and has buttons that are unique for that persona).
Now I wrote the exact same xmlhttprequest that is being sent to server after clicking the button,but after getting the information that is being asked for,it doesn't open anything(which is logical) but I don't know how to open it.
var request = new XMLHttpRequest(),
userz = '76561198364912967',
url = 'https://www.[WEBSITE-NAME].com/api/v1/getuserinfo/?steam_64='+userz,
data = 'steam_64=76561198364912967',
token ='OAuth 3539383833353a313a7b66383738626464332d616536612d343132642d626466342d6136313462366164396139317d';
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log("The request and response was successful!");
}
};
request.open('GET', url, true);
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.setRequestHeader('authorization', token);
request.send(data);
Now this is the code and I know that it might not be this language that I am asking for but I think that it is.
I get same response when clicking on button(that site has) and running my script
This is popup div's html code
This is how div looks
Big gradient button has different request data(after clicking it) for each persona that div is opened for.Therefore it has to have something to do with previous request.
The goal is not to make a popup that does nothing, I need to trigger the creation of div that has some functions(like that website makes it)
Cheers!
try using: request.responseText
like this:
var res=request.responseText;//answer from application or server
var elm=document.createElement("div");
elm.innerText=res;
document.body.append(elm);
If you want to make a popup this should work:
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
let mod=document.createElement("DIV");
document.body.appendChild(mod),mod.className="modal";
let con=document.createElement("DIV");
mod.appendChild(con),con.className="modal-content";
let c=document.createElement("SPAN");
c.className="close",
c.innerHTML="×",
c.setAttribute("onclick","this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)"),
con.appendChild(c);
let p=document.createElement("P");
con.appendChild(p),
p.innerHTML=request.responseText;
}
};
and some CSS:
.modal{display:block;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.4)}.modal-content{background-color:#fefefe;margin:15% auto;padding:20px;border:1px solid #888;width:80%}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer}
Demo

JavaScript: How to access to a given URL without opening its web page in a browser

I would like to know if it is possible in JavaScript to access to a given URL without opening its web page in a browser . Actually, what I'm really trying to do is parsing through a page (given its URL) and clicking on the first link that it contains without even opening that web page in my browser. Is that doable with JavaScript. In case it is, how should I do that? What function (or functions) should I use? In case it is not, what would the alternative solutions be?
What you need is to make an HTTP request to the URL and process the results. You can do that in JavaScript using the XMLHttpRequest object. Example:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
}
};
xhttp.open("GET", "put_the_URL_here", true);
xhttp.send();
However, it is easier to use a library like jQuery.Ajax for that:
$.ajax({
url: "put_the_URL_here",
context: document.body
}).success(function(data) {
console.log(data);
});
For this to work, the URL that you're trying to access must have CORS enabled.

Chrome Extension interact with page (not in tab) in background

How can I make a extension that interact with a page in background (not in tab)? for example check www.google.com each 5 minutes while I have only www.yahoo.com open.
I have made the function of the extension but I need to know how to use it without having this page open.
Regards.
Saying you want to interact with https://www.google.com without opening it, you could make an ajax call in background page. Steps would be like the following:
Add https://www.google.com/* in permissions field in manifest.json
"permissions": ["https://www.google.com/*"]
Make an ajax call in background page.
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var data = xhr.responseText;
// Your logic to handle response data
};
xhr.open("GET", "https://www.google.com");
xhr.send();

Categories

Resources