Package Exports
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (screenshot-prevention) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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-preventionCDN
<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
| Option | Type | Default | Description |
|---|---|---|---|
| blurIntensity | string | '20px' | Blur intensity when prevention is triggered |
| warningMessage | string | 'Screenshot and screen recording are not allowed.' | Custom warning message |
| preventCopy | boolean | true | Prevent content copying |
| preventInspect | boolean | true | Prevent inspect element |
| recoveryDelay | number | 2000 | Recovery delay in milliseconds |
| debug | boolean | false | Enable debug logging |
| onAttempt | function | null | Callback for screenshot attempts |
API Reference
Methods
getAttemptCount(): Get the number of screenshot attemptsreset(): Reset the prevention statedestroy(): Clean up and remove event listeners
Events
The onAttempt callback receives an object with:
count: Number of attemptsmethod: Detection method usedtimestamp: Timestamp of the attempt
Browser Support
- Chrome 76+
- Firefox 69+
- Safari 13+
- Edge 79+
- iOS Safari 13.4+
- Chrome for Android 76+
Contributing
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Publishing Instructions
Create a new repository on GitHub
Initialize your local project:
npm init git init
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 └── .gitignoreAdd build scripts to package.json:
{ "scripts": { "build": "rollup -c", "test": "jest", "prepare": "npm run build" } }
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
Publish to npm:
npm login npm publish
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
- GitHub Issues: Report a bug
- Email: md.13ismail@gmail.com