Installation
Step-by-step guide to install and configure Developer's Toolkit
Install from Chrome Web Store
Recommended Installation Method
The easiest way to install Developer's Toolkit is directly from the Chrome Web Store.
Visit the Chrome Web Store listing
Click "Add to Chrome"
Confirm permissions when prompted
Extension is ready to use!
Load Unpacked (Development)
For Developers: This method is for local development or testing unpacked versions.
- 1.Open Chrome and navigate to
chrome://extensions - 2.Enable Developer mode toggle in the top-right corner
- 3.Click Load unpacked button
- 4.Select the
DevelopersToolkitfolder - 5.Extension loads and is ready for development testing
Permissions Explained
Developer's Toolkit requires several Chrome permissions to function. Here's what each permission is used for:
Storage
Saves your settings, theme preferences, API keys, AI chat history, and saved presets locally.
Scripting
Injects scripts for in-page overlays (CSS overlay, link highlighting) and element inspection features.
Side Panel
Enables the main UI in Chrome's side panel for all toolkit features and modules.
Active Tab & Tabs
Accesses current tab information for page analysis, diagnostics, and contextual features.
Context Menus
Adds right-click menu options like "Inspect with Developer's Toolkit" and "AI: Explain Selection".
Cookies (Optional)
Requested on-demand for Cookie module features. You can grant this later when using cookie tools.
Configure API Keys
API Keys for Advanced Features
Configure API keys to unlock AI features and avoid PageSpeed rate limits.
OpenRouter API Key (AI Features)
Required for all AI-powered features including:
- • AI form filling and test case generation
- • AI cookie analysis and policy generation
- • AI CSS optimization and design tokens
- • AI JavaScript debugging and code analysis
- • AI alt text generation and media optimization
- • AI Command Center for page analysis
Get your key at: openrouter.ai/keys
PageSpeed Insights API Key
Optional but recommended to avoid rate limiting on PageSpeed audits.
Get your key from Google Cloud Console:
developers.google.com/speed/docs/insights/v5/get-startedHow to add keys: Open the extension side panel → Navigate to Settings → Enter your API keys → Save. Keys are stored locally and never shared.
External API Access
The extension communicates with the following external APIs:
https://openrouter.ai/*AI features and chat
https://validator.w3.org/*HTML validation
https://jigsaw.w3.org/*CSS validation
https://www.googleapis.com/*PageSpeed Insights
Next Steps
Getting Started Guide
Learn how to use the extension and explore its features