How to re-enable right click so that I can inspect HTML elements in Chrome?

This bookmarlet works in Google sites/Youtube as of Aug 2019 (tested in Chrome and Firefox):

function enableContextMenu(aggressive = false) { 
void(document.ondragstart=null); 
void(document.onselectstart=null); 
void(document.onclick=null); 
void(document.onmousedown=null); 
void(document.onmouseup=null); 
void(document.body.oncontextmenu=null); 
enableRightClickLight(document); 
if (aggressive) { 
  enableRightClick(document); 
  removeContextMenuOnAll("body"); 
  removeContextMenuOnAll("img"); 
  removeContextMenuOnAll("td"); 
  } } 

function removeContextMenuOnAll(tagName) { 
var elements = document.getElementsByTagName(tagName); 
  for (var i = 0; i < elements.length; i++) { 
    enableRightClick(elements[i]); 
  } 
} 

function enableRightClickLight(el) { 
  el || (el = document); 
  el.addEventListener("contextmenu", bringBackDefault, true); 
} 

function enableRightClick(el) { 
  el || (el = document); 
  el.addEventListener("contextmenu", bringBackDefault, true); 
  el.addEventListener("dragstart", bringBackDefault, true); 
  el.addEventListener("selectstart", bringBackDefault, true); 
  el.addEventListener("click", bringBackDefault, true); 
  el.addEventListener("mousedown", bringBackDefault, true); 
  el.addEventListener("mouseup", bringBackDefault, true); 
} 

function restoreRightClick(el) { 
  el || (el = document); 
  el.removeEventListener("contextmenu", bringBackDefault, true); 
  el.removeEventListener("dragstart", bringBackDefault, true); 
  el.removeEventListener("selectstart", bringBackDefault, true); 
  el.removeEventListener("click", bringBackDefault, true); 
  el.removeEventListener("mousedown", bringBackDefault, true); 
  el.removeEventListener("mouseup", bringBackDefault, true); 
} 
function bringBackDefault(event) {
  event.returnValue = true; 
  (typeof event.stopPropagation === 'function') && 
  event.stopPropagation(); 
  (typeof event.cancelBubble === 'function') && 
  event.cancelBubble(); 
} 

enableContextMenu();

For peskier sites, set/pass aggressive to true (this will disable most event handlers and hence disable interaction with the page):

function enableContextMenu(aggressive = true) { 
  void(document.ondragstart=null);
  void(document.onselectstart=null);
  void(document.onclick=null);
  void(document.onmousedown=null);
  void(document.onmouseup=null); 
  void(document.body.oncontextmenu=null); 
  enableRightClickLight(document); 
  if (aggressive) {
    enableRightClick(document);
    removeContextMenuOnAll("body");
    removeContextMenuOnAll("img");
    removeContextMenuOnAll("td");
  }
} 

function removeContextMenuOnAll(tagName) {
 var elements = document.getElementsByTagName(tagName);
 for (var i = 0; i < elements.length; i++) { enableRightClick(elements[i]);
  }
} 

function enableRightClickLight(el) { 
  el || (el = document); 
  el.addEventListener("contextmenu", bringBackDefault, true); 
}

function enableRightClick(el) {
  el || (el = document);
  el.addEventListener("contextmenu", bringBackDefault, true); 
  el.addEventListener("dragstart", bringBackDefault, true); 
  el.addEventListener("selectstart", bringBackDefault, true); 
  el.addEventListener("click", bringBackDefault, true); 
  el.addEventListener("mousedown", bringBackDefault, true); 
  el.addEventListener("mouseup", bringBackDefault, true); 
} 

function restoreRightClick(el) {
  el || (el = document);
  el.removeEventListener("contextmenu", bringBackDefault, true); 
  el.removeEventListener("dragstart", bringBackDefault, true); 
  el.removeEventListener("selectstart", bringBackDefault, true); 
  el.removeEventListener("click", bringBackDefault, true); 
  el.removeEventListener("mousedown", bringBackDefault, true); 
  el.removeEventListener("mouseup", bringBackDefault, true);
} 

function bringBackDefault(event) {
  event.returnValue = true;
  (typeof event.stopPropagation === 'function') && 
  event.stopPropagation();
  (typeof event.cancelBubble === 'function') &&
  event.cancelBubble(); 
} 

enableContextMenu();

I built upon @Chema solution and added resetting pointer-events and user-select. If they are set to none for an image, right-clicking it does not invoke the context menu for the image with options to view or save it.

javascript:function enableContextMenu(aggressive = true) { void(document.ondragstart=null); void(document.onselectstart=null); void(document.onclick=null); void(document.onmousedown=null); void(document.onmouseup=null); void(document.body.oncontextmenu=null); enableRightClickLight(document); if (aggressive) { enableRightClick(document); removeContextMenuOnAll('body'); removeContextMenuOnAll('img'); removeContextMenuOnAll('td'); } } function removeContextMenuOnAll(tagName) { var elements = document.getElementsByTagName(tagName); for (var i = 0; i < elements.length; i++) { enableRightClick(elements[i]); enablePointerEvents(elements[i]); } } function enableRightClickLight(el) { el || (el = document); el.addEventListener('contextmenu', bringBackDefault, true); } function enableRightClick(el) { el || (el = document); el.addEventListener('contextmenu', bringBackDefault, true); el.addEventListener('dragstart', bringBackDefault, true); el.addEventListener('selectstart', bringBackDefault, true); el.addEventListener('click', bringBackDefault, true); el.addEventListener('mousedown', bringBackDefault, true); el.addEventListener('mouseup', bringBackDefault, true); } function restoreRightClick(el) { el || (el = document); el.removeEventListener('contextmenu', bringBackDefault, true); el.removeEventListener('dragstart', bringBackDefault, true); el.removeEventListener('selectstart', bringBackDefault, true); el.removeEventListener('click', bringBackDefault, true); el.removeEventListener('mousedown', bringBackDefault, true); el.removeEventListener('mouseup', bringBackDefault, true); } function bringBackDefault(event) { event.returnValue = true; (typeof event.stopPropagation === 'function') && event.stopPropagation(); (typeof event.cancelBubble === 'function') && event.cancelBubble(); } function enablePointerEvents(el) {  if (!el) return; el.style.pointerEvents='auto'; el.style.webkitTouchCallout='default'; el.style.webkitUserSelect='auto'; el.style.MozUserSelect='auto'; el.style.msUserSelect='auto'; el.style.userSelect='auto'; enablePointerEvents(el.parentElement); } enableContextMenu();

Tested in Chrome 60.0.3112.78.

Some of the above methods work, but the easiest in my opinion is:

  1. Open dev tools (Shift+Control+i).

  2. Select the "Elements" tab, and then the "Event Listeners" tab.

  3. Hover over the elements/listener. A "Remove" button will show up.

  4. Click "Remove".

E.g. see photo.

Remove event listener


If they have just changed the oncontextmenu handler (which is the most straightforward way to do it), then you can remove their override thus:

window.oncontextmenu = null;

Otherwise, if it is attached to individual elements, you can get all the page's elements, and then remove the handler on each one:

var elements = document.getElementsByTagName("*");
for(var id = 0; id < elements.length; ++id) { elements[id].oncontextmenu = null; }

Or, it seems you can turn off such scripts; via an extension in Chrome or an option in Firefox - in the advanced box for javascript options, switch off 'Disable or replace context menus'.

Tags:

Javascript

Google Chrome

Recent Posts