mirror of
https://github.com/mdn/webextensions-examples.git
synced 2026-04-17 06:48:37 +02:00
Demonstrate changing keyboard shortcut values
This commit is contained in:
@@ -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,5 +13,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
18
commands/options.html
Normal 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
42
commands/options.js
Normal 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)
|
||||
Reference in New Issue
Block a user