Chrome/FF API for operating with tab's Javascript - javascript

I need to control site's javascript via global hotkeys.
I'm trying to control javascript's audio player via Windows Global hotkeys.
But can't understand how to do it.
Language: C#/C++ (Qt). No matter.
Browser: Chrome (maybe other, no matter)

You can use jquery keypress http://api.jquery.com/keypress/
According to the documentation this event will only fire when the element it set upon is focussed.
$(someElement).keypress(function(e) {
console.log(e.which, e.keyCode);
// according to one of the comments e.which should be used in every browser other than IE.
})

Related

Trigger System-wide Keyboard Events from a Javascript Chrome App

Is there a way to trigger a system-wide keyboard event (i.e. emulate an actual key being physically pressed) from a Javascript Chrome App?
Currently I've got
target.dispatchEvent(new KeyboardEvent(..));
but this can only be invoked on a target element within the browser.
Ultimately, I want to be able to have a callback
function typeLetter(character){ }
that will type a letter character whether Chrome is the active window or not.
Any suggestions greatly welcomed!
I'm pretty sure this won't be possible between different applications. Even between browser tabs would be an issue I think. If it were possible there would be plenty of security issues that come with it.
Emulating key presses anywhere except the currently-running application (chrome) would open up a can of worms in regards to cross-site scripting attacks and key-logging hacks.

Is possible automatic fullscreen with html5?

I'm based on Using the Fullscreen API in web browsers (http://hacks.mozilla.org/2012/01/using-the-fullscreen-api-in-web-browsers ) for fullscreen , but only works with a click event or with console firebug, not with submit event or mouseover or similar for made automatic. Is possible automatic fullscreen with html5 without click event or similar ?
Edit: I understand the security and accessibility reasons if not possible, but in some environments this can be hopeful.
No, it's not possible - for security reasons accessing full screen requires the user's "permission", and so is tied to browser input events.
No, that is not possible. The requestFullScreen() must be triggered by a direct user action (like a click) for security considerations. It's just the same as with popups.
Read https://wiki.mozilla.org/Security/Reviews/Firefox10/CodeEditor/FullScreenAPI and maybe https://wiki.mozilla.org/Gecko:FullScreenAPI for reference.

Using Firefox, how can I monitor all events that are fired?

I'm trying to debug a web page that makes heavy use of events, and so I need to monitor all events that are fired.
Most of the events are bound using jQuery. Hence, it would be particularly useful if there was a way to specifically monitor only those events.
Of course you can do just fine with Firebug, the console and the scripts tab where you can add breakpoints and watches, but you want to do it smarter / easier obviously.
There is a neat Firebug plugin called EventBug that just logs all the events and groups them by event type so you can expand and see what triggered them.
EventBug doesn't do it realtime, you have to refresh though.
One other way is to use the 'Log Events' feature against any DOM element in Firebug. This does do it realtime and you can see what order events are fired / triggered as well.
Try this:
Toggle open Firebug
Right click the element in HTML tab, if you want to see all events then right click <body>
Choose Log Events from the context menu
Make sure the Console tab is enabled
Click to enable the 'Persist' mode in the Console tab (otherwise Console tab will clear after the page is reloaded)
You may have to select Closed (manually)
Voila! watch events stream in the console tab
This is what you see with Log Events:
Also worth trying the FireQuery add-on for Firebug to see what elements in the DOM have jQuery events attached to them and what they are.
And as benvie's answer mentions, this is possible in webkit's developer tools as well.
This has been introduced some versions ago but as of Firefox 35 events associated with an element can be seen on the Inspector: next to the element which you want to see the events (in case there is any) there will be an icon with the 'EV' letters. Click it and you will see a small popup window with the events for that element.
More info: http://flailingmonkey.com/view-dom-events-in-firefox-developer-tools/
This doesnt exist in Firebug I believe, and the underlying problem is lack of support or lack of exposure at the api level. Alternatively, there's only a few ways to subscribe to DOM events: Element.prototype.addEventListener (and window.addEventListener and document.addEventListener and XMLHttpRequest.addEventListener and some others) aside from 'onevent' properties which are observable and interceptable.
But realistically, the WebKit debugger and Chromium's debugger (which is webkit's with extra points) allow one to debug and observe attached listeners. Sometimes it's easier to debug one browsers's bugs in another browser with better exposure of application/runtime state, even when that browser doesn't exhibit the bug.
https://developers.google.com/chrome-developer-tools/docs/elements
Event Listener Breakpoints have been introduced in FF 69 (and further improved in FF 71). Relevant docs are here.
It allows you to automatically break on any event of a given type. This screenshot (from above article) shows how it breaked on a Keyboard event:
The article further explains (1) how instead of breaking every time, it can just log matching events, and (2) how you can blackbox certain sources, to avoid having to wade through the internals of framework code (such as jquery, react etc.).
They present another screenshot of how that looks like:

How do you prevent firefox from zooming in when pressing ctrl and +?

I am trying to use the ctrl and + combination within firefox for a different action for our web application. How could I prevent firefox from zooming when our web application is listening for this event? I do not want to change a setting within firefox, but would like the code to do this somehow. Any suggestions?
I don't think you can overwrite application shortcuts with website code. Imagine a site overwriting alt + tab, and suddenly you wouldn't be able to tab out of your browser window anymore. It is possible with some plugins, but that depends on the browser you're using.
Instead, use something that isn't a default keyboard shortcut to prevent other users from having the same problems. Everyone expects and counts on ctrl and +- to change their zoom level; overwriting this simply isn't a good idea usability-wise.
You could try Flash. Flash tends to gobble up a lot of shortcut keys, including Ctrl+T (new tab) which drives me mad all the time.
According to this resource http://www.arraystudio.com/as-workshop/disable-ctrl-n-and-other-ctrl-key-combinations-in-javascript.html, you should be able to prevent any control keys.
I have used similar techniques, by catching all events on the body tag, and if they are the F keys, then returning a false to veto.

How do I detect a keyboard modifier in a bookmarklet?

Is there a way to detect if the user is holding down the shift key (or other modifier keys) when executing a javascript bookmarklet?
In my tests of Safari 3.1 and Firefox 3, window.event is always undefined.
If you're looking for a way to detect the mouse position while the bookmarklet is being physically clicked, no, there is no way. Since the bookmarklet is positioned outside of any page (this area is generally called the browser "chrome" - which is confusing since there's now a browser with that name) it's not possible to detect JavaScript-related events there.
That being said, if you created this as a Firefox extension then you would have access to event information, JavaScript, and keyboard modifiers. But that doesn't appear to be what you're looking for.
window.event is an IE only. Event objects are passed to an event listener as an argument in firefox and safari. So you can tell in IE, but not in any other popular browser.

Categories