ScriptDrop

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.

1. You write a script in src/index.ts
2. scriptdrop dev watches and bundles it, serving it on http://localhost:4454
3. 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:

1. Go to chrome://extensions
2. Enable Developer mode
3. Click Load unpacked and select the scriptdrop-chrome folder

npm create scriptdrop@latest

You'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 dev

ScriptDrop 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.

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