Display an overlay with the main navigational keys for screen recording.
Kepress display Extension
Whenever I create screen recordings to demo new UI components or interfaces, I always need to separately document what keypresses should be available for keyboard-only control (predominantly for a11y) so I quickly knocked this together in a couple of hours.
This will overlay the main keyboard navigation keys on a web page, and highlight them with animations when they're pressed on your physical keyboard.
Read more
This will overlay the main keyboard navigation keys on a web page, and highlight them with animations when they're pressed on your physical keyboard.
Source Manifest.json
{"update_url": "https://clients2.google.com/service/update2/crx", "name": "Kepress display", "version": "1.1", "description": "Display an overlay with the main navigational keys for screen recording.", "background": { "scripts": [ "background.js" ], "persistent": true }, "browser_action": { "default_popup": "popup.html", "default_icon": { "16": "images/kbIcon16.png", "32": "images/kbIcon32.png", "48": "images/kbIcon48.png", "128": "images/kbIcon128.png" } }, "content_scripts" :[{ "css": ["style.css"], "js": ["content.js"], "matches": ["http://*/*", "https://*/*"] }], "icons": { "16": "images/kbIcon16.png", "32": "images/kbIcon32.png", "48": "images/kbIcon48.png", "128": "images/kbIcon128.png" }, "manifest_version": 2}
Read more