🐶 Fat Dog Takeover

Fat Dog Takeover is a cross-browser extension for Google Chrome and Mozilla Firefox that replaces every single image on every website you visit with the iconic Fat Dog.

Whether it's news sites, Google Images, YouTube thumbnails, or social media feeds, every banner, avatar, photo, and background image stretches to fit and transforms into Fat Dog.

---

📦 Install from the Stores

The easiest way to get Fat Dog Takeover:

Browser	Install
Google Chrome	Fat Dog Takeover on the Chrome Web Store
Mozilla Firefox	Fat Dog Takeover on Firefox Add-ons (AMO)

---

✨ Features

• 🐶 Instant Global Replacement: Replaces all <img> tags, <picture> elements, SVG <image> tags, video poster thumbnails, and CSS background-image elements.
• ⚡ Zero Setup: Fat Dog is bundled right inside the extension package. Just install and browse!
• 🖼️ Exact Stretch Fitting: Automatically forces object-fit: fill so Fat Dog stretches to fit whatever shape or container size the original image occupied (banners, circles, squares, tall photos).
• 🎯 Works Everywhere: Features Shadow DOM piercing and anti-reversion technology so dynamic web apps like YouTube and Google Images won't revert images back.
• 🎛️ Popup Controls: Easily toggle the extension ON/OFF or adjust stretching modes (Fill, Cover, Contain) via the toolbar popup.

---

🛠️ Install from Source

Step 1: Build the extension

From the repository root, run:

npm run build

This generates the unpacked extension in dist/chrome/ and dist/firefox/ (plus a ready-to-upload .zip for each store). No dependencies required.

Step 2: Load in Firefox (temporary add-on)

1. Open Mozilla Firefox.
2. Navigate to about:debugging#/runtime/this-firefox in the address bar.
3. Click Load Temporary Add-on....
4. Select the manifest.json file inside the dist/firefox/ directory.

Step 3: Load in Chrome (unpacked)

1. Open Google Chrome.
2. Navigate to chrome://extensions in your address bar.
3. Turn ON the Developer mode toggle switch in the top-right corner.
4. Click Load unpacked and select the dist/chrome/ directory.

---

🗂️ Repository Layout

fat-dog-takeover/
├── src/                    # Single source of truth (shared across browsers)
│   ├── content.js          #   Image replacement logic
│   ├── popup.js            #   Popup controls
│   ├── popup.html/.css     #   Popup UI
│   ├── content.css         #   Styling
│   ├── fat_dog.png         #   The Fat Dog himself
│   ├── icons/              #   Extension icons
│   ├── manifest.chrome.json #  Chrome (Manifest V3)
│   └── manifest.firefox.json # Firefox (Manifest V2 + gecko ID)
├── build.js                # Generates dist/chrome and dist/firefox
├── package.json
└── dist/                   # Generated output (not committed)
    ├── chrome/
    ├── firefox/
    ├── chrome.zip
    └── firefox.zip

The only per-browser differences live in the two manifest files; all extension code is shared. A polyfill (extApi) transparently uses browser in Firefox and chrome in Chrome.

---

🎉 That's It!

Navigate to any website (e.g. Google Images, Wikipedia, or YouTube) and enjoy the Fat Dog Takeover!