Add support for middle clicks opening new tabs on the context buttons

ext/bg/js/api.js

@@ -144,28 +144,30 @@ async function apiTemplateRender(template, data, dynamic) {
     }
 }
 
-async function apiCommandExec(command) {
+async function apiCommandExec(command, params) {
     const handlers = apiCommandExec.handlers;
     if (handlers.hasOwnProperty(command)) {
         const handler = handlers[command];
-        handler();
+        handler(params);
     }
 }
 apiCommandExec.handlers = {
-    search: async () => {
+    search: async (params) => {
         const url = chrome.extension.getURL('/bg/search.html');
-        try {
-            const tab = await apiFindTab(1000, (url2) => (
-                url2 !== null &&
-                url2.startsWith(url) &&
-                (url2.length === url.length || url2[url.length] === '?' || url2[url.length] === '#')
-            ));
-            if (tab !== null) {
-                await apiFocusTab(tab);
-                return;
+        if (!(params && params.newTab)) {
+            try {
+                const tab = await apiFindTab(1000, (url2) => (
+                    url2 !== null &&
+                    url2.startsWith(url) &&
+                    (url2.length === url.length || url2[url.length] === '?' || url2[url.length] === '#')
+                ));
+                if (tab !== null) {
+                    await apiFocusTab(tab);
+                    return;
+                }
+            } catch (e) {
+                // NOP
             }
-        } catch (e) {
-            // NOP
         }
         chrome.tabs.create({url});
     },

ext/bg/js/backend.js

@@ -181,7 +181,7 @@ Backend.messageHandlers = {
     definitionsAddable: ({definitions, modes, optionsContext}) => apiDefinitionsAddable(definitions, modes, optionsContext),
     noteView: ({noteId}) => apiNoteView(noteId),
     templateRender: ({template, data, dynamic}) => apiTemplateRender(template, data, dynamic),
-    commandExec: ({command}) => apiCommandExec(command),
+    commandExec: ({command, params}) => apiCommandExec(command, params),
     audioGetUrl: ({definition, source, optionsContext}) => apiAudioGetUrl(definition, source, optionsContext),
     screenshotGet: ({options}, sender) => apiScreenshotGet(options, sender),
     forward: ({action, params}, sender) => apiForward(action, params, sender),

ext/bg/js/context.js

@@ -25,6 +25,20 @@ function showExtensionInfo() {
     node.textContent = `${manifest.name} v${manifest.version}`;
 }
 
+function setupButtonEvents(selector, command) {
+    $(selector)
+    .on('click', (e) => {
+        if (e.button !== 0) { return; }
+        apiCommandExec(command, {newTab: e.ctrlKey});
+        e.preventDefault();
+    })
+    .on('auxclick', (e) => {
+        if (e.button !== 1) { return; }
+        apiCommandExec(command, {newTab: true});
+        e.preventDefault();
+    });
+}
+
 $(document).ready(utilAsync(() => {
     showExtensionInfo();
 
@@ -33,9 +47,9 @@ $(document).ready(utilAsync(() => {
         document.documentElement.dataset.mode = (browser === 'firefox-mobile' ? 'full' : 'mini');
     });
 
-    $('.action-open-search').click(() => apiCommandExec('search'));
-    $('.action-open-options').click(() => apiCommandExec('options'));
-    $('.action-open-help').click(() => apiCommandExec('help'));
+    setupButtonEvents('.action-open-search', 'search');
+    setupButtonEvents('.action-open-options', 'options');
+    setupButtonEvents('.action-open-help', 'help');
 
     const optionsContext = {
         depth: 0,

ext/fg/js/api.js

@@ -49,8 +49,8 @@ function apiAudioGetUrl(definition, source, optionsContext) {
     return utilInvoke('audioGetUrl', {definition, source, optionsContext});
 }
 
-function apiCommandExec(command) {
-    return utilInvoke('commandExec', {command});
+function apiCommandExec(command, params) {
+    return utilInvoke('commandExec', {command, params});
 }
 
 function apiScreenshotGet(options) {