A powerful Chrome extension for recruiters and sourcers to highlight keywords, patterns, and contact information on any webpage.
Features • Installation • Usage • Tech Stack • Development
Ink Highlighter is a Chrome extension designed for recruitment professionals who need to quickly scan profiles, resumes, and job postings for key information. With support for both keyword matching and regex patterns, plus intelligent profile management, Ink transforms any webpage into an annotated document tailored to your search criteria.
Whether you're sourcing engineers on LinkedIn, screening candidates on job boards, or reviewing resumes, Ink highlights what matters most—instantly.
- Multi-Group Support: Organize terms into color-coded groups (e.g., "JavaScript Skills", "Certifications", "Contact Info")
- Smart Matching: Supports plain text keywords, wildcards (
teach*), and full regex patterns - Real-Time Updates: Highlights update instantly as you add/remove terms—no page refresh needed
- Conflict Resolution: Automatically handles overlapping matches with smart prioritization
- Quick Profiles: 5 pre-built professional profiles ready to use:
- Modern Web Development
- Data Networking
- Sales
- Accounting & Finance
- Product Management
- Custom Profiles: Save unlimited custom configurations for different roles or industries
- Quick Switch: Toggle between profiles via the header dropdown menu
- Import/Export: Back up and share your configurations as JSON
- Match Counter: Real-time count of highlights per group
- Visual Indicators: Color-coded badges show which groups are active
- Collapsible Design: Minimize to save screen space
- Context Menu Integration: Right-click any text and add it to a group instantly
- Inline Editing: Rename groups, change colors, and manage terms without leaving the page
- Visibility Toggles: Turn groups on/off with a single click
- Color Picker: Choose from curated pastel colors or use a custom color
Each profile includes regex patterns for:
- ✉️ Email Addresses
- 📞 Phone Numbers (international formats supported)
- 🌐 Websites & URLs
- Non-Invasive: Runs in an isolated Shadow DOM—no conflicts with host page styles
- CSP-Compliant: Works on strict sites like LinkedIn
- Persistent State: Remembers sidebar position and profile selection across sessions
-
Download the latest release
- Go to Releases
- Download
ink-highlighter-vX.X.X.zip
-
Extract and load
- Extract the zip file to a permanent location
- Open Chrome and navigate to
chrome://extensions/ - Enable Developer mode (top-right toggle)
- Click Load unpacked
- Select the extracted folder
-
Clone the repository
git clone https://github.com/yourusername/Ink.git cd Ink -
Install dependencies
npm install
-
Build the extension
npm run build
-
Load in Chrome
- Open Chrome and navigate to
chrome://extensions/ - Enable Developer mode (top-right toggle)
- Click Load unpacked
- Select the
dist/folder from the project directory
- Open Chrome and navigate to
-
Open the Sidebar
- Click the Ink toolbar icon, OR
- Click the floating "Ink" button (bottom-right of any page)
-
Choose a Profile
- Click the Folder icon in the header
- Select a pre-built profile (e.g., "Modern Web Development")
- Or create your own by adding groups manually
-
Add Terms
- Expand a group to see its terms
- Click + Add term to add keywords
- Use the regex toggle for pattern matching
-
Save Your Configuration
- Click the Folder icon > Save Current
- Name your profile (e.g., "Senior React Engineers")
- Switch between profiles anytime
- Right-Click to Add: Select any text on the page, right-click, and choose "Add to [Group Name]"
- Color Coding: Use distinct colors for different types of information (skills, titles, tools, etc.)
- Regex Power: Match variations like
(React|Vue|Angular)or(Senior|Lead|Staff) Engineer - Export Backups: Regularly export your profiles via Settings > Data > Export
- React 19 - Modern UI framework
- TypeScript 5.9 - Type-safe development
- Vite 7 - Lightning-fast build tool
- Shadow DOM - Isolated component rendering
chrome.storage.local- Persistent data storagechrome.contextMenus- Right-click integrationchrome.scripting- Dynamic content injection
- Lucide React - Beautiful icon set
- Vitest - Unit testing framework
- JSDOM - DOM testing environment
- Custom Build Pipeline: Dual-mode Vite build (ES modules + IIFE for content scripts)
- MutationObserver: Detects dynamic content changes (e.g., infinite scroll)
- TreeWalker API: Efficient DOM traversal for text node scanning
# Build for production
npm run build
# Run unit tests
npm test
# Lint code
npm run lintInk/
├── src/
│ ├── components/ # React UI components
│ ├── content/ # Content script (highlighter engine)
│ ├── core/ # Shared utilities (matcher, storage, palette)
│ ├── background.ts # Service worker
│ └── App.tsx # Main React app
├── scripts/
│ └── build.js # Custom Vite build orchestration
├── dist/ # Build output (ignored by git)
└── manifest.json # Chrome extension manifest
src/core/matcher.ts: Core matching engine (text, wildcard, regex)src/content/scanner.ts: DOM traversal and highlight applicationsrc/core/defaultData.ts: Pre-built professional profilesscripts/build.js: Handles dual-mode Vite build for MV3 compatibility
npm test13 unit tests cover:
- ✅ Matcher logic (text, regex, wildcards)
- ✅ Storage persistence
- ✅ Highlight application and removal
- ✅ Overlap resolution
This project is licensed under the PolyForm Noncommercial License 1.0.0.
TL;DR: Free for personal, educational, and non-commercial use. Commercial use requires a separate license.
See LICENSE.md for full terms.
Contributions are welcome! However, please note:
- This project is under a noncommercial license
- Any contributions must also comply with the license terms
- For commercial licensing inquiries, please contact the maintainer
- Color Palette: Inspired by Tailwind CSS pastel shades
- Icons: Powered by Lucide
- Architecture: Built with insights from Chrome Extension MV3 best practices
Made with ❤️ for Recruiters and Sourcers