/web-rotor

Browser extension to aid in on-page keyboard navigation and to reveal DOM structure atop the painted canvas.

Primary LanguageTypeScriptMIT LicenseMIT

webpage rotor browser extension

Install for Chrome

  1. Download web-rotor.zip from this repo.
  2. Unzip.
  3. Navigate to chrome://extensions.
  4. Enable "Developer Mode" in the upper right-hand corner.
  5. Activate "Load unpacked".
  6. Upload the unzipped directory.
  7. (optional) Change the default (Option + 1) keyboard shortcut
    • Go to chrome://extensions/shortcuts
    • Under Web Rotor options, activate the edit control
    • Key your desired shortcut
    • Confirm in a different tab; browser restart may be necessary

Usage

  1. Navigate to a website of your choosing
  2. Option + 1 to open popup view of headings
  3. Keyboard navigate to your heading of choice and hit enter to focus.

Usage demo of the chrome extension, in which I open the popup on a Wikipedia article, down arrow to a heading, hit enter, the popup closes, and the page scrolls to the heading I selected.

About

The semantic layer of the web is often obscured by the painted canvas.

This browser extension assists in understanding the contents of a page and improves keyboard-only navigation to areas of interest.

For now, this browser extension is exclusively supported for Chrome and Microsoft Edge. Note that the Edge installation method may vary slightly from the Chrome install steps.

Development

  1. Clone or download this repo.
  2. Install node_modules and run dev script to generate the extension. 
    npm install
npm run dev:chrome
  3. Navigate to chrome://extensions.
  4. Enable "Developer Mode" in the upper right-hand corner.
  5. Activate "Load unpacked".
  6. Choose the ./extension/chrome subdirectory.

Build

See the npm scripts for your build options here.

npm run

Find the zipped folder (likely in the ./extension directory), move to root, and rename to web-rotor.zip.

A note on the development workflow:

This browser extension starter uses webpack and leverages a hot reloading server. However, you may still need to reload the extension in chrome://extensions depending on where you are making changes.

Feedback

Please open an issue!

Inspiration

Inspiration for this tool derives primarily from NVDA.

The Chrome browser extension that lets me regain some of that functionality when I'm not using a screenreader is SkipTo.

Credits

Extension icon created by Freepik - Flaticon.

The browser extension template was made by @abhijithvijayan.