TabPet

TabPet is a Chrome extension built with Vite + React + TypeScript.

It injects a browser pet into web pages, provides a popup for quick controls, and exposes an options page backed by chrome.storage.local.

Current Direction

• full-screen roaming pet behavior
• draggable placement anywhere in the viewport
• a collapsible control panel so the page can show only the pet by default
• hunger, energy, and joy status bars
• feed, sleep, and play interactions
• configurable pet name, speed, scale, and custom asset URL
• Manifest V3 extension structure

Project Structure

• public/: static extension assets and content scripts
• src/popup/: popup UI
• src/options/: options page UI
• src/shared/: shared settings types and storage helpers
• docs/: design notes, behavior notes, and roadmap

Custom Assets

The pet is being prepared for user-supplied visuals. The intended workflow is:

1. open the options page
2. paste a custom image URL
3. let the existing pet behavior system render that asset in place of the default face

Current Page Interaction

• the pet roams across the visible page area on its own
• drag the pet anywhere in the viewport to reposition it
• double-click the pet to open the control panel
• use the Hide button to collapse the panel again

Development

npm install
npm run build

Then load the generated dist/ folder as an unpacked extension in Chrome.

• [2025-05-21] noted another setup tip for building, loading, and testing the roaming version of TabPet in Chrome.

• [2025-05-25] noted another setup tip for building, loading, and testing the roaming version of TabPet in Chrome.

• [2025-05-28] noted another setup tip for building, loading, and testing the roaming version of TabPet in Chrome.

• [2025-05-30] noted another setup tip for building, loading, and testing the roaming version of TabPet in Chrome.

• [2025-06-03] noted another setup tip for building, loading, and testing the roaming version of TabPet in Chrome.

• [2025-06-04] noted another setup tip for building, loading, and testing the roaming version of TabPet in Chrome.

• [2025-06-08] noted another setup tip for building, loading, and testing the roaming version of TabPet in Chrome.

• [2025-06-10] noted another setup tip for building, loading, and testing the roaming version of TabPet in Chrome.

• [2025-06-12] noted another setup tip for building, loading, and testing the roaming version of TabPet in Chrome.

The current interaction model keeps the extension visually light on ordinary pages: the pet roams freely, while the controls stay tucked away until needed.