Awesome

Accessibility Visualizer Browser Extension

(This screenshot from 駒瑠市〜アクセシビリティ上の問題の体験サイト〜)

Install

• Chrome Web Store
• Firefox Add-ons

Users' Guide

• Accessibility Visualizer ユーザーズガイド (Japanese)
• Accessibility Visualizer User's Guide (English)
• Accessibility Visualizer 사용자 가이드 (Korean)

How to develop

It is built with CRXJS Vite Plugin.

To develop extension, lauch the dev server

# Install dependencies
$ npm install

# To testing, load the ./dist directory on your browser
# Currently it doesn't work in Firefox
$ npm run dev

And in your browser, turn on Developer mode, and load the dist directory with "Load unpacked" button.

There is a test page in src/test/ directroy. You can use it to test the extension with http://localhost:5173/src/test/index.html .

How to build

# Install dependencies
$ npm install

# Build browser extensions to ./dist (for Chrome) and ./dist-firefox directory
# To testing, load the directories on your browser
$ npm run build

# Build zip files to upload to the stores
# The zip files are created as ./a11y-visualizer-chrome.zip and ./a11y-visualizer-firefox.zip
$ npm run package