ClearFocus Extension Chrome

Removes Chrome's horrible black focus outline on focused elements.

Latest Version

Version

1.0

Update

February 26, 2021

Size

39.94KiB

Developer

ClearFocus Extension

Removes Chrome's horrible black focus outline on focused elements.

By default, Chrome adds a black border around focused elements. This is important for accessibility and UX clarity. Most websites, however, employ their own element focus styles with their CSS that matches the rest of the UI styling. The new Chrome outline style sidesteps this visual harmony and introduces an unsightly border on focused elements that for some is undesireable.

Previously this could be done using Chrome's user stylesheets feature in which you could override the user agent stylesheets with a custom CSS file placed in your user profile, but Chrome has since removed this feature.

This extension simply overrides the base Chrome behaviour through the \":focus\" selector, by introducing a new style definition using a slightly more specific \":root :focus\" selector that overrides the base chrome functionality, but will still permit website-specific stylesheets to use custom outlines with more specific selectors such as \"input:focus\". In the rare case a website simply uses the \":focus\" selector this will conflict, but it's extremely uncommon for websites to use outlines at all, let alone for this purpose.

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "name": "ClearFocus", "description": "Removes Chrome's horrible black focus outline on focused elements.", "version": "1.0", "icons": { "32": "32.png", "128": "128.png" }, "permissions": [], "content_scripts": [ { "matches": [""], "all_frames": true, "css": ["clearfocus.css"] } ] , "manifest_version": 2}