Provide an option to hide context menu

Author: viko16

src/browser/extension/background/contextMenus.js

@@ -1,6 +1,6 @@
 import openDevToolsWindow from './openWindow';
 
-export default function createMenu() {
+export function createMenu() {
   const menus = [
     { id: 'devtools-left', title: 'To left' },
     { id: 'devtools-right', title: 'To right' },
@@ -25,6 +25,10 @@ export default function createMenu() {
   });
 }
 
+export function removeMenu() {
+  chrome.contextMenus.removeAll();
+}
+
 chrome.contextMenus.onClicked.addListener(({ menuItemId }) => {
   openDevToolsWindow(menuItemId);
 });

src/browser/extension/background/index.js

@@ -1,6 +1,7 @@
 import configureStore from '../../../app/stores/backgroundStore';
 import openDevToolsWindow from './openWindow';
-import createMenu from './contextMenus';
+import { createMenu, removeMenu } from './contextMenus';
+import syncOptions from '../options/syncOptions';
 
 // Expose the extension's store globally to access it from the windows
 // via chrome.runtime.getBackgroundPage
@@ -11,7 +12,17 @@ chrome.commands.onCommand.addListener(shortcut => {
   openDevToolsWindow(shortcut);
 });
 
-// Create the context menu
+// Create the context menu when installed
 chrome.runtime.onInstalled.addListener(() => {
-  createMenu();
+  syncOptions().get(option => {
+    if (option.showContextMenus) createMenu();
+  });
+});
+
+// Create or Remove context menu when config changed
+chrome.storage.onChanged.addListener(changes => {
+  if (changes.showContextMenus) {
+    if (changes.showContextMenus.newValue) createMenu();
+    else removeMenu();
+  }
 });

src/browser/extension/options/ContextMenuGroup.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+export default ({ options, saveOption }) => {
+  return (
+    <fieldset className="option-group">
+      <legend className="option-group__title">Context Menu</legend>
+
+      <div className="option option_type_checkbox">
+        <input className="option__element"
+               id="showContextMenus"
+               type="checkbox"
+               checked={options.showContextMenus}
+               onChange={(e) => saveOption('showContextMenus', e.target.checked)}/>
+        <label className="option__label" htmlFor="showContextMenus">Add Context Menus</label>
+        <div className="option__hint">
+          Add Redux DevTools to right-click context menu
+        </div>
+      </div>
+    </fieldset>
+  );
+};

src/browser/extension/options/Options.js

@@ -2,12 +2,14 @@ import React from 'react';
 import FilterGroup from './FilterGroup';
 import AllowToRunGroup from './AllowToRunGroup';
 import MiscellaneousGroup from './MiscellaneousGroup';
+import ContextMenuGroup from './ContextMenuGroup';
 
 export default (props) => (
   <div>
     <div style={{ color: 'red' }}>Setting options here is discouraged, and will not be possible in the next major release. Please <a href="https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md" target="_blank" style={{ color: 'red' }}>specify them as parameters</a>. See <a href="https://github.com/zalmoxisus/redux-devtools-extension/issues/296" target="_blank" style={{ color: 'red' }}>the issue</a> for more details.<br /> <hr /></div>
     <FilterGroup {...props} />
     <AllowToRunGroup {...props} />
     <MiscellaneousGroup {...props} />
+    <ContextMenuGroup {...props} />
   </div>
 );

src/browser/extension/options/syncOptions.js

@@ -39,7 +39,8 @@ const get = callback => {
       blacklist: '',
       shouldCatchErrors: false,
       inject: true,
-      urls: '^https?://localhost|0\\.0\\.0\\.0:\\d+\n^https?://.+\\.github\\.io'
+      urls: '^https?://localhost|0\\.0\\.0\\.0:\\d+\n^https?://.+\\.github\\.io',
+      showContextMenus: true
     }, function(items) {
       options = migrateOldOptions(items);
       callback(options);