Programmer: Lifelong Learning: Using Chrome DevTools to Bring Default Context Menu: Enable Copy Text

The Problem
Sometimes site owners disable right-click context menu for some reason: to disallow copy text, or to protect better user experience such as Google Drive and Dropbox: remove browser context menu and add customized context menu.

As web developer, or hackers, we use Chrome Devtools often, especially its "Inspect Element" function, so sometimes we want to remove this limitation: to bring back the browser default context menu.

Enable Copy - Chrome extension
Simple Solution that Works Most Time: document.oncontextmenu = null
or document.designMode = "on"
Site owner usually add javascript like below to disable context menu: <body oncontextmenu="return false;">
Or:

document.oncontextmenu = function() {
    return false;
};

In this case, we can just execute document.oncontextmenu = null in Chrome Devtools to remove the handler.

But sometimes, things are harder. Let's take a look at how to show default context menu in Google Drive as an example.
If this doesn't work you may run the following javascript code in devtools:
window.oncontextmenu=null;;
window.onmousedown=null;
window.onkeydown=null;
window.onclick=null;

document.oncontextmenu=null;
document.onmousedown=null;
document.onkeydown=null;
document.onclick=null;

document.onselectstart=null;
Re-enable Default Context Menu in Google Drive: by Changing Definition of hca function
To restore the default browser context menu in Google Drive, we first open Chrome Devtools(Using Ctrl+Shift+I), in the bottom panel, go to search tab, type "contextmenu".

It will find matches in js file: 2222407164-doclist_modularized_core.js

Clicking one match will bring you to the line, but this js file is minified, and ubale to read. SO click on the pretty button {}, this will format the js file to make it more readable.

Then search "contextmenu" again in the button search tab. Now it will show matches in the formatted js file.

The following code seems interesting to us. e.Yqa prevent context menu default behaviour.

e.initialize = function(a) {
    b.listen(a, "contextmenu", this.Yqa);
};
e.Yqa = function(a) {
    a.shiftKey || (a.stopPropagation(), a.preventDefault(), pCa(this, a.clientX, a.clientY, a.target))
};

Let's add a breakpoint in the e.Yqa function, right click on Google Drive, now it stops at the Yqa function. This is great.

From the Call Stack view, we can see that e.Yqa function is called by function hca.

function hca(a, b) {
    var c = a.Gn, d = a.Xd || a.src;
    a.Ooa && Ze(a);
    return c.call(d, b)
}

hca is a global function, we can change its definition in the console to change its behavior.

Check the value of parameter a, and b. Found out when we right click in Google Drive, the value of a.type is "contextmenu".

So we can change hca like below: if a.type="contextmenu", do nothing, return directly.

function hca(a, b) {
   if( a.type == "contextmenu" ) return;
    var c = a.Gn, d = a.Xd || a.src;
    a.Ooa && Ze(a);
    return c.call(d, b)
}

So every time, we want to show Chrome's default context menu in Google Drive, run the previous js code in the console to change the definition of hca. Then right click on Google Drive, it will show default context menu.

Happy hacking!!!

Resource
Don’t Disable Right Click!

Using Chrome DevTools to Bring Default Context Menu: Enable Copy Text

Labels