figma-blockr
v1.0.1
Published
Blocks the Figma HTML-to-Design Chrome extension from capturing your web page content.
Maintainers
midnight_robReadme
figma-block-r
Prevents the Figma Chrome extension from capturing your web page content. Zero dependencies. ~1 kB minified.
Installation
NPM
npm install figma-block-rImport it as early as possible in your entry file:
// Next.js: pages/_app.js or app/layout.js
// Vite / CRA: src/main.js or src/index.js
import 'figma-block-r'Next.js <Script> component:
import Script from 'next/script'
export default function Layout({ children }) {
return (
<html>
<head>
<Script src="/figma-block-r.js" strategy="beforeInteractive" />
</head>
<body>{children}</body>
</html>
)
}CDN
Add to your <head> before any other scripts:
<!-- Pinned version — recommended for production -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script>
<!-- Always latest -->
<script src="https://cdn.jsdelivr.net/npm/figma-block-r/dist/index.min.js"></script>
<!-- unpkg alternative -->
<script src="https://unpkg.com/figma-block-r/dist/index.min.js"></script>Configuration
By default the entire page is protected. To protect only specific sections, copy dist/index.js into your project and set:
const PROTECT_ENTIRE_PAGE = false;
const PROTECTED_SELECTOR = "[data-h2d-protected]";Then mark the elements you want protected:
<section data-h2d-protected="true">
Protected content
</section>
<footer>
Unprotected content
</footer>License
MIT