add context menu support

src/js/background.js

@@ -1,9 +1,66 @@
+var DEFAULT_CONTEXT_MENU = true;
+var oldcontextMenuState = DEFAULT_CONTEXT_MENU;
+var newContextMenuState = DEFAULT_CONTEXT_MENU;
+var escapedSearches = {};
+
 /* Received returnSearchInfo message, set badge text with number of results */
 chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
   if ('returnSearchInfo' == request.message) {
     chrome.browserAction.setBadgeText({
       'text': String(request.numResults),
       'tabId': sender.tab.id
     });
+    newContextMenuState = !!request.regexString;
+    if (!newContextMenuState) {
+      delete escapedSearches[sender.tab.id];
+    }
+  } else if ('triggerContextMenu' === request.message) {
+    chrome.contextMenus.update('regex-search', {
+      visible: (newContextMenuState = request.visible)
+    });
+  }
+  if (newContextMenuState != oldcontextMenuState) {
+    chrome.contextMenus.update('regex-search-again', {
+      visible: (oldcontextMenuState = newContextMenuState)
+    });
   }
 });
+
+chrome.runtime.onInstalled.addListener(function() {
+  chrome.storage.local.get({
+    'contextMenu': DEFAULT_CONTEXT_MENU
+  }, function(result) {
+    chrome.contextMenus.update('regex-search', {
+      visible: result.contextMenu
+    });
+  });
+  chrome.contextMenus.create({
+    id: 'regex-search',
+    title: 'search /%s/ on this page',
+    contexts: ['selection'],
+    visible: false,
+    onclick: function(info, tab) {
+      chrome.tabs.sendMessage(tab.id, {
+        'message': 'search',
+        'regexString': (escapedSearches[tab.id] = info.selectionText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+      });
+      chrome.contextMenus.update('regex-search-again', {
+        title: 'search next',
+        visible: true
+      });
+    }
+  });
+  chrome.contextMenus.create({
+    id: 'regex-search-again',
+    title: 'search again',
+    contexts: ['page'],
+    visible: false,
+    onclick: function(info, tab) {
+      chrome.tabs.sendMessage(tab.id, {
+        'message' : 'search',
+        'regexString' : escapedSearches[tab.id],
+        'getNext': true
+      });
+    }
+  });
+});

src/js/options.js

@@ -8,6 +8,7 @@ var WHITE_COLOR = '#ffffff';
 var ERROR_COLOR = '#ff8989';
 var GOOD_COLOR = '#89ff89';
 var DEFAULT_INSTANT_RESULTS = true;
+var DEFAULT_CONTEXT_MENU = true;
 /*** CONSTANTS ***/
 
 /*** FUNCTIONS ***/
@@ -45,6 +46,15 @@ function validateMaxResults() {
   return false;
 }
 
+/* Show/hide context menu */
+function triggerContextMenu(checked) {
+  chrome.runtime.sendMessage({
+    'message' : 'triggerContextMenu',
+    visible: !!checked
+  });
+  return checked;
+}
+
 /* Save options to storage */
 function saveOptions() {
   var maxResults = validateMaxResults();
@@ -54,6 +64,7 @@ function saveOptions() {
       'selectedColor' : document.getElementById('selectedColor').value,
       'textColor' : document.getElementById('textColor').value,
       'maxResults' : maxResults,
+      'contextMenu': triggerContextMenu(document.getElementById('contextMenu').checked),
       'instantResults' :  document.getElementById('instantResults').checked,
       'maxHistoryLength' : document.getElementById('maxHistoryLength').value
     }
@@ -71,6 +82,7 @@ function loadOptions() {
     'selectedColor' : DEFAULT_SELECTED_COLOR,
     'textColor' : DEFAULT_TEXT_COLOR,
     'maxResults' : DEFAULT_MAX_RESULTS,
+    'contextMenu': DEFAULT_CONTEXT_MENU,
     'instantResults' : DEFAULT_INSTANT_RESULTS,
     'maxHistoryLength' : DEFAULT_MAX_HISTORY_LENGTH }, 
     function(result) {
@@ -82,6 +94,7 @@ function loadOptions() {
       document.getElementById('exampleHighlighted').style.color = result.textColor;
       document.getElementById('exampleSelected').style.color = result.textColor;
       document.getElementById('maxResults').value = result.maxResults;
+      document.getElementById('contextMenu').checked = triggerContextMenu(result.contextMenu);
       document.getElementById('instantResults').checked = result.instantResults;
       document.getElementById('maxHistoryLength').value = result.maxHistoryLength;
     }
@@ -128,6 +141,10 @@ document.addEventListener('DOMContentLoaded', function() {
   document.getElementById('maxHistoryLength').addEventListener('change', function() {
     saveOptions();
   });
+
+  document.getElementById('contextMenu').addEventListener('change', function() {
+    saveOptions();
+  });
 
   document.getElementById('buttonSave').addEventListener('click', function() {
     saveOptions();

src/manifest.json

@@ -31,6 +31,7 @@
   },
   "permissions": [
     "activeTab",
+    "contextMenus",
     "storage"
   ],
   "background": {

src/options.html

@@ -87,6 +87,14 @@
             <small>The default number of records is 30.</small>
           </div>
         </div>
+        <div class="panel panel-default">
+          <div class="panel-heading">Would you like to use 'search /regex/' in the context menu?</div>
+          <div class="panel-body">
+            <input id="contextMenu" type="checkbox" /> <label for="contextMenu">Context menu button</label>
+            <br />
+            <small>Can be very useful if like to avoid using your keyboard too often.</small>
+          </div>
+        </div>
         <button id="buttonSave" type="save">Save Settings</button>
         <button id="buttonReset" type="reset">Reset to Defaults</button>
         <p id="status" class="status-chrome-regex"></p>