Chat Picture-in-Picture for Facebook Messenger

Project overview

Chat Picture-in-Picture is a Chrome extension that moves an already-open Facebook Messenger conversation into a small, interactive Document Picture-in-Picture window. You can keep the chat visible and reply while working, studying, watching a video, or browsing another tab.

The images in this case study are AI-generated concept illustrations. The actual interface depends on the browser, settings, and Facebook's current layout.

The problem it solves

A Facebook chat normally stays inside its tab. When you switch to a document, another app, or a full-screen video, the conversation disappears from view. Chat PiP keeps the open conversation in its own compact window so you can follow messages without repeatedly switching back.

How it works

1. Open www.facebook.com or web.facebook.com and open a chat window.
2. Click the floating Chat PiP button or launch the window from the extension popup.
3. Read available messages and use the PiP controls to reply through the existing Facebook chat interface.
4. Close the PiP window from the window itself or the extension popup.

Key features

• Follow conversations: View text, replies, images, GIFs, stickers, and available typing or read indicators; switch between chats already open on the Facebook page.
• Reply from PiP: Send text, reply to a displayed message, insert emoji or stickers, and send images with an optional caption. Each open chat keeps its own draft during the PiP session.
• Stay in control: Refresh messages, reopen detected minimized chats, set a message history limit, and optionally sync scrolling with Facebook.
• Customize the window: Choose a preset theme or detected Messenger colors, hide the PiP interface without closing the window, and control the floating button from the popup.
• Two interface languages: English and Vietnamese.

Technology and implementation

Built with plain JavaScript, HTML, CSS, JSON, Chrome Manifest V3, content scripts, and the Document Picture-in-Picture API. Content scripts detect chat windows on the supported Facebook pages and coordinate actions with the PiP interface. Preferences and themes are stored with chrome.storage.local.

Requirements and current limits

• Requires Chrome or another Chromium-based browser with Document Picture-in-Picture support and a Facebook tab with at least one open chat window.
• Facebook's display language must be English or Vietnamese; other Facebook display languages are currently unsupported.
• Video and voice messages show placeholders in PiP and must be played in the Facebook tab.
• Changes to Facebook's page structure may affect chat detection and controls until the extension is updated.

Privacy

The extension reads the open Facebook chat to display it in PiP and sends your actions through Facebook's existing interface. It stores preferences and the selected theme locally; the project source does not include its own messaging server or analytics service. Facebook handles the messages under its own privacy practices.

Get started

Install the extension from the Chrome Web Store, open a chat on www.facebook.com or web.facebook.com, and click the floating Chat PiP button.