aidenybai
Browser Bookmark
Just add a bookmark with the following URL:
javascript:void((() => { const s = document.head.appendChild(document.createElement('script'));s.src = 'https://unpkg.com/react-scan/dist/auto.global.js';s.onerror = () => alert('Failed to load react-scan!')})())
And now one-click enable React Scan for any websites~
https://mourner.github.io/bullshit.js/ is an example of a bookmarklet help page you can look at
@SukkaW This is brilliant, thank you so much! Should be in official docs
The only issue with this is CSP... but otherwise, it’s a fantastic approach! I also use bookmarks for small and super useful things 😉.
edit:
Something like this can be added to the site ;)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React-Scan Bookmarklet Installer</title>
</head>
<body>
<h1>Add the React-Scan Bookmarklet</h1>
<p>Drag the button below to your bookmarks bar to install the bookmarklet:</p>
<a
href="javascript:void((() => { const s = document.head.appendChild(document.createElement('script'));s.src = 'https://unpkg.com/react-scan/dist/auto.global.js';s.onerror = () => alert('Failed to load react-scan!')})())"
style="padding: 10px; background-color: purple; color: white; text-decoration: none; border-radius: 5px;"
>
React-Scan
</a>
<p>If you can't see your bookmarks bar, press <strong>Ctrl+Shift+B</strong> (Windows) or <strong>Cmd+Shift+B</strong> (Mac) to enable it.</p>
</body>
</html>
The only issue with this is CORS
I don't get it, the script tag should not cause any CORS issues. The CSP would be the only issue.
The only issue with this is CORS
I don't get it, the script tag should not cause any CORS issues. The CSP would be the only issue.
Oh, my bad! 🙈 I've been working on some CORS issues in another project, and the word just stuck in my head.