Result of investigation: Injecting a TypeScript Script into Page Context (Chrome Extension V3)

[OchirDarmaev]

This guide explains how to write a TypeScript script, bundle it into a single JavaScript file, and inject it into the page context using a Chrome Extension (Manifest V3). This is essential when you need access to the real window object and page-level JavaScript environment — beyond what a content script can do.

---

✅ Why This Approach?

• Content scripts are sandboxed — they cannot access window variables directly.
• You need to run a script in the same context as the webpage, e.g., YouTube.
• You want to write code in TypeScript using modules and imports.
• You want a single, predictable output file (inject.js) — no hashed filenames.

---

🗂️ Project Structure

/public
  inject.js                ← ✅ Built output
/src
  /injection
    inject.ts              ← ✅ Your TypeScript logic
    lib/hello.ts           ← Optional internal modules
/manifest.json
vite.config.ts (optional)

---

⚙️ Step 1: Write Your Injection Script in TypeScript

src/injection/inject.ts:

import { hello } from "./lib/hello";

hello();
console.log("[inject.ts] Running in page context");

// Example: Expose something on window
(window as any).myInjectedFeature = "🚀";

src/injection/lib/hello.ts:

export function hello() {
  console.log("👋 Hello from module");
}

---

🛠️ Step 2: Bundle to a Single JS File with esbuild

Install esbuild

npm install -D esbuild

Add script to package.json

"scripts": {
  "build:inject": "esbuild src/injection/inject.ts --bundle --outfile=public/inject.js --format=esm --target=es2020"
}

Run it:

yarn build:inject

This will generate public/inject.js — a fully self-contained script that can be injected.

---

📥 Step 3: Inject the Script via Content Script

In your content script:

// src/content-scripts/index.ts
function injectScript(filename: string) {
  const script = document.createElement("script");
  script.src = chrome.runtime.getURL(filename); // must match web_accessible_resources
  script.type = "module";
  script.onload = () => script.remove(); // optional cleanup
  (document.head || document.documentElement).appendChild(script);
}

injectScript("inject.js");

---

🧾 Step 4: Update manifest.json

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0",
  "permissions": [],
  "host_permissions": ["<all_urls>"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["src/content-scripts/index.ts"],
      "run_at": "document_start"
    }
  ],
  "web_accessible_resources": [
    {
      "resources": ["inject.js"],
      "matches": ["<all_urls>"]
    }
  ]
}

✅ This ensures inject.js can be accessed via chrome.runtime.getURL() from your content script.

---

🧠 Benefits

• ✍️ You write modular TS code with imports
• 🎯 You get one clean inject.js to inject
• 🔒 No leaking Vite internals, no hashed filenames
• ⚙️ Works consistently in dev and prod
• 🚀 Fast builds via esbuild

---

🧪 Optional: Add Watch Mode for Dev

You can also add a dev watch mode for inject.ts:

"scripts": {
  "dev:inject": "esbuild src/injection/inject.ts --bundle --outfile=public/inject.js --format=esm --target=es2020 --watch"
}