Techwriter Toolbox

A Chrome extension that helps technical writers and content creators modify web pages on the fly. Edit text, hide elements, manage page states, and audit accessibility—all through convenient right-click context menus.

Installation

1. Open Chrome and navigate to chrome://extensions/
2. Enable "Developer mode" in the top right corner
3. Click "Load unpacked"
4. Select this extension directory

Quick Start

Right-click anywhere on a web page to access the Techwriter Toolbox menu options. Make your changes, save the state, and reload it anytime you revisit the page.

Features

Edit Text

Make quick edits to any text on a page:

1. Select the text you want to change
2. Right-click and choose Edit text
3. Enter your new text in the prompt
4. The text is instantly replaced

Use cases:

• Fix typos or errors in documentation
• Test different wording variations
• Update outdated information for screenshots
• Create personalized content for presentations

Search and Replace

Find and replace all occurrences of text across the entire page:

1. Right-click anywhere on the page
2. Choose Search and replace...
3. Enter the text you want to find
4. Enter the replacement text
5. All instances are replaced automatically

Use cases:

• Replace real email addresses with example@example.com
• Change company names throughout documentation
• Replace phone numbers with placeholder text
• Update URLs or version numbers across a page
• Sanitize sensitive information before screenshots

Note: This replaces all occurrences on the page, making it perfect for batch replacements.

Hide Element

Temporarily make elements invisible while preserving page layout:

1. Right-click on any element (paragraph, image, button, etc.)
2. Choose Hide element
3. The element becomes invisible but still takes up space

Use cases:

• Remove distracting elements while reading
• Hide sensitive information before taking screenshots
• Clean up cluttered interfaces
• Focus on specific sections of documentation

Delete Element

Completely remove elements from the page:

1. Right-click on any element
2. Choose Delete element
3. The element is removed and space collapses

Use cases:

• Simplify complex interfaces for training materials
• Remove advertisements or sidebars
• Create cleaner screenshots
• Test how pages look without certain components

Save State

Preserve all your changes for later use:

1. After making changes (editing, hiding, or deleting)
2. Right-click anywhere and choose Save state
3. All changes are saved to your browser

Important notes:

• States are saved per URL—each page has its own saved changes
• Saving again overwrites the previous state for that page
• Changes persist across browser sessions

Load State

Restore previously saved changes to the current page:

1. Right-click anywhere and choose Load state
2. The extension attempts to reapply all your saved changes
3. If some elements can't be found, you'll be prompted to try advanced matching

Two-phase loading process:

• Primary matching: Uses the original element locations (fast and reliable)
• Fallback matching: If prompted, uses advanced techniques to find elements that may have moved or changed slightly

This two-phase approach makes the extension reliable even on dynamic websites where content may shift between sessions.

Clear State

Remove saved changes for the current page:

1. Right-click anywhere and choose Clear state
2. The saved state is deleted (changes on the current page remain until reload)

Show/Hide Accessibility Labels

Audit and understand the accessibility features of any web page:

1. Right-click anywhere and choose Show accessibility labels
2. All elements with accessibility attributes are highlighted with:
   • Orange dashed borders
   • "A11Y" badges
3. Hover over any highlighted element to see its accessibility information
4. Choose Hide accessibility labels to turn off highlighting

Displays information about:

• ARIA labels and descriptions
• Alternative text for images
• ARIA roles and live regions
• Tab order and focus management
• Screen reader visibility

Use cases:

• Audit documentation for accessibility compliance
• Identify missing or incorrect ARIA labels
• Verify screen reader compatibility
• Learn how accessibility attributes work
• Test and improve your own web content

System Requirements

• Google Chrome browser
• Chrome version 88 or higher (Manifest V3 support)

Permissions

The extension requires these permissions:

• activeTab: Access the current tab to modify content
• storage: Save your page states locally in the browser
• contextMenus: Add right-click menu options

Your data never leaves your browser. All states are saved locally using Chrome's storage API.

Troubleshooting

Changes don't persist after page reload

• Remember to click Save state after making changes
• States are not loaded automatically—you must choose Load state from the menu

Load state fails to find some elements

• Try the low-confidence matching option when prompted
• Some dynamic websites may change their structure between sessions
• Check the browser console (F12) for detailed matching information

Context menu doesn't appear

• Refresh the page and try again
• Make sure the extension is enabled in chrome://extensions/
• Some Chrome internal pages don't allow extensions to run

Changes affect the wrong element

• Complex websites may have similar elements that are hard to distinguish
• Try making more specific changes or editing smaller sections
• The fallback matching system uses multiple strategies to find the right elements

Privacy

Techwriter Toolbox respects your privacy:

• All data is stored locally in your browser
• No information is sent to external servers
• No tracking or analytics
• No user accounts or login required

Version

Current version: 1.0.0