CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extension
oguzkaganeren
oguzkaganeren

Reputation: 73

How can I create a left-click menu in a Chrome extension

I want to make a left-click menu. How can I make it on my Chrome extension?

This is my right-click menu:

    chrome.runtime.onInstalled.addListener(function() {
    chrome.contextMenus.create({
        title: 'Dolar',
        id: 'dolar',
        contexts: ['all'],
    });
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
    if (info.menuItemId === "dolar") {
        alert("Hello");
    }
});

For making it left-click, how do I change it?

Upvotes: 1

Views: 1542

Answers (1)

Makyen
Makyen

Reputation: 33306

There is no special Chrome extension API to create a menu that opens on left-click. To make a menu that opens on left-click, you will need to inject a content script in any page in which you desire to have it used. In that content script you will need to listen for the click event with the left button. You will then need to insert into the DOM the elements that make up your menu. You will need to do all of this manually, or find a library which will abstract the problem.

In general, this will be inconsistent with the user interface which is used on most machines. This will be counter to most user's expectations and may cause user confusion. In addition, web pages will expect to be able to use left-click for whatever purpose they desire, if any, beyond the normal clicks on links (e.g. activating drop-down/pop-out menus, etc.). Your use of it will conflict with using left-click for any interaction within the page. Unless you have a specific use case, having a left-click menu that is generally available is probably a bad idea.

Having a UI element which opens a menu when the user left-clicks on it is a different situation. In such case, the user is clicking on a UI element which is expected to do something. However, you should consider carefully if loading a UI into every page is appropriate. Sometimes it is. Doing so can place a heavy burden on pages where your add-on is completely unused. You can minimize this impact by loading just the minimal amount into the page to show the beginning of the UI. Then, loading the rest of your code/libraries/UI only when the user begins interacting with your extension's UI. Needing a UI in the page is much more likely to be the case when your extension is for a limited set of pages (i.e. modifying the UI on a particular domain/page). However, for most extensions, general interaction with your add-on will begin with a browser/page action button click, a hotkey, a context menu entry, or your add-on detecting something and opening a UI for the user (i.e. not through adding a full UI to every page).

Upvotes: 1

Related Questions