Focus Indicator Extension Chrome

Adds a high-contrast outline around the element with keyboard focus.

Latest Version

Version

1.0.0

Update

December 3, 2024

Size

13.59KiB

Developer

Focus Indicator Extension

I predominantly use my keyboard to navigate websites, but many sites don't always make it clear where the keyboard is focused. This extension aims to help solve that issue by putting a white or black border around the focused element, depending on whichever results in a higher contrast.

Focus Indicator uses multiple strategies to aim for it to work effectively across all websites, but it can't account for every improper accessibility setup. For example, if a site has a focusable element out of the screen's bounds, it won't show any difference.

It prioritizes function over form. If you'd like, you can disable the extension on certain sites (blacklist them) or you can enable the extension only on certain sites (whitelist them) by clicking on the extension and changing the options there.

At the time of initially uploading this, it works on the latest version of Chrome, Edge, Opera, and Firefox.

For feature requests or bug reports, feel free to send me an email: [email protected]

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "name": "Focus Indicator", "version": "1.0.0", "description": "Adds a high-contrast outline around the element with keyboard focus.", "permissions": [ "storage", "tabs" ], "content_scripts": [ { "matches": [ "" ], "css": [ "styles.css" ], "js": [ "script.js" ], "all_frames": true } ], "action": { "default_popup": "popup.html" }, "icons": { "16": "icons/icon16.png", "32": "icons/icon32.png", "48": "icons/icon48.png", "128": "icons/icon128.png" }, "manifest_version": 3, "browser_specific_settings": { "gecko": { "id": "[email protected]" } }}