Removing annoying click-handling logic from websites

Question

There are a lot of websites out there that block your ability to right click or select text. I believe it's done as a sort of half-assed security measure to prevent people from copying text or images. Of course, it's always possible to circumvent that by using DevTools, it's just more time-consuming and annoying.

Here are a couple of examples, sorry for the Hebrew:

On this store, I wanted to select and copy the product name (Behringer MicroMix MX400), but there's "protection" against marking text, right-clicking and possibly copying.
On my broker's website I wanted to right-click the username field so I could do "inspect element" on it, but it won't let me. I was still able to find the element manually in DevTools, but it took more time.
Some websites do let you copy text, but they add their own custom text snippets to the text you copy, usually with a link to that site. Very annoying.

I assume that these "protections" are implemented by listening to events such as clicks and ctrl-C.

Is there some kind of script or Chrome add-on that disables all these annoying "protections" from websites?

I know chrome has a shortcut: CTRL + SHIFT + C which you can help you to select an element on the webpage. — Reyno, Jul 06 '20 at 07:34
There's no way to remove the event listeners that prevent you from selecting it, so DevTools will be your best bet. Obviously from a user perspective this is a horrible design choice and nobody should implmenent such functionality to their website — , Jul 06 '20 at 07:43
@MikeS.Are you saying that once you installed an event handler in JavaScript, you can't run JavaScript code that removes that handler? I'm not a JavaScript guy but that sounds weird. — Ram Rachum, Jul 06 '20 at 07:47
You can inspect elements and remove their listeners in DevTools or run custom javascript to remove listeners from an element, but both of these ways aren't any faster than just inspecting the element and copying the text from there. — , Jul 06 '20 at 07:53
Be aware that it can also be css using `user-select`, `pointer-events` or simply overlays preventing default behaviour. — Lain, Jul 11 '20 at 15:54

score 0 · Answer 1 · answered Jul 10 '20 at 01:27

A quick and efficient solution is to make a bookmarklet, I will walk you through how to make one first make a folder on your desktop and add this 2 files

activatecontextmenu.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ContextMenu</title>
</head>
<body>
<h1> ContextMenu</h1>
<a href="javascript:(function (){let script= document.createElement('script');script.src='http://localhost:8000/ContextMenu/contextscript.js'; document.body.appendChild(script)})()">activContMenu</a>
    
</body>
</html>

contextscript.js

(function (){
    const activatevents = function(e){
        e.stopImmediatePropagation()
      }
    document.addEventListener('copy', activatevents, true)
    document.addEventListener('paste', activatevents, true)
    document.addEventListener('contextmenu', activatevents, true) 
    document.addEventListener('onmousedown', activatevents, true)  
    document.addEventListener('onselectstart', activatevents, true)           
    if (typeof document.onselectstart!="undefined")
    document.onselectstart=new Function ("return true")
          
})()

The next step is to host this files on a local server if you use mac it's very easy. first open terminal and cd desktop and then run this command python -m SimpleHTTPServer and voila you just made a local server, now go to your browser and navigate to http://localhost:8000 you will be able to see all the folders on your desktop, navigate into the one that contain the 2 files you just made and open both of them on the browser and check if the javascript file url path matches the one on script.srcin the activatecontextmenu html file if not just replace it with the correct path.

Last step, on the activatecontextmenu.html window you will see the link activContMenu just drug the link to your bookmarks on chrome (it's underneath your address bar).

Now whenever you visit a page that prevents copy/past/select/contextmenu you just have to click on your bookmarklet "activContMenu" and it will inject the javascript and all those functionalities will be activated again the javascript uses stopImmediatePropagation() which prevents other listeners of the same events from been called.which means listeners attempting to return false or cancel the event will be canceled. The cool thing about this approach is that you can add more abilities to your bookmarklet and it doesn't require you to make an extension

score 0 · Answer 2 · answered Jul 10 '20 at 01:32

There is a Chrome extension Custom Javascript 2: Chrome web store link

So you can run any extra javascript code for any website that you want.

To answer your questions:

At this time when I'm posting the answer, broker site is not available so I tested the following codes in the store website.

you can use the following code for enabling right click:

document.oncontextmenu = null; // enables the right click

And this one for enabling text selection:

document.onselectstart = null; // enable text selection

Note that I tested above codes on the website that is mentioned in the question. Some websites are using other methods and event listener than onSelect, some of them disabling text selection using CSS(see this answer). For that situations you can try modifying the CSS using javascript.

For preventing of adding text to the clipboard I found this on the web, but was not so helpful. Also it seems that document.oncopy = null; not works on Chrome. I don't know other ways of restricting websites to accessing to clipboard, maybe there is an extension or something else for this.

reddy zombie · Answer 3 · 2020-07-06T08:23:38.897

-1

Just try disabling Javascript on such pages. Open Chrome DevTool then Ctrl+shift+P (Command Menu) , then type "Disable Javascript" and click on it. (Working on both pages you mentioned)

To remove all Event Handlers Refer to this: Javascript/DOM: How to remove all events of a DOM object?

edited Jul 06 '20 at 08:23

answered Jul 06 '20 at 08:14

reddy zombie

24
4

5

The problem with disabling all javascript ist that a lot of sites wont work anymore. – kevinSpaceyIsKeyserSöze Jul 06 '20 at 08:36
It doesn't disable JS globally but only for the page loaded. Try that in chrome. – reddy zombie Jul 06 '20 at 10:58
2

Yeah that's clear. But if you disable javascript for a site "globally" it probably wont work anymore either – kevinSpaceyIsKeyserSöze Jul 07 '20 at 12:37
Also I could use css to prevent default behaviour. – Lain Jul 11 '20 at 15:57

Removing annoying click-handling logic from websites

3 Answers3