Force Enable Copy and Paste on Websites! JavaScript Bookmarklet

#bookmarklet #javascript #beginners #quicktips

I despise websites that disable copy/paste functionality. I understand that forcing users to type in their information manually is one way to make them verify their information is correct, but it's a horrible user experience. Here is the bookmarklet that I use to get around this limitation.

forceEnableCopyPaste.js

The bookmarklet is a JavaScript code snippet that disables the website's function that disables copying and pasting. When you activate the bookmarklet, it attaches event listeners that override these restricting functions.

javascript: (function () {
  const forceEnableCopyPaste = (e) => {
    e.stopImmediatePropagation();
    return true;
  };

  ['paste', 'copy'].forEach(event => {
    document.addEventListener(event, forceEnableCopyPaste, true);
  });
})();

Usage

Initial Setup

Copy the forceEnableCopyPaste.js code block
Go to Bookmark manager (chrome://bookmarks/) > Click on the ⋮ at the top-right-corner
Click Add new bookmark & paste the code in the URL field

Disabling Copy-Paste Restrictions

Go to the website where you want to enable copy-paste
Click on the bookmarklet to activate it
Enjoy copying & pasting!

Understanding The Code

Let's dissect the code to understand how it works:

const forceEnableCopyPaste = (e) => {
  e.stopImmediatePropagation();
  return true;
};

The function forceEnableCopyPaste is an event handler that takes an event object e as its argument. The function stops the immediate propagation of the event by calling e.stopImmediatePropagation(). This prevents other listeners from handling the event, negating any website-specific code restricting copy-pasting.

['paste', 'copy'].forEach(event => {
  document.addEventListener(event, forceEnableCopyPaste, true);
});

Here, an array containing two strings, 'paste' and 'copy', represents the event types. For each event type, addEventListener attaches the forceEnableCopyPaste event handler to the document. The true flag signifies that the listener will be invoked during the capture phase, making it harder for website-specific code to stop the event propagation.

Warning and Disclaimer

⚠️ Using this bookmarklet on certain websites may break other functionalities, thus rendering the website unusable.
⚠️ Using this bookmarklet on certain websites may violate their terms and conditions.
⚠️ Always respect the intellectual property rights and terms of service of websites you visit.

DEV Community