Skip to content

Latest commit

 

History

History
72 lines (51 loc) · 4.07 KB

bookmarklet-enable-right-click-selecting-text.md

File metadata and controls

72 lines (51 loc) · 4.07 KB
Raw

[Bookmarklet] - Enable right-click and selecting text

Background

Some websites don't want users to be able to right-click or select text because..... reasons 🤷‍♂️.

They accomplish this by preventing the default behavior of (at least) the oncontextmenu and onselectstart events listeners respectively. Event listeners are just functions that run only when in response to a certain event from the user/browser. One way to prevent the default behavior associated with an event is for its event listener to return false.

Guess which country abuses this technique?

🇰🇷 South Korea

Click here to find out why this is silly For some reasons, those websites are overly protective of their precious content. They're paranoid that someone will steal it. This technique only prevents the most casual users copying and pasting text or images into a search engine, on social media, or on their blog. A slightly more motivated user could easily bypass these "protections" in mere seconds. This is because when a user browses a website, (pretty much) all the website's code is sent to the user. Once it's on their computer, they can do anything they want, including copy every bit of it. These measures are silly because they make things more difficult for the most casual and innocent/harmless users while doing nothing to stop a more determined website/content thief.

User Story

  • When I'm browsing a website on the computer I want to be able to:
    • highlight to select any element I want.
    • right-click anywhere I damn well please.

Solution

It's possible to remove event listeners manually, but a bookmarklet can accomplish this much faster. Bookmarklets are magic. They appear to be an ordinary browser bookmark but then clicked, they run a predefined JavaScript snippet.

It's super easy to remove event listeners by reassigning them as null. This effectively erases the event listeners and the default browser behavior will occur when the event is fired. The code below iterates through every element in the DOM, and the Document interface and removes all event listeners that were feebly trying to sabotage basic, reasonable browser interactions.

// The console version:
Array.from(document.all).forEach((el) => {
  el.oncontextmenu = null;
  el.onselectstart = null;
  el.ondragstart = null;
});
document.oncontextmenu = null;
document.onselectstart = null;
document.ondragstart = null;

// The bookmarklet version. Paste the code below as the URL of a bookmark, then click the bookmark to run it.
javascript: (() => {
  Array.from(document.all).forEach((el) => {
    el.oncontextmenu = null;
    el.onselectstart = null;
    el.ondragstart = null;
  });
  document.oncontextmenu = null;
  document.onselectstart = null;
  document.ondragstart = null;
})();

Try it yourself!

Site A

Site A applies its reasonable interaction sabotage to the <body> element.

Screen.Recording.2022-11-01.at.23.09.16.mov

Site B

Site B applies its paranoid user-hostile event listeners directly to the Document interface.

Screen.Recording.2022-11-01.at.23.18.58.mov

Further Reading