block-inspect: A Lightweight JavaScript Utility to Deter Inspect Elements & Protect Your Website Content

#npm #git #javascript #webdev

If you’ve ever sought a straightforward method to deter users from accessing browser developer tools, disabling right-click context menus, and preventing copy/paste or text selection on your site — look no further!

I’m excited to share my new npm package: block-inspect.

What is block-inspect?

block-inspect is a straightforward JavaScript utility designed to deter casual users from inspecting your web page's source code or content by:

Blocking common keyboard shortcuts used to open developer tools (e.g., F12, Ctrl+Shift+I).
Disabling right-click context menus.
Preventing text selection and copy/paste actions (optional).
Allowing customizable options for what to block or allow.

Why use block-inspect?

Easy to integrate with just one import and function call.
Lightweight and dependency-free.
Highly customizable via options.
Improves content protection for sites where you want to reduce casual copying or tampering.

How to use it

First, install it from npm:

npm install block-inspect

Then, import and initialize it in your JavaScript:

const blockInspect = require('block-inspect');

blockInspect({
  disableContextMenu: true,
  disableSelection: true,
  disableCopy: true,
  disableDevToolsShortcut: true,
  onInspectAttempt: () => alert('Inspect element is disabled on this site!'),
});

import blockInspect from 'block-inspect';

blockInspect({
  disableContextMenu: true,
  disableSelection: true,
  disableCopy: true,
  disableDevToolsShortcut: true,
  onInspectAttempt: () => alert('Inspect element is disabled on this site!'),
});

You can call .stop() to remove all the blocking behaviour if needed.

Demo & Documentation

Check out the full documentation and source code on GitHub:

👉 https://github.com/mahmud-r-farhan/block-inspect

Thanks for reading! If you find this useful, please give it a ⭐️ on GitHub and share it with your developer friends!

Happy coding! 🚀

Follow for more! — @mahmud-r-farhan

block-inspect - npm

A simple JavaScript utility to deter users from opening browser developer tools (inspect element) and disable context menus, selection, and copy/paste on a website.. Latest version: 1.1.0, last published: a few seconds ago. Start using block-inspect in your project by running `npm i block-inspect`. There are no other projects in the npm registry using block-inspect.

npmjs.com