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.
Related
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()
}
}
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.
How to identify a tab is reloading, I mean actual page reload?
I see chrome.tabs.onUpdated event, but for this event status is 'loading' even in case of AJAX calls from a webpage.
How can I detect a page is getting reloaded ?
You are right, looks like not possible to recognize AJAX and page reload calls. As workaround you could listen for onunload event for tab webpage. You probably need to check if tabid and url were not changed after that.
But do you really need to know if page reloaded?
It's an old question, but here is my solution that could be in help (without AIAX).
Since the method 'chrome.tabs.get()' return a promise, you can use the 'callback function' to check the current 'tab.status'.
Setting a boolean variable 'waitingForComplete = true', you will run your code, only when the tab will return at status = 'complete'.
background.js
var waitingForComplete = false;
chrome.tabs.onUpdated.addListener((tabId. changeInfo,tab) => {
if(changeInfo.status == 'complete'){
if(waitingForComplete){
waitingForComplete = false;
// runYourCode...
}
}
};
function checkTabStatusComplete(tabId){
chrome.tabs.get(tabId. function(tab){
if(tab.status == 'complete'){
// runYourCode...
} else {
waitingForComplete = true;
}
}
};
I have a popup, call 'welcome.html', the thing I would like to do is when the user select a text, and click my plugin, it will use some of the page information, and print back to the welcome.html. For example, the web site title, and the text which the user selected and the url. But how can I pass value to that welcome.html? Thank you.
I do a lot of this in my extension as it mines a lot of data enabling the user to easily copy it to their clipboard.
Since you're looking for a lot less data it's even simpler. When your popup is being loaded you can call the following function to retrieve the information you require;
function getData(callback) {
chrome.tabs.getSelected(null, function (tab) {
var data = {
selection: '',
title: tab.title,
url: tab.url
};
/*
* We can't call content scripts on some pages and the process will get
* stuck if we try.
*/
if (tab.url.indexOf('chrome') === 0 ||
tab.url.indexOf('https://chrome.google.com/webstore') === 0) {
callback(data);
} else {
chrome.tabs.sendRequest(tab.id, {}, function (response) {
data.selection = response.selection;
callback(data);
});
}
});
}
Ensure you pass in a callback function which will be called once all the data has been extracted;
getData(function (data) {
console.log('Title: ' + data.title);
console.log('URL: ' + data.url);
console.log('Selected Text: ' + data.selection);
// Display the data instead
});
As you may have noticed the getData function sends a request to the selected tab. A content script will need to be injected in to the page in order for this to work so be sure you've configured your manifest correctly or injected it programmatically prior to calling getData or it won't work. The script that will need to be injected should resemble the following;
(function () {
chrome.extension.onRequest.addListener(function (request, sender,
sendResponse) {
sendResponse({
selection: window.getSelection().toString()
});
});
})();
This simply returns the currently selected text. One concern is that this data look-up could potentially cause a slight pause while the popup is rendered but you should test this yourself and experiment with it but there are solutions.
This should cover all you need to know so good luck and let me know if you need any further help as I'm aware this could be slightly overwhelming if you're new to Chrome extensions.
I'm not good at JS and I'm having some -I hope- stupid problem I'm not seeing on my code... if you guys could help me out, I'd really appreciate it.
My extension does some stuff with the current tab's URL. It worked ok using the onUpdate event on my background page, setting the tab's URL on a variable and then I used it on a pop-up.
The thing is that if the user starts, selecting different tabs, without updating the URLs my event won't be triggered again... so I'm now also listening to the onSelectionChanged event.
The thing is that there's no "tab" object within the onSelectionChanged event's parameters, so I cannot ask for the tab.url property.
I tried to use the chrome.tabs.getCurrent() method, but obviously I'm doing something wrong... and I reached the limit of my -very little- knowledge.
Here's the code, if you guys could take a look and point me in the right direction, I'll really appreciate it.
<script>
var tabURL = '';
var defaultURLRecognition = [ "test" ];
// Called when the url of a tab changes.
function checkForValidUrl(tabId, changeInfo, tab) {
//THIS IS WHAT'S NOT WORKING, I SUPPOSE
if (tab==undefined) {
chrome.tabs.getCurrent(function(tabAux) {
test = tabAux;
});
}
//
// If there's no URLRecognition value, I set the default one
if (localStorage["URLRecognition"]==undefined) {
localStorage["URLRecognition"] = defaultURLRecognition;
};
// Look for URLRecognition value within the tab's URL
if (tab.url.indexOf(localStorage["URLRecognition"]) > -1) {
// ... show the page action.
chrome.pageAction.show(tabId);
tabURL = tab.url;
}
};
// Listen for any changes to the URL of any tab.
chrome.tabs.onUpdated.addListener(checkForValidUrl);
// Listen for tab selection changes
chrome.tabs.onSelectionChanged.addListener(checkForValidUrl);
</script>
I would do something like this:
function checkForValidUrl(tab) {
//...
}
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
if(changeInfo.status == "loading") {
checkForValidUrl(tab);
}
});
chrome.tabs.onSelectionChanged.addListener(function(tabId, selectInfo){
chrome.tabs.getSelected(null, function(tab){
checkForValidUrl(tab);
});
});