Create right-click menu

README.md

@@ -18,6 +18,7 @@ In order to use Browserpass you must also install a [companion native messaging
     -   [Organizing password store](#organizing-password-store)
     -   [First steps in browser extension](#first-steps-in-browser-extension)
     -   [Available keyboard shortcuts](#available-keyboard-shortcuts)
+    -   [Usage via right-click menu](#usage-via-right-click-menu)
     -   [Password matching and sorting](#password-matching-and-sorting)
     -   [Searching password entries](#searching-password-entries)
     -   [OpenID authentication](#openid-authentication)
@@ -160,6 +161,12 @@ Note: If the cursor is located in the search input field, every shortcut that wo
 | <kbd>Ctrl+Shift+G</kbd>                              | Open URL in the new tab                               |
 | <kbd>Backspace</kbd> (with no search text entered)   | Search passwords in the entire password store         |
 
+### Usage via right-click menu
+
+You can right-click anywhere a visited website and there will appear a menu with an option `Browserpass - <n> entries`, where `n` is the number of entries that match the host of the visited website. When you select an entry, that one gets automatically filled in, equivalent to the behavior when an entry is selected from the Browserpass popup. This can be helpful if you want to fill credentials in a browser popup window without extension buttons. Selecting single form fields and choosing values to fill in is currently not supported
+
+![The right-click menu of browserpass](https://user-images.githubusercontent.com/15818773/153720814-66b99653-3b8a-456d-a55a-8dd208e66028.gif)
+
 ### Password matching and sorting
 
 When you first open the Browserpass popup, you will see a badge with the current domain name in the search input field:
@@ -300,6 +307,7 @@ Browserpass extension requests the following permissions:
 | `tabs`               | To get URL of a given tab, used for example to set count of the matching passwords for a given tab               |
 | `clipboardRead`      | To ensure only copied credentials and not other content is cleared from the clipboard after 60 seconds           |
 | `clipboardWrite`     | For "Copy password" and "Copy username" functionality                                                            |
+| `contextMenus`       | To create a context menu, also called right-click menu                                                           |
 | `nativeMessaging`    | To allow communication with the native app                                                                       |
 | `notifications`      | To show browser notifications on install or update                                                               |
 | `webRequest`         | For modal HTTP authentication                                                                                    |

src/background.js

@@ -41,6 +41,8 @@ chrome.browserAction.setBadgeBackgroundColor({
 chrome.tabs.onUpdated.addListener((tabId, info) => {
     // unregister any auth listeners for this tab
     if (info.status === "complete") {
+        createContextMenu();
+
         if (authListeners[tabId]) {
             chrome.webRequest.onAuthRequired.removeListener(authListeners[tabId]);
             delete authListeners[tabId];
@@ -51,6 +53,10 @@ chrome.tabs.onUpdated.addListener((tabId, info) => {
     updateMatchingPasswordsCount(tabId);
 });
 
+chrome.tabs.onActivated.addListener(() => {
+    createContextMenu();
+});
+
 // handle incoming messages
 chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
     receiveMessage(message, sender, sendResponse);
@@ -1156,3 +1162,61 @@ function onExtensionInstalled(details) {
             });
     }
 }
+
+/**
+ * Create a context menu, also called right-click menu
+ *
+ * @since 3.8.0
+ *
+ * @return void
+ */
+async function createContextMenu() {
+    await chrome.contextMenus.removeAll();
+
+    const menuEntryProps = {
+        contexts: ["all"],
+        type: "normal",
+    };
+    const menuEntryId = "menuEntry";
+
+    const settings = await getFullSettings();
+    const response = await hostAction(settings, "list");
+
+    if (response.status != "ok") {
+        throw new Error(JSON.stringify(response));
+    }
+    const files = helpers.ignoreFiles(response.data.files, settings);
+    const logins = helpers.prepareLogins(files, settings);
+    const loginsForThisHost = helpers.filterSortLogins(logins, "", true);
+    const numberOfLoginsForThisHost = loginsForThisHost.length;
+    const singularOrPlural = numberOfLoginsForThisHost === 1 ? 'entry' : 'entries'
+
+    await chrome.contextMenus.create({
+        ...menuEntryProps,
+        title: `Browserpass - ${numberOfLoginsForThisHost} ${singularOrPlural}`,
+        id: menuEntryId,
+    });
+
+    for (let i = 0; i < numberOfLoginsForThisHost; i++) {
+        await chrome.contextMenus.create({
+            ...menuEntryProps,
+            parentId: menuEntryId,
+            id: "login" + i,
+            title: loginsForThisHost[i].login,
+            onclick: () => clickMenuEntry(settings, loginsForThisHost[i]),
+        });
+    }
+}
+
+/**
+ * Handle the click of a context menu item
+ *
+ * @since 3.8.0
+ *
+ * @param object    settings    Full settings object
+ * @param array     login       Filtered and sorted list of logins
+ * @return void
+ */
+async function clickMenuEntry(settings, login) {
+    await handleMessage(settings, { action: "fill", login }, () => {});
+}

src/manifest-chromium.json

@@ -37,7 +37,8 @@
         "webRequest",
         "webRequestBlocking",
         "http://*/*",
-        "https://*/*"
+        "https://*/*",
+        "contextMenus"
     ],
     "content_security_policy": "default-src 'none'; font-src 'self'; img-src 'self' data:; script-src 'self'; style-src 'self'",
     "commands": {

src/manifest-firefox.json

@@ -35,7 +35,8 @@
         "webRequest",
         "webRequestBlocking",
         "http://*/*",
-        "https://*/*"
+        "https://*/*",
+        "contextMenus"
     ],
     "content_security_policy": "default-src 'none'; font-src 'self'; img-src 'self' data:; script-src 'self'; style-src 'self'",
     "applications": {