Develop Reference

How to extract information from web page

I'm looking for a way to automatically extract information from a web page, more specifically an online game (https://www.virtualregatta.com/fr/offshore-jeu/).
In the game, I want to extract/copy the position of the boat. With Mozilla and its debug tools, I used the network debugger and I saw an HTML POST request containing what I want.
It seems that we receive as a response a json containing a structure with latitude/longitude.
This is perfect to me, but I want a more user friendly way to get it and I would need advices. Problem is that I'm really a beginner in web development haha.
Is it possible to do this using a script ? (But I suppose it will be complicated to first log into the game)
Is it possible to create a basic Mozilla plugin which would be able to catch the request/response and copy the position to clipboard for me ?
anything else ?
EDIT:
I've tried using a Mozilla plugin, and I achieved to add a listener on POST request. I see the request to get the boat information but I can't find a way to get the json response in JS.
function logURL(responseDetails) {
console.log(responseDetails);
}
browser.webRequest.onResponseStarted.addListener(
logURL,
{urls: ["*://*.virtualregatta.com/getboatinfos"]}
);

In Chrome I use Broomo for this purposes. It helps you to add scripts in web pages, you can console.log the POST you found, and of course you can create functions and Use the webpage Backend.
In firefox I found this one js-injector. But I didn't use it before.
Update:
Now there are a new extension for both browsers:
Chrome: ABC JS-CSS Injector
Firefox: ABC JS-CSS Injector

Getting access to a XML from javascript without Node-Without JQuery

I am trying to developp modifications to a game. The thing is the game is already compiled and the developpers prefer not to decompile the game (for the time beeing). Because of the compilation probably, everytime I try to load JQuery or Node.js whatever version I get the error "that a key already exists in the dictionary". The thing is everything is fine without Node.js or JQuery.js.
What I am trying to achieve is add some features to the game that unfortunately aren't available through the Game's API function call itself. I want to be able to get access to data Inside .xml files used for items/weapons/devices/engines spécifications of items Inside the game. I've tried pretty much all I could find on Stackexchange with what I searched for which was Node and JQuery. Im sorry if you guys think this is a duplicate question. Because it isn't. I can't use Node.js neither can i use JQuery. What else could I try? can someone help me please.
I am a bit new to programing with only 1 year experience in c# and Javascript. Sorry if this feels really noObish to you guys.

What you need is ajax. Modern browsers provide a pretty functional XMLHttpRequest, so you don’t even need a framework anymore.
One important thing to know: you most likely won’t be able to download the xml file using ajax if it’s on a distant server, due to the same-origin policy. You need a reliable access to it. The most convenient solution is to have a copy of the file on a local server such as WAMP, XAMPP, and the like.
I’m not going to write yet another ajax tutorial. Insteal I’ll just provide you with a working minimal HTML page, and point you towards XMLHttpRequest documentation.
<button>Request</button>
<script>
'use strict';
document.querySelector('button').addEventListener('click',
function () {
let req = new XMLHttpRequest();
req.onload = function () {
if (this.responseXML) {
console.log(this.responseXML);
}
else {
console.log(this.responseText);
}
};
req.open('GET', xmlURL); // xmlURL should be the location of the .xml file
req.send();
});
</script>
When you click on the button, the script will request, and then display the server’s response, if any, in your browser console. To open the console, press F12 and select the console tab.
Be aware that the responseXML property will only be populated if the xml sent by the server is strictly well-formed. Xml parsing in JS is somewhat finicky, so you may want to rely on responseText as a fallback.

jQuery.tokenInput.js script in JavaScript not working

I am making an application that is purely out of JavaScript (frontend and backend). So now I am using jQuery.tokenInput.js and I am having some troubles with the plugin recognizing the script.
First of all, it's not logging any error messages so I don't even know if it's an issue on my end or not.
I've essentially created a route in the application /autocomplete/tags and it accepts q parameter as well.
So when I type in something like this /autocomplete/tags?q=r I get the following result on the page
[{"tag_name":"Android","_id":"ooJaBpZ6MShmzbshY"},{"tag_name":"RPG","_id":"KpvAqCRqKKP5rbGLD"}]
So now when I initialize the plugin like this
$('#tag_input').tokenInput("/autocomplete/tags", {
theme: "facebook",
propertyToSearch: "tag_name",
tokenLimit: 5
});
It changes the input and everything. I've even tried with constant data and it seems to work but not with a script for some reason.
Is there a way I can debug/troubleshoot? Can I somehow turn on logging for this plugin? I don't actually see any issue with the way that I am doing it. I've looked at the demos and they return JSON in exactly the same way.
If you've got any ideas, it would be great!

The JSON returned from an external service must be returned under an application/json header type - we found that this service was returning text/html instead.
Information about how to specify the content type with Meteor can be found on this question.

flashfirebug getting data from actionscript 3 console

My need was to capture data (text data) from flash in a web page.
The data is always changing (wheather data) and this should be exported do a text file so i could manipulate this data.
I tried do this with and my first approach was using a websniffer like fiddler or wireshark.
I used that but could't get data from both because it is embedded in flash.
I used fidler as man-in-midle with wireshark deciphering the data (with the private key from the site cer) but it didn't worked.
After that i tried using flashfirebug pro (the pro allows to run as3 comands in the console). This addon loads the dom tree and refreshes it. After selecting in the page the desired element with inspector (it shows in the left panel the instance and position in the dom) i have acess to the instance properties (and the only one needed is the "html-text" in the right panel).
My problem with this last approach was that it could not communicate with the local file system (if i make "trace(this.text);" in the console it shows the text value but it just shows in the console). The only way to communicate to the file in the hard drive, that i could think of was to throw some error to the log file but could't do that also.
Does anyone have any idea to work with flashfirebug or have some other approach to do this.
Regards,

if you want to work on local filesystems use adobe air.
if you can't, try to work around the browsers sandbox with javascript as bridge to some browser-plugin/-addon which gives you access to local processes and filesystems. to use javascript from flash the ExternalInterface class is your friend.

How do you use the Facebook Graph API in a Google Chrome Extension?

I have been trying to access the information available when using the https://graph.facebok.com/id concept through JSON but have been unable to call or return any information based on different snippets of code I've found around. I'm not sure if I'm using the JSON function correctly or not.
For example,
var testlink = "https://graph.facebook.com/"+id+"/&callback=?";
$.getJSON(testlink,function(json){
var test;
$.each(json.data,function(i,fb){
test="<ul>"+json.name+"</ul>";
});
});
In this code, I am trying to return in the test variable the name. When I use this in a Google Chrome Extension, it just returns a blank page.
Alternatively, I've been also trying to use the Facebook Javascript SDK in my Google Chrome extension, but I am unsure what website I should be using when signing up for an API Key.

I believe that you need to establish either an OAuth session or provide your API key before you can talk to FB. It's been a while since I messed around with FB api but, I'm pretty sure you have to register before you can use the api.
Here's something that might be useful though, it's a javascript console for Facebook which would allow you to test out your code! http://developers.facebook.com/tools/console/

It's an issue with chrome, but I haven't figured out the exact problem. For example open the chrome inspector and type this into it:
$.getJSON("http://graph.facebook.com/prettyklicks/feed?limit=15&callback=?", function(json){console.log(json);});
Then do the same thing in Firefox. Chrome will return nothing, but FF will give you the JSON object. It's not the JSON call itself because if you call something else for instance:
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(data) {console.log(data);});
It will come through normally. So there is some miscommunication between chrome and fb. The really confusing part is that if you browse directly to the graph entry by just pasting it into your address bar it will come through normally that way too.