Using GreaseMonkey to change Javascript variable - javascript

I've got a question regarding a website that I use quite frequently. The website is essentially a browser-based air traffic control simulator. The page uses a php script to load the JavaScript directly into the browser when the game is initiated.
So, here is my question. In the JavaScript code, there is a function that is called when a new aircraft is generated on the screen.
function fnNewOne() { /* New aircraft generation code }
In the code, there is a command that sets the altitude of the plane to a certain height and then stores this value in a global variable. I wanted to know if it would be possible to alter this variable externally using a GreaseMonkey script in order to generate a different altitude. For example, I want flights to only enter the screen at a minimum altitude of 13,000 ft. How could I use GreaseMonkey to target the altitude variable? And when would be most appropriate to change the altitude that has initially been set by the game? What kind of event listener could I use?
If anyone could assist me in this, I would be very grateful.

The answer is that you just write your code in a GreaseMonkey script... There's nothing special about it.
It will be executed after the page loads, but there is a chance that your code will execute before the game initializes, so maybe you should set an interval to 100ms and watch for window.hasOwnProperty('altitude') to make sure the game is initialized (or whatever variable you want to fiddle with) and when that property is found, call whatever code you need and then clear your interval.
This is the best answer I have for you, given how poor your question is. Maybe if you gave us a few more details we'd be able to provide you with some better answers. What exactly are you trying to do? (what variable do you want to change, how and when?) What did you try? Do you have a JS question or a GM question? Have you checked out the GM documentation for examples? (there are very few, very succinct examples from which you can learn 95% of GM in a couple of hours)

Related

Google Places Autocomplete not working only sometimes [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
Places autocomplete (javascript) has been weird in a lot of ways. I'm to the point that it works seemingly all the time on certain browsers, but intermittently on others. And to get here I've had to do some things counter to other advice, (though the 'correct' way works even less) so I have a lot to list.
The specific issue (on any browser) is that the callback initAutocomplete() does fully occur, but sometimes the input field just doesn't get the suggestions appearing. There are, however, no errors logged. I've found 2 things of note when it fails: pac-container is not created, and no requests are sent for AutocompletionService.GetPredictions.
The errors does not seem to ever occur on FireFox or on Edge. It happens most of the time on Chrome. It never works on iOS Chrome but does rarely on Safari... Not a useful pattern, so far.
There is more than one call to Maps APIs on the page, causing the "You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors." error. However, there does not seem to be an actual problem from this as the calls are to different libraries (geometry and places). And the callback function of the place script absolutely always functions, at least.
Aside from that, no errors of any kind report. It is notable that I'm currently attaching a sessiontoken that is actually session based (for the user, so for multiple requests.) This is directly contrary to information such as stackoverflow.com/a/50452233/5140781 (I've searched a lot before posting) that says a sessiontoken is not needed and will be handled automatically. It is contrary because not including it makes the service break far more often. Without it it breaks a good amount of the time on Firefox and Edge which are currently fine and Chrome will only work once per user session, after one refresh or on any subsequent form it is definitely not going to work any more.
I've also tried attaching a random session token on every page load, that didn't help either. Though since in all cases the error is fairly random it could be that the error has nothing to do with the session token and everything I've seen is just human pattern seeking and [bad] luck. Maybe it is just a race condition of the different API calls for all I know. I get it to work on Chrome more if I do a 'empty cache and hard reload' than just F5; add that to it typically working the first time in a session and maybe you have that loading the scripts from cache is more likely to cause an issue than when they load for real? I'm out of ideas, or at least ones I think are reasonable.
The code for the initAutocomplete is almost exactly as given in the example, save adding the sessiontoken (and again, without that it fails more).
Any help would be appreciated.
It was, in fact, the double inclusion of a google API. This is despite the fact one include library was geometry and this was places, and that the callback on the Place script was happening even in fail states..
Simply removing the geometry include on the relevant pages fixed the Autocomplete functionality 100% (and we could drop the sessiontoken), but geometry was needed for other functions on the page. That was solved by adding it to the include made for the place library. Simply use commas to target multiple libraries; I didn't see that mentioned in the documentation, but is was an easy guess:
<script src="https://maps.googleapis.com/maps/api/js?key=********&libraries=places,geometry&callback=initAutocomplete" async defer></script>
Now, if you need geometry (or whatever other library) higher and sooner than your place include, that is a new problem I did not have. But for anyone finding this, my most simple recommendation would be moving the whole autocomplete chunk up there and combining the include in the same way. There are then 2 possible issues: The other script already having a callback, and the form potentially not existing yet.
The callbacks can be combined trivially if only the first point is your issue; just do the other callback code then the autocomplete. For just the second, there are two options: First, if you can have your form appearing trigger an event, then have the callback set a listener for it to then to its usual (watch for the form possibly loading first though!). Second, a setInterval that checks for the element existing and does the work when it is found (and stops checking)--that is dirty, but will work with just vanilla js; there is probably a better option if whatever framework you have. If you have both problems, just have the listener/interval at the start of the callback.

Generate a diagram or schema that shows the relationships between all the files in a website

The last 9 months, I've been working on two big websites with PHP and Javascript without using any framework.
Every time I wanted to modify a page or fix a bug, I was spending:
10% of the time on finding the PHP file with the html content
20% of the time on locating the CSS and JavaScript files it is using
20% of the time on locating the PHP classes it's using and the functions and variables it's inheriting
20% of the time on locating all the scripts that are being called through ajax calls.
And only 30% percent of the time to actually fix the problem.
So, I wanted something that for every file that I want to modify within a project, after indexing all the aforementioned, it shows a list with all of these relationships on a diagram/flowchart along with the corresponding links to these files.
After a lot of Googling I couldn't find anything that directly solves this problem effectively. Right now, except for just opening all the includes inside the PHP file one by one, I am using Google Chrome's Inspector to quickly locate the includes from the Network tab or even add my whole Workspace in the Sources tab in order to apply CSS and JavaScript modifications directly from there. The problem with this, is that I don't have any options for locating any server-side code(PHP). Also I don't want to be dependent on any specific Web-Browser. Lastly, this solution doesn't provide me any graphical representation of the website's schema, something that's really important for understanding in seconds the whole structure of a webpage that you are going to modify for the first time.
I know that this question sounds a little off-topic but I couldn't find anything on the Web (maybe I didn't use the correct search keywords?) and I feel like it's something that a lot of developers struggle with sometimes so it could be really helpful if it's answered and stay visible. Even if I am missing the point due to luck of experience and there is a different approach to this kind of problems, I don't think I am the first one and It could be also good to be clarified for all the others out there.
I can't help you with the diagram part of your question but I understand that your problem is indexing.
You could use sublime which more or less work with all the operating systems and at the same time it's quite light. With it you will have indexing as you can see here.

Can i deactivate a certain part of javascript from the browser? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 4 years ago.
Improve this question
A friend of mine programmed a website, using a tool from "1und1". The problem is, that, while you use this tool to easy create a website, you do not have any direct access to the code.
Now he did something stupid. He created a function, that relocates you, based on the language of you browser. This function however always relocates the user, no matter what language your browser has and this website never stops loading. Ones it is finished, it loads again.
My first intention was, to use the noscript-addon for Chrome, however the tool to edit this part also uses Javascript... So if i use noscript, this infinite reloading-problem is fixed temporary, but i cannot fix the problem once and for all!
Is there any way of only deactivating a certain script-part of the head-tag and not all of them?
Thank you all.
edit:
This is the Script in question:
//<![CDATA[
// The language of the browser as an orientation for the language of
// the user
var userLang = navigator.language || navigator.userLanguage;
// The current adress of the user
var adress = document.location.href;
if(adress == thisSite && userLang.match("de")) {
// german
window.location.href = '/deutsch/start/';
} else {
// fallback (english)
window.location.href = '/english/home/';
}
//]]>
Now, after trying a whole night, for everyone, who has a similar problem, this is how i fixed this.
You HAVE to call 1und1 or use there live-chat for this. They take some time to fix it, because the person, you are speaking to, also has no access to the code. They then give it to the development team, wich is fixing it.
However, if you want to prevent any problem like that, i can just recommend you, to not use this tool! This tool gives you all things you don't want and even in the expert section they want to "improve" your code, by correcting it, wich led to my "infinit-recursion-problem".
If you are wondering, he entered the following:
else if(adress == thisSite) {
// fallback (english)
window.location.href = '/english/home/';
}
but it deleted the if-clause, because it said, it was unnecessary and he didn't even recognized it, until it was too late.
Therefor i recommend you: "Do not use this kind of tools, if you have any other way to do this (like Wordpress or Joomla or even a friend, who can barely code)".
Open chromes developer tool. CTRL + SHIFT + I
go to the Elements tab
Find the peice of code you want to remove, right click it, select "Edit as html", remove/edit what you want to remove/edit, click somewhere else and it should affect the page accordingly.
You could go to the F12 menu and look under the elements tab. This houses all the current html/scripts/styling etc of the web page. Look for the script in question and just delete it, however, this is only a temporary local fix while on the page.
Hope that helps!

JQuery/Javascript process question

I've inherited someone else's project and am building a work flow diagram for it. Without getting into too many details the person who left was the only person in the web department with advanced programming skills (most people there do production work and some HTML/CSS stuff). The project I inherited was developed in CodeIgniter and leans heavily on JQuery, AJAX and JSON. The flow is a bit confusing hence my outlining it. (I'm getting to the question, bear with me)
Anyway, the manager of this department, let's refer to him as The Tool, won't allow his people to learn any of this stuff. He asked me the other day how it was coming and I said fine except I can't find where one variable is being set, the original developer is using jquery to call some form value to set a path to files (he using #id.val()) but I can't find #id anywhere in the code. The manager replies, eh, I thought you were the PHP guru. As I said, we shall refer to him as The Tool.
Anyway, to stick it to him somewhat I've decided to share these flow pages with people in his group, make them very descriptive and hopefully educational. I'm explaining how when a change is made from a select menu jquery/javascript recognizes that change and fires off related code in JS.
Then it dawned on me that I really didn't know how JS/JQ knew the change had been made. I know the code ($("#id").change()...I have an AppleScript background and in that language there's an idle command, you basically can have a script sit in the background observing and waiting for X to happen (say the user launches Photoshop) and when that event happens the rest of the code is run. Does JS do something similar?
This code:
$("#id").change()
tells jQuery (the "$") to find the element whose "id" value is (in this case) "id", and then to trigger a "change" event on the element. That will cause event handlers registered to look for such events on that element to be run. That's the basis of just about everything you do with JavaScript in a browser: responses to events.
Somewhere, there's probably one of these:
$("#id").change(function() { ... })
$("#id").live('change', function() { ... })
$("#id").bind('change', function() { ... })
There are many ways for the element to have been identified for setting up the event handlers, however, so it may be tricky to find.
In newer versions of chrome you can inspect a html element, and this will also show 'classic' events that are bound to it.
Increasingly good developers are moving to event delegates such as:
http://developer.yahoo.com/yui/3/event/#delegate
Which will likely not show up in Chrome, but should be readable from the code.

javascript rollover effects question

I am learning JS currently with a js book.
A rollover effects example got me, so I need some help.
I upload a snapshot on Flickr.com. The url is : http://www.flickr.com/photos/58745632#N05/5389380030/
The left side of the snapshot is the page and the right side of the snapshot is the javascript code.
My question is can I change the content in the red box to the codes in the green box.
If I can, why does the author bother to add this line "thisLink.imgToChange = thisImage"?
And what is the relationship between "thisLink.imgToChange" and "thisImage"?
Are they the same one or are they identical ones?
Could someone explain it for me?
Thank you very much.
thisImage is the reference to an image object. It is being passed as a variable to the function.
An image object has properties like the source (.src), .width. height etc.
thisLink is also an object, and it can have properites too. So, thisLink.imgToChange = thisImage sets the "imgToChange" to the image fed into the function. imgToChange is a completely arbitrary property chosen by the programmer. It's being used stash some data used later.
All this code demonstrates the "hard way" of doing a rollover. Having to type (or even use) "document.getElementById" over and over again all of this is a pain. Most of the time we depend on scripts to automate these things.
Frameworks, which are basically optimized versions of the type of code you're working on here, were developed to take care of the dirty work. The most popular framework, by far, is jQuery.
Doing pretty well the same thing using jQuery can be done in one line of code.
Here's another posting as an example.
Short answer:
.imgToChange and thisImg refer to the same place. .imgToChange is added as a property so it's easy to use later, like in the onmouseout function.
UPDATE
Regarding your comment: It won't work either way (probably).
Since setupRollover() is called multiple times, the variable thisImage will point to a different image node every time it's called. The code in the green box will only be applied to the most recent thisImage.
The red box uses this because that means "the object that fired the event". The red box sets up each object to refer to the appropriate image. Then, when this is moused over, the correct image is changed.
Try it out yourself, it's easier to see than to explain.
Given that this is straight out of JavaScript & Ajax for the Web: Visual QuickStart Guide, 7th edition1, what in particular are you having trouble with in the (line-by-line) explanation on pages 96-97?
1 Co-written by me, btw.

Categories