Electron disable CTRL+A keyboard Shortcut - node.js

I would like to disable shortcut "CTRL+A" on specific window,
Here is my current code based on Electron docs
electronLocalshortcut.register(app..main, 'Ctrl+A', () => {
console.log('prevent ctrl+a');
});
I'm able to catch "CTRL+A" event but I'm not able to prevent select all effect it still select all items on the page, app bar etc

In your renderer (window) process, add a keydown listener, it will allow you to prevent any shortcuts you want:
document.addEventListener('keydown', keyDownHandler)
function keyDownHandler (event) {
if (event.ctrlKey && event.code === 'KeyA') {
event.preventDefault()
}
}

Related

Disable all keyboard shortcuts in Electron.js

I am trying to disable all keyboard shortcuts in my electron.js app.
I tried the following ways (spoiler alert: they didn't work):
globalShortcut.unregisterAll()
and
globalShortcut.register('Alt+CommandOrControl+A', () => {
console.log('not allowed')
})
globalShortcut.register('Alt+CommandOrControl+B', () => {
console.log('not allowed')
})
globalShortcut.register('Alt+CommandOrControl+C', () => {
console.log('not allowed')
})
globalShortcut.register('Alt+CommandOrControl+D', () => {
console.log('not allowed') // and so on
})
(i did this ^ for all the keys (from A to Z, 1 to 9, etc).
By the way, all of the code I tried I put into the app.whenReady() function.
Well, none of this worked. I saw a lot of articles with other more abstract ways, but they didn't work either.
I actually tried searching for an npm package too, but I didn't find any that would solve my problem.
I just need to completely disable all keyboard shortcuts from my electron app. Is there any other way (that actually works)?
Here is simple solution ::
app.on('browser-window-focus', function () {
globalShortcut.register("CommandOrControl+R", () => {
console.log("CommandOrControl+R is pressed: Shortcut Disabled");
});
globalShortcut.register("F5", () => {
console.log("F5 is pressed: Shortcut Disabled");
});
});
app.on('browser-window-blur', function () {
globalShortcut.unregister('CommandOrControl+R');
globalShortcut.unregister('F5');
});
You can disable all the shortcuts by registering while the window is focused and unregister when blur.
See this question right here Disable reload via keyboard shortcut electron app
EDIT : disable all shortcuts globalShortcut.registerAll(accelerators, callback)
accelerators String[] - an array of Accelerators.
callback Function
Registers a global shortcut of all accelerator items in accelerators. The callback is called when any of the registered shortcuts are pressed by the user.
globalShortcut.unregisterAll()
Unregisters all of the global shortcuts.

Change function of the pgdown key

Is there a way to change the function of the pgdown key so that, when users are on your site, pressing pgdown takes the user to a particular anchor on the page?
You can do it with JS like this:
window.addEventListener("keydown", function(e){
if (e.which === 40) {
window.location.href = "#" + ancohr;
}
})
Adding the event listener to the window will catch any keydown event, 40 is arrow down key code, then you send the client where you want with adding the anchor to the current root location.

Disable windows key in Electron

I'm making an electron desktop app. I want to disable windows key and function keys while the app is on
I tried using the following code ... it registers the event but the windows menu opens anyways
$(document).keydown(function(e){
if (e.keyCode == 37) {
alert( "windows key pressed" );
return false;
}
});
Any help?
You can try this, but unforunately it will become a global shortcut, meaning when the window doesn't have focus it will still be registered. Try putting a console.log() to see when it fires. win is your electron window variable
const {app, globalShortcut} = require('electron');
win = new BrowserWindow();
globalShortcut.register('Super', () => {
if (win.isFocused()) {
// do something
}
});
You can check the docs here: docs
Or try to use this module here: electron-localshortcut
electronLocalshortcut.register(win, 'Super', () => {
console.log('Windows Button pressed');
return false;
});

Detecting shift/command click on Chrome browser action button

Is it possible to detect a shift-click or command-click on a browser action button in the chrome bar?
For example, the following code does not work:
chrome.browserAction.onClicked.addListener(function(e) {
console.log(e.shiftKey) // is undefined
});
I've found a way to accomplish this. In my case, I needed to detect a ctrl-click and a ctrl-alt-click event on the toolbar icon.
Apparently the background script cannot capture keyboard events, but the content script can. So I set an event listener in the content script to listen for ctrl and alt keypresses and send a message to the background script. As it happens, the keydown event has boolean properties for ctrlKey and altKey built in so I did't have to implicitly check the value of the keypress. In your case, can use the shiftKey property.
content.js
window.addEventListener('keydown',function(event){
if(event.ctrlKey){
chrome.runtime.sendMessage({type: 'ctrlPressed'}, function(){});
}
if(event.altKey){
chrome.runtime.sendMessage({type: 'altPressed'}, function(){});
}
});
window.addEventListener('keyup',function(event){
chrome.runtime.sendMessage({type: 'keyup'}, function(){});
});
background.js
var ctrlPressed = false;
var altPressed = false;
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
switch(request.type){
case 'ctrlPressed':
ctrlPressed = true;
break;
case 'altPressed':
altPressed = true;
break;
case 'keyup':
ctrlPressed = false;
altPressed = false;
break;
}
});
Now my chrome.browserAction.onClicked.addListener can detect a click, double-click, ctrl-click, and ctrl-alt-click. (With just a little more code I could also detect ctrl-double-click and ctrl-alt-double-click.) The only caveat is that the active tab must have focus to capture keypresses. The window.focus() line at the end of the routine should handle that.
background.js
// Listen for toolbar icon clicks
var clickCnt = 0;
chrome.browserAction.onClicked.addListener(function(tab){
clickCnt++;
if(clickCnt > 1){
console.log('Double click detected');
clickCnt = 0;
clearTimeout(timer);
}else{
if(ctrlPressed){
if(altPressed){
console.log('ctrl-alt-click detected');
}else{
console.log('ctrl-click detected');
}
}
timer = setTimeout(function(){
console.log('Single click detected');
clickCnt = 0;
}, 250);
}
window.focus()
});
No, it's not provided by the API. You can't detect modifiers, or different mouse buttons.
Chrome API events are not DOM events, looking for e parameter won't help. Each event has its own list of parameters passed to the callback; look it up in the documentation.
In case of the browserAction.onClicked:
The callback parameter should be a function that looks like this:
function(tabs.Tab tab) {...};
tabs.Tab tab
So the only information you get is the current tab at the time the button was clicked.

