Sinema Modu

Cinema Mode is a browser extension that keeps the part of a web page you want to read lit "on stage" while the rest of the page fades to black. I wrote it for Chrome and Firefox with Manifest V3 and developed it together with Cem Emir Yüksektepe. It works fully offline, collects no data and makes no network requests.

Purpose

When I read a long article, a document or a code sample, the menus, recommendation boxes and moving elements around the edges kept pulling my attention away. Reader modes often break the page layout and lose tables or code blocks. I wanted a tool that leaves the page untouched and simply highlights the spot I want to focus on, darkening everything else the way a cinema does. Cinema Mode grew out of that need.

How it works

When you press Alt+Shift+S or click the toolbar icon, the extension enters picking mode. As you move the mouse, the element under the cursor is previewed live: the dimming is applied at half strength and the area under the pointer stays bright. When you click an area, it stays on stage and the rest of the screen goes dark.

The dimming is a single fixed layer. A hole with rounded corners, matching the size of the selected element, is cut into that layer with clip-path, a CSS property that shows only the part of an element inside a given shape. Inside the hole, clicks and text selection pass through to the page, while the dark area blocks them. When you scroll or the element changes size, the hole glides smoothly to its new position. If the selected element is removed from the page, the mode closes on its own.

Key features

• The W and S keys expand the selection to the parent element or shrink it back.
• The Q and E keys make the dimming darker or lighter.
• Pressing R or clicking the dark area lets you pick a new area.
• The C key centers the selected area on the screen.
• The comma and period keys decrease or increase the padding around the area.
• The H key hides the small on-screen help panel, and Esc exits.
• An options page, opened by right-clicking the icon, lets you change the dimming and padding, and the changes apply instantly to open tabs.
• A context menu entry toggles the mode from the page itself.
• The interface is available in English and Turkish.

Technical stack

The extension has separate folders for Chrome and Firefox. The Chrome build runs with a service worker, while the Firefox build uses Firefox's promise-based browser.* API and an event page. The Firefox build is also declared for Android.

The extension's own interface lives inside Shadow DOM, a browser feature that isolates a component's styles from the rest of the page. That way the visited site's CSS cannot break the extension's look, and the extension does not interfere with the site. Drawing runs in a requestAnimationFrame loop, and the hole's movement is calculated by taking a small step toward the target on every frame.

In the first version the content script was loaded into every page automatically, which required access to all sites. I changed that later. The script is now injected into a tab only when you press the shortcut, through the activeTab permission, so broad host permissions are no longer needed and store review became simpler.

Packaging is done by a shell script that builds separate zip files for Chrome and Firefox and stamps each package with a version number taken from the date and time.

Privacy and security

The extension does not read, record or send the content of the pages you visit. The only data it stores are your two visual preferences, the dimming level and the padding, and they stay in your own browser's local storage. The requested permissions are limited to activeTab, scripting, storage and contextMenus, and the Firefox manifest explicitly declares that no data is collected.

Use cases

• It is handy for reading long articles, news or documents without distraction.
• It can draw an audience's attention to one part of a page during screen sharing or a presentation.
• It helps users who find it hard to focus on crowded pages.
• It reduces surrounding noise when you study code samples, tables or forms one at a time.

Status

We have prepared store texts, promotional images and screenshots for both the Chrome Web Store and the Firefox add-ons site. The extension can be loaded in developer mode in both browsers.