1.0.1 • Published 6 months ago

screenshot-prevention v1.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
6 months ago

Screenshot Prevention Library

A high-performance JavaScript library to prevent screenshots, screen recordings, and screen sharing on web applications.

Features

  • 🚫 Block screenshots and screen recordings
  • 🖼️ Prevent screen sharing
  • 📱 Mobile device support
  • ⚡ High-performance implementation
  • 🎨 Customizable UI and messaging
  • 🔄 Automatic recovery
  • 📦 Zero dependencies
  • 💻 TypeScript support

Installation

NPM

npm install screenshot-prevention

CDN

<script src="https://cdn.jsdelivr.net/npm/screenshot-prevention@latest/dist/screenshot-prevention.min.js"></script>

Quick Start

Basic Usage

<!-- Auto-initialize with default settings -->
<script src="screenshot-prevention.min.js" data-auto-init></script>

Manual Initialization

const prevention = new ScreenshotPrevention({
  blurIntensity: '20px',
  warningMessage: 'Screenshots are not allowed on this website.',
  preventCopy: true,
  preventInspect: true,
  recoveryDelay: 2000,
  onAttempt: (details) => {
    console.log('Screenshot attempted:', details);
  }
});

Configuration Options

OptionTypeDefaultDescription
blurIntensitystring'20px'Blur intensity when prevention is triggered
warningMessagestring'Screenshot and screen recording are not allowed.'Custom warning message
preventCopybooleantruePrevent content copying
preventInspectbooleantruePrevent inspect element
recoveryDelaynumber2000Recovery delay in milliseconds
debugbooleanfalseEnable debug logging
onAttemptfunctionnullCallback for screenshot attempts

API Reference

Methods

  • getAttemptCount(): Get the number of screenshot attempts
  • reset(): Reset the prevention state
  • destroy(): Clean up and remove event listeners

Events

The onAttempt callback receives an object with:

  • count: Number of attempts
  • method: Detection method used
  • timestamp: Timestamp of the attempt

Browser Support

  • Chrome 76+
  • Firefox 69+
  • Safari 13+
  • Edge 79+
  • iOS Safari 13.4+
  • Chrome for Android 76+

Contributing

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

Publishing Instructions

  1. Create a new repository on GitHub
  2. Initialize your local project:

    npm init
    git init
  3. Set up your project structure:

    screenshot-prevention/
    ├── src/
    │   └── index.js
    ├── dist/
    │   ├── screenshot-prevention.js
    │   └── screenshot-prevention.min.js
    ├── examples/
    │   └── index.html
    ├── package.json
    ├── README.md
    ├── LICENSE
    └── .gitignore
  4. Add build scripts to package.json:

    {
      "scripts": {
        "build": "rollup -c",
        "test": "jest",
        "prepare": "npm run build"
      }
    }
  5. Create and push to GitHub:

    git add .
    git commit -m "Initial commit"
    git remote add origin https://github.com/username/screenshot-prevention.git
    git push -u origin main
  6. Publish to npm:

    npm login
    npm publish
  7. Set up GitHub Actions for automated testing and publishing:

    name: CI/CD
    on: [push, pull_request]
    jobs:
      build:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v2
          - uses: actions/setup-node@v2
          - run: npm ci
          - run: npm test
          - run: npm run build

License

MIT License - free for commercial and personal use.

Support