felixfoertsch/webextensions-examples
1
0
Fork 0
mirror of https://github.com/mdn/webextensions-examples.git synced 2026-04-16 06:18:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

Demonstrate changing keyboard shortcut values (#347)

Browse Source 
* Demonstrate changing keyboard shortcut values

* Add applications key

* Update README
This commit is contained in:
wbamberg
2018-03-22 14:21:50 -07:00
committed by GitHub
parent 3267c485c2
commit 3a89962a2f
5 changed files with 76 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
commands/README.md
View File

@@ -4,3 +4,5 @@ This extension shows how to use the `commands` manifest key to register keyboard
It registers a shortcut (Ctrl+Shift+U) to send a command to the extension (Command+Shift+U on a Mac).
When the user enters the shortcut, the extension opens a new browser tab and loads https://developer.mozilla.org into it.
It also adds an [options page](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Options_pages) to the extension, which enables the user to change the registered shortcut for the extension. Just open the options page, then type a new value into the textbox (for example: "Ctrl+Shift+O") and press "Update keyboard shortcut". To reset the shortcut to its original value, press "Reset keyboard shortcut".

2
commands/background.js
View File

@@ -10,7 +10,7 @@
* shortcut: "Ctrl+Shift+U"
* }]
*/
var gettingAllCommands = browser.commands.getAll();
let gettingAllCommands = browser.commands.getAll();
gettingAllCommands.then((commands) => {
for (let command of commands) {
// Note that this logs to the Add-on Debugger's console: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Debugging

13
commands/manifest.json
View File

@@ -4,6 +4,14 @@
"homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/commands",
"manifest_version": 2,
"version": "1.0",
"applications": {
"gecko": {
"id": "commands-demo@mozilla.org",
"strict_min_version": "60.0b5"
}
},
"background": {
"scripts": ["background.js"]
},
@@ -13,5 +21,10 @@
"suggested_key": { "default": "Ctrl+Shift+U" },
"description": "Send a 'toggle-feature' event to the extension"
}
},
"options_ui": {
"page": "options.html",
"browser_style": true
}
}

18
commands/options.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
<label>Keyboard shortcut</label>
<input type="text" id="shortcut" >
<button id="update">Update keyboard shortcut</button>
<button id="reset">Reset keyboard shortcut</button>
</form>
<script src="options.js"></script>
</body>
</html>

42
commands/options.js Normal file
View File

@@ -0,0 +1,42 @@
const commandName = 'toggle-feature';
/**
* Update the UI: set the value of the shortcut textbox.
*/
async function updateUI() {
let commands = await browser.commands.getAll();
for (command of commands) {
if (command.name === commandName) {
document.querySelector('#shortcut').value = command.shortcut;
}
}
}
/**
* Update the shortcut based on the value in the textbox.
*/
async function updateShortcut() {
await browser.commands.update({
name: commandName,
shortcut: document.querySelector('#shortcut').value
});
}
/**
* Reset the shortcut and update the textbox.
*/
async function resetShortcut() {
await browser.commands.reset(commandName);
updateUI();
}
/**
* Update the UI when the page loads.
*/
document.addEventListener('DOMContentLoaded', updateUI);
/**
* Handle update and reset button clicks
*/
document.querySelector('#update').addEventListener('click', updateShortcut)
document.querySelector('#reset').addEventListener('click', resetShortcut)