--- name: browser-extension description: Create Chrome\/Chromium browser extensions for users without coding experience. Use when someone wants to add keyboard shortcuts to a website or web app, automate clicking buttons or focusing inputs on web pages, or create simple browser extensions. Primary use case is adding keyboard shortcuts to web applications like Salesforce, HubSpot, and other CRMs. --- **Author:** Peter Hartree **Repository:** https:\/\/github.com\/HartreeWorks\/claude-skill-browser-extension **Blog post:** [Shortcuts for any web app](https:\/\/wow.pjh.is\/journal\/shortcuts-for-any-web-app) --- # Browser extension skill Create Chrome\/Chromium browser extensions for users without coding experience. ## References * `references\/code-templates.md` — JavaScript patterns, CSS, and manifest templates * `references\/installation.md` — User-facing installation, troubleshooting, and sharing guides * `references\/publishing.md` — Chrome Web Store publishing guide ## Information gathering Before writing code, ensure you have enough information. Ask clarifying questions if the request is ambiguous. ### Required information 1. **Target website URL**: Get the full URL from the browser's address bar 2. **Screenshot of the page**: A screenshot showing the buttons\/elements they want to add shortcuts to 3. **HTML of the relevant section**: The HTML of the area containing the buttons (not the entire page) 4. **Desired shortcuts**: What key combinations should trigger what actions? 5. **Target elements**: What buttons\/inputs\/links should be clicked or focused? ### Getting a screenshot Ask the user to take a full-page screenshot: ``` Please take a screenshot of the page showing the buttons you want to add shortcuts to: * Mac: Cmd+Shift+3 (full screen) or Cmd+Shift+4 (select area) * Windows: Win+Shift+S (select area) or Print Screen (full screen) ``` ### Getting the page URL If the URL seems incomplete or you're unsure about the pattern, ask: ``` Please copy the complete URL from your browser's address bar while you're on the page where you want the shortcuts to work. I need the full URL to set up the extension correctly. ``` ### URL pattern extraction Extract the appropriate match pattern from the provided URL. Examples: | User provides | Match pattern | Active path check | |---------------|---------------|-------------------| | `https:\/\/app.hubspot.com\/contacts\/123456\/contact\/789` | `https:\/\/app.hubspot.com\/*` | Check for `\/contact\/` in path | | `https:\/\/innovation-data-44832.lightning.force.com\/lightning\/r\/Contact\/003QH00000MICR4YAP\/view` | `https:\/\/*.lightning.force.com\/*` | Check for `\/lightning\/r\/Contact\/` | | `https:\/\/mail.google.com\/mail\/u\/0\/#inbox` | `https:\/\/mail.google.com\/*` | Check for `#inbox` or specific view | The manifest.json uses the broad match pattern, but the content script should check if the current URL path matches the user's intended view before activating shortcuts. ### Getting element information Ask the user to share the HTML of the section containing the buttons. Important: do NOT ask for the entire `` element — pages like Salesforce can have millions of characters of HTML. Instead, guide them to select just the relevant container: ``` To help me find the right elements, please share the HTML of the area containing the buttons: 1. Go to the page where you want shortcuts 2. Open Developer Tools: * Mac: Cmd+Option+I * Windows\/Linux: Ctrl+Shift+I 3. Activate the element picker: * Mac: Cmd+Shift+C * Windows\/Linux: Ctrl+Shift+C 4. Click on an area of the page that contains all the buttons you want shortcuts for * For example, click on the toolbar or header section that holds the buttons * Try to pick a container that includes all the buttons, but not the entire page 5. In the Elements panel, right-click the highlighted element 6. Choose "Copy" → "Copy outerHTML" 7. Paste it here Also tell me what text appears on each button you want a shortcut for. ``` ## Keyboard shortcut guidelines ### Platform-specific modifiers Use these modifiers automatically without asking the user: | Platform | Modifier | |----------|----------| | Mac | Ctrl | | Windows\/Linux | Alt | The code templates detect the platform and bind accordingly. Simply tell the user their shortcuts will be Ctrl+[key] on Mac and Alt+[key] on Windows. Do NOT ask for confirmation or permission — just implement it this way. Only add Shift to the shortcut if the user explicitly requests it. If they ask for "Ctrl+M", implement Ctrl+M (Mac) \/ Alt+M (Windows), not Ctrl+Shift+M. **Why these modifiers**: Mac apps use Cmd for system shortcuts, so Ctrl is unused. Windows uses Ctrl heavily (Ctrl+S, Ctrl+N, etc.), so Alt avoids conflicts. Don't use Alt\/Option on Mac — it's for typing special characters. ### Conflict warnings Only warn if the user explicitly requests a conflicting shortcut on Windows (e.g., Ctrl+S). On Mac, Ctrl+[key] never conflicts. ## Response workflow ### Step 1: Confirm understanding Briefly restate which website\/page the extension targets, what shortcuts will be created, and what each shortcut does. ### Step 2: Verify element selectors **Before writing code**, explicitly verify each target element in the provided HTML. For each shortcut the user requested, state: 1. The element you found (tag name, key attributes) 2. Why you believe this is the correct element (not a similarly-named form field) **Common mistakes to avoid:** | User wants | Wrong match | Right match | |------------|-------------|-------------| | "Email button" | `Email<\/label>` or `` | `