Trigger Code Snippets

A Chrome extension for saving and running JavaScript code snippets on web pages via keyboard shortcuts, the toolbar popup, or the right-click context menu. Snippets execute in the page's main JavaScript context using the Chrome DevTools Protocol, bypassing all CSP restrictions.

Personal-use tool. Not published to the Chrome Web Store.

Features

• Up to 100 snippets with name, code, and URL pattern restrictions
• Keyboard shortcuts — Alt+Shift+1 through Alt+Shift+9 for the first 9 snippets, based on list position
• Toolbar popup — left-click the extension icon to see and execute snippets
• Context menu — right-click on any page to trigger snippets
• Drag-to-reorder — reorder snippets to change shortcut assignments
• Auto-save — changes persist automatically
• Import/Export — bulk backup and restore snippets as JSON
• URL restrictions — each snippet only runs on matching pages (Chrome match patterns)
• CSP bypass — executes via chrome.debugger, working on strict sites like YouTube
• Dark theme management page with resizable sidebar and line numbers
• 16 default snippets pre-loaded from CaptainCodeAU/devtools-snippets
• Export Open Tabs — copy or download every open tab's URLs, grouped by window, as plain text or markdown
• Tab URLs Settings — configure exactly what that export looks like: a 10-style Markdown gallery (tables, link lists, checklist, blockquote, and more, each collapsible), or Text's fields/compact-expanded, with a live preview

Installation

1. Clone or download this repository
2. Open chrome://extensions/ in Chrome
3. Enable Developer mode (top right toggle)
4. Click Load unpacked
5. Select the trigger-code-snippets folder

Usage

Action	How
Execute a snippet	Alt+Shift+1–9, or left-click extension icon and select, or right-click page context menu
Manage snippets	Right-click extension icon → Options
Reorder snippets	Drag snippets up/down in the manager sidebar
Import snippets	Click Import Snippets in the manager toolbar, select a JSON file
Export snippets	Click Export Snippets in the manager toolbar
Export open tabs	Hover (or click) the popup's export icon, or right-click the toolbar icon — pick Download/Copy × Markdown/Text
Configure tab-URL export format	Click Tab URLs Settings in the manager toolbar

URL Patterns

Each snippet requires at least one URL pattern (Chrome match pattern syntax):

*://*/*              — all pages
*://example.com/*    — any protocol on example.com
https://*.google.com/* — any Google subdomain over HTTPS

Debugger Banner

When a snippet executes, Chrome briefly shows a "started debugging this browser" banner. This is a Chrome security requirement for the chrome.debugger API. To suppress it, launch Chrome with:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --silent-debugger-extension-api

Project Structure

trigger-code-snippets/
├── manifest.json          # MV3 manifest
├── background.js          # Service worker: execution, context menus, messaging,
│                          # Export Open Tabs
├── content.js             # Keyboard shortcut listener (Alt+Shift+1-9)
├── offscreen.html / .js   # Clipboard writes (service workers can't touch it)
├── shared/
│   ├── storage.js         # Storage CRUD, URL matching, import/export
│   └── tabExportFormat.js # Tab-URL export rendering, shared by background.js
│                          # and the manager's live settings preview
├── popup/
│   ├── popup.html
│   ├── popup.css
│   └── popup.js           # Toolbar popup: snippet list, click-to-execute
├── manager/
│   ├── manager.html
│   ├── manager.css
│   └── manager.js         # Management page: CRUD, drag reorder, auto-save
├── defaults/
│   └── default-snippets.json  # 16 pre-loaded snippets
├── icons/
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
└── docs/
    └── SPEC.md            # Full specification

Import/Export Format

Snippets are exported as a JSON array:

[
  {
    "name": "My Snippet",
    "code": "console.log('hello');",
    "allowedUrls": ["*://*/*"]
  }
]

When importing with Append, duplicate names are resolved by appending (2), (3), etc.

Tech Stack

• Chrome Extension Manifest V3
• Vanilla JavaScript (no frameworks, no build step)
• ES modules for background, popup, and manager
• chrome.debugger API for CSP-safe script execution
• chrome.storage.local for persistence
• HTML5 drag-and-drop for reordering

License

Personal use.