Context Menu for Browser Extensions: Typical Problems and Solutions

When developing a context menu on your own, duplicates often occur: each time the service worker activates, items are created anew. Or the menu doesn't appear on the intended elements. We've been solving these problems for over five years — with more than 20 projects involving right-click menus for Chrome, Firefox, and Edge. For example, one client complained that after updating the extension, users saw five identical items. Inspection showed the developer hadn't called removeAll() before creating items. We fixed it within an hour, and the menu stopped duplicating. According to the Context Menus API, such cleanup is mandatory for stable operation.

Benefits of Professional Development

Mistakes in managing the lifecycle of menu items are the main cause of memory leaks and duplicates. Incorrect context handling leads to items not appearing on links when they should. An experienced developer will handle cleanup with removeAll(), restrict visibility via documentUrlPatterns, and dynamically update state using storage.onChanged. We guarantee stable operation without repetitions and compliance with extension store policies. Our ready-made templates accelerate development by 3x compared to building from scratch — that's a 60% reduction in development time. In our projects, we reduce bugs by approximately 80% through comprehensive testing on all target browsers. A typical implementation costs between $500 and $2,000 depending on complexity.

What’s included in the work

• Requirements analysis and menu structure design with UX consideration;
• Implementation of items with nesting and dynamics (any depth);
• Integration with translation APIs, bookmark services, CRM (e.g., Telegram, Notion);
• Testing on Chrome, Firefox, Edge (including mobile browsers);
• Documentation and source code handover with comments;
• Post-launch support (bug fixes, enhancements);
• Training session for your team on maintaining the extension;
• Access to our private repository with reusable components.

Step-by-step guide to creating a context menu

Step 1: Basic setup — manifest and item creation

Add the contextMenus permission to the manifest and create items inside the onInstalled listener. It's crucial to call removeAll() before creation, otherwise duplicates will appear when the extension updates.

{ "permissions": ["contextMenus"] } 

chrome.runtime.onInstalled.addListener(() => { chrome.contextMenus.removeAll(() => { chrome.contextMenus.create({ id: 'translate-selection', title: 'Translate "%s"', contexts: ['selection'], }); chrome.contextMenus.create({ id: 'save-link', title: 'Save link to list', contexts: ['link'], }); chrome.contextMenus.create({ id: 'search-image', title: 'Search by image', contexts: ['image'], }); }); }); 

Context types you can use

Handling clicks and nested menus

For click handling, use a switch on info.menuItemId. Nested menus are created by specifying a parentId.

chrome.contextMenus.onClicked.addListener(async (info, tab) => { switch (info.menuItemId) { case 'translate-selection': await handleTranslate(info.selectionText, tab); break; case 'save-link': await handleSaveLink(info.linkUrl, info.pageUrl, tab); break; case 'search-image': await handleImageSearch(info.srcUrl, tab); break; } }); async function handleTranslate(text, tab) { const { targetLang = 'en' } = await chrome.storage.sync.get('targetLang'); const response = await fetch( `https://api.mymemory.translated.net/get?q=${encodeURIComponent(text)}&langpair=auto|${targetLang}` ); const data = await response.json(); await chrome.tabs.sendMessage(tab.id, { type: 'SHOW_TRANSLATION', original: text, translated: data.responseData.translatedText, }); } 

Example of a nested menu:

chrome.contextMenus.create({ id: 'parent-send-to', title: 'Send to...', contexts: ['selection', 'link'], }); chrome.contextMenus.create({ id: 'send-to-telegram', parentId: 'parent-send-to', title: 'Telegram', contexts: ['selection', 'link'], }); chrome.contextMenus.create({ id: 'send-to-notion', parentId: 'parent-send-to', title: 'Notion', contexts: ['selection', 'link'], }); 

Dynamic menu updates

You can update an item without recreating it using update() and subscribing to storage changes:

async function updateMenuItemState() { const { enabled } = await chrome.storage.sync.get('enabled'); chrome.contextMenus.update('toggle-feature', { title: enabled ? 'Disable highlight' : 'Enable highlight', }); } chrome.storage.onChanged.addListener((changes) => { if ('enabled' in changes) updateMenuItemState(); }); 

Restricting visibility by URL

The documentUrlPatterns parameter allows you to show an item only on specific domains. Masks must follow the format *://*.example.com/*. If you specify example.com without asterisks, the item won't appear. documentUrlPatterns and targetUrlPatterns work independently; they cannot be combined.

Comparison with in-house development

Typical mistakes in context menu development

With over 20 projects under our belt, we can prevent problems at the design stage. The three most common errors:

• Creating items without removeAll() — upon service worker restart or extension update, items replicate. Users see 3–5 identical entries. Solution: always call removeAll() inside the onInstalled listener.
• Incorrect documentUrlPatterns patterns — a mask example.com without asterisks doesn't work. Correct format: *://*.example.com/*. The mistake is not immediately apparent and hard to diagnose.
• Memory leaks with dynamic menus — if you create new items on every event without removing old ones, memory is wasted. Use update() instead of remove() + create().

We test every solution on three browsers: Chrome, Firefox, and Edge. This eliminates cross-browser discrepancies that often appear only for end users. During testing, we verify behavior on different OS (Windows, macOS, Linux) and account for each browser's quirks in context menu event handling. We also check compatibility with Manifest V3, which Chrome uses by default.

How to order context menu development

Contact us for a consultation — we'll study your task and propose the optimal solution. Order implementation of a right-click menu for your needs and get a stable extension in 5–10 working days. Pricing starts at $500 for simple menus.