Chat Picture-in-Picture for Facebook Messenger

Project overview

Chat Picture-in-Picture is a Chrome Manifest V3 extension that displays a Facebook Messenger conversation already open on the page in a compact Document Picture-in-Picture (PiP) window. You can read incoming messages and reply from PiP while keeping another task on screen.

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

Why this project exists

A Facebook chat normally stays inside its browser tab. When you work on a document, study, or watch a video, the conversation disappears from view. Chat PiP gives an existing conversation its own small window, reducing the need to switch back to Facebook.

Chat PiP in everyday use

Watch a movie and stay in touch. Keep the conversation visible beside the video and reply when a message arrives.

Continue working while you chat. Keep your document or project on screen while the separate chat window stays ready for a quick reply.

How it works

1. Open a chat on www.facebook.com or web.facebook.com.
2. Click the floating Chat PiP button or use the extension popup to open the separate window.
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.

Main features

• Follow conversations: View text messages, replies, images, GIFs, stickers, and available typing or read indicators; switch between chat windows already open on Facebook.
• Reply without leaving your task: 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.
• Manage the view: Reopen detected minimized chats, refresh messages, set a history limit, and optionally synchronize scrolling with the Facebook chat.
• Make the window yours: Choose a preset theme or detected Messenger colors, hide the interface without closing PiP, and control the floating button from the popup.
• Two interface languages: English and Vietnamese.

Technology

Built with JavaScript, HTML, CSS, JSON, Chrome Manifest V3, content scripts, and the Document Picture-in-Picture API. Content scripts detect Facebook chat windows and coordinate actions with the PiP interface. Preferences and the selected theme are saved in chrome.storage.local.

Privacy and requirements

The extension reads the open Facebook chat to show it in PiP and sends your actions through Facebook's existing interface. The project source does not include its own messaging server or analytics service. Facebook handles the messages under its own privacy practices; content in PiP may also request resources from outside websites.

• Use Chrome or another Chromium-based browser with Document Picture-in-Picture support, and keep a Facebook tab open with at least one chat window.
• Set Facebook's display language to English or Vietnamese. Other display languages are currently unsupported.
• Play video and voice messages in the Facebook tab; PiP shows placeholders for those message types.
• Facebook page changes can affect chat detection and controls until the extension is updated.

Get started

Install from the Chrome Web Store, open a Facebook chat on a supported page, then click the floating Chat PiP button.