RocketMatch - Google Ads Keyword Manager

A Chrome extension that enhances Google Ads keyword management by streamlining match type formatting, negative keyword handling, and bulk editing—all directly within the Google Ads interface.

Features

• 🎯 Apply match types (Exact, Phrase, Broad) to keywords (primarily via popup).
• 📋 Bulk format multiple keywords at once using the extension popup.
• ✨ Highlight-to-Keyword: Enable a toggle in the popup to automatically capture selected text on Google Ads pages and add it to your keyword list.
• 🖍️ On-Page Highlighting: When enabled, automatically highlights your saved keywords on Google Ads pages.
• 🎨 Clean, modern UI that integrates with Google Ads and a user-friendly popup.
• 📋 Copy formatted keywords to clipboard (individually or all).
• 🧹 Clear keyword history easily.

Installation

1. Clone this repository or download the ZIP file.
2. Open Chrome and navigate to chrome://extensions/.
3. Enable "Developer mode" in the top right.
4. Click "Load unpacked" and select the rocketmatch directory (the root directory of this project).

Usage

In Google Ads (General)

• Highlight-to-Keyword & On-Page Highlighting:
  1. Open the RocketMatch extension popup by clicking its icon in the browser toolbar.
  2. Enable the "Enable highlight-to-keyword" toggle.
  3. Now, when you select text on any ads.google.com page, it will be automatically processed and added to your keyword list in the popup (viewable when you next open it).
  4. Your existing saved keywords will also be highlighted directly on Google Ads pages.

Bulk Keyword Formatting (Popup)

1. Click the RocketMatch extension icon in your browser toolbar to open the popup.
2. Enter multiple keywords (one per line) in the text area. If "Highlight-to-keyword" is enabled, text you recently selected on a Google Ads page might already be populated here.
3. Select your desired default match type(s) (Exact, Phrase, Broad) using the checkboxes. These selections are saved for future use.
4. Click "Format Keywords". The keywords will be processed according to your selected match types and displayed in the "Previous Keywords" list.
5. Use "Copy All" to copy the entire formatted list to your clipboard, or use the individual copy/delete buttons next to each keyword.
6. Use "Clear History" to remove all keywords from the list and from storage.

Development

The extension is built using:

• Chrome Extension Manifest V3
• Modern JavaScript (ES6+)
• CSS3 for styling (via styles.css)
• Chrome Storage API (chrome.storage.local) for persisting settings and keywords.

Project Structure

rocketmatch/
├── manifest.json      # Extension configuration: permissions, scripts, popup, etc.
├── js/
│   ├── background.js  # Background service worker: handles core logic, events, and state management.
│   ├── content.js     # Content script: interacts with Google Ads pages (DOM manipulation, event listening).
│   ├── popup.js       # JavaScript logic for the popup interface (formatting, UI updates, storage interaction).
│   └── utils.js       # Shared utility functions for formatting, URL checking, etc.
├── popup.html         # HTML structure for the extension's popup.
├── styles.css         # CSS styles for both the content script UI (page highlights) and the popup.
└── icons/
    ├── icon16.png     # 16x16 icon
    ├── icon48.png     # 48x48 icon
    └── icon128.png    # 128x128 icon

(Note: The project structure has been updated to reflect current files and usage, including the active js/utils.js for shared helper functions.)

Architectural Overview

• manifest.json: Defines the extension's capabilities, permissions, and entry points (background script, content scripts, popup page). It declares which scripts run where and what browser features the extension can access.
• js/background.js: Acts as the central nervous system. It runs persistently (as a service worker) and listens for browser events (like tab updates, extension installation, messages from other scripts, context menu clicks). It manages global state (like the enableHighlightToKeyword toggle status and the list of savedKeywords via chrome.storage.local) and coordinates actions. For example, it handles the actual saving of highlighted text and keywords. It imports and uses shared functions from js/utils.js.
• js/content.js: Injected into Google Ads pages (ads.google.com). It can directly interact with the page's DOM. Its responsibilities include:
  • Listening for mouse events to capture user-selected text when the "highlight-to-keyword" feature is enabled.
  • Sending captured text to background.js for processing.
  • Highlighting keywords on the page based on the savedKeywords list from chrome.storage if the feature is enabled. It utilizes helper functions from RocketMatchUtils (provided by js/utils.js).
• popup.html & js/popup.js: Define the UI and functionality of the extension's popup window that appears when the user clicks the extension icon.
  • popup.html: The HTML structure.
  • js/popup.js: Handles user interactions within the popup, such as inputting keywords, selecting match types, triggering formatting, copying keywords, and managing the display of the keyword list. It communicates with chrome.storage.local to load and save settings (like default match types, the keyword list, and the highlight toggle state) and the currently highlighted text for the input field. It also uses utility functions from RocketMatchUtils (provided by js/utils.js).
• js/utils.js: A utility script providing shared helper functions (e.g., keyword formatting, URL checking, DOM helpers) used by background.js, content.js, and popup.js under the RocketMatchUtils namespace.
• styles.css: Contains all CSS rules for styling both the UI elements injected by content.js into web pages (like page highlights) and all elements within popup.html.

Communication:

• Content scripts, popup scripts, and the background script communicate via message passing (chrome.runtime.sendMessage, chrome.runtime.onMessage) for immediate actions.
• Persistent state and shared data (e.g., saved keywords, user settings) are managed through chrome.storage.local, which all parts of the extension can access. chrome.storage.onChanged listeners are used to react to data changes.

Key Design Patterns & Refactoring Notes (Recent Changes)

• Constants: Defined in background.js, content.js, and popup.js for UI selectors, storage keys, and message types to improve readability and maintainability.
• Class-Based Structure: Logic in content.js (via RocketMatchContent class) and popup.js (via KeywordFormatter class) is organized into classes. background.js has been refactored for better modularity with named handlers and clear sections.
• Separation of Concerns:
  • JavaScript logic is separated from HTML structure and CSS styling.
  • Within JavaScript files, distinct responsibilities (e.g., DOM manipulation, event handling, storage interaction, UI rendering) are grouped into separate methods or sections.
• Centralized Styling: All CSS is managed in styles.css. Inline styles in HTML (popup.html) have been removed, and inline styles in JavaScript (popup.js) have been replaced with CSS classes.
• Event-Driven Architecture: The extension heavily relies on browser events and storage change events to trigger actions and keep different parts synchronized.

Contributing

1. Fork the repository.
2. Create a feature branch (git checkout -b feature/AmazingFeature).
3. Commit your changes (git commit -m 'Add some AmazingFeature').
4. Push to the branch (git push origin feature/AmazingFeature).
5. Open a PullRequest.

License

Distributed under the MIT License. See LICENSE file for more information (if a LICENSE file is present, otherwise assume MIT).

Support

For issues and feature requests, please create an issue in the GitHub repository.