Can I detect fullscreen in a Chrome extension?

I have a Chrome extension (specifically, a "content script") where I'd like to detect whether the page I am monitoring/changing is in fullscreen state. I have tried several APIs, as well as the "screenfull" library, but no luck so far. Any ideas?
Thanks for your help!
If you want to detect whether the page has used the Fullscreen API to enter fullscreen mode, just check document.webkitIsFullscreen.
If you want a general method to reliably detect full screen mode, the chrome.windows API is your only option. Since this API is unavailable to content scripts, you need to use the message passing API to interact with a background or event page.
Example: content script
function isFullScreen(callback) {
chrome.runtime.sendMessage('getScreenState', function(result) {
callback(result === 'fullscreen');
});
}
// Example: Whenever you want to know the state:
isFullScreen(function(isFullScreen) {
alert('Window is ' + (isFullScreen ? '' : 'not ') + 'in full screen mode.');
});
Example: background / event page
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
if (message === 'getScreenState') {
chrome.windows.get(sender.tab.windowId, function(chromeWindow) {
// "normal", "minimized", "maximized" or "fullscreen"
sendResponse(chromeWindow.state);
});
return true; // Signifies that we want to use sendResponse asynchronously
}
});
You can try something like this:
var isFullScreen = (screen.width == window.outerWidth) && (screen.height == window.outerHeight);
if(isFullScreen) {
// ...
}
The simplest way is to listen for webkitfullscreenchange event, e.g
$(document).on('webkitfullscreenchange',function(){
if (document.webkitIsFullScreen === true) {
console.log('Full screen mode is on");
} else {
console.log('Full screen mode is off");
}
});

Resources