Inject TypeScript scripts into any web page during development. Write modern TypeScript, and ScriptDrop bundles and injects it into your target URL live via a Chrome extension.
- You write a script in
src/index.ts scriptdrop devwatches and bundles it, serving it onhttp://localhost:4454- The ScriptDrop Chrome extension detects when you visit your target URL and injects the script into the page automatically
Load scriptdrop-chrome/ as an unpacked extension in Chrome:
- Go to
chrome://extensions - Enable Developer mode
- Click Load unpacked and select the
scriptdrop-chromefolder
npm create scriptdrop@latestYou'll be prompted for:
- Project folder — where to create the project
- Package name — the npm package name
- Test URL — the page you want to inject into (e.g.
https://example.com/dashboard)
cd my-project
npm run devScriptDrop will open your target URL and start watching src/index.ts. Every time you save, the extension picks up the latest bundle automatically — just reload the page.
| Command | Description |
|---|---|
npm run dev |
Watch mode — bundles and serves on http://localhost:4454 |
npm run build |
Production build to dist/module.js |
Edit scriptdrop.config.ts to change the target URL:
import { defineScriptDropSettings } from 'scriptdrop';
export default defineScriptDropSettings('https://example.com/dashboard');Or pass a config object:
export default defineScriptDropSettings({ url: 'https://example.com/dashboard' });my-project/
├── src/
│ └── index.ts # Your script entry point
├── scriptdrop.config.ts
├── package.json
└── tsconfig.json