WidePlayer

WidePlayer is a browser extension that makes supported in-feed videos on X appear wider without entering fullscreen. This repository also contains the public landing site for the project.

The extension is built for people who watch video-heavy X feeds and want a larger player while keeping the feed context, scrolling behavior, and native video controls intact.

What Is In This Repository

apps/
  extension/  Browser extension for Chrome, Firefox, and Safari builds
  web/        Next.js landing site deployed with OpenNext for Cloudflare

This is an npm workspaces monorepo. The root package is private and only coordinates workspace commands.

Current Extension Status

WidePlayer for X currently:

• widens supported in-feed videos on x.com
• moves the original player into a wider overlay instead of duplicating the video element
• preserves feed flow with a placeholder while the player is expanded
• supports automatic widening and manual per-video expand/collapse controls
• provides popup settings for auto mode and width percentage
• previews width changes live while the popup slider is dragged
• builds browser-specific outputs for Chrome, Firefox, and Safari

Current limitations:

• detection targets tweet articles with one direct video candidate
• media galleries, unusual nested layouts, and unsupported embeds may be skipped
• Safari output can be generated here, but final Safari packaging still depends on Safari Web Extension tooling on macOS
• there is no dedicated automated test suite yet

For deeper extension implementation details, see apps/extension/README.md.

Requirements

• Node.js 18 or newer
• npm

Getting Started

Install dependencies from the repository root:

npm install

Run the landing site locally:

npm run dev:web

Run the Chrome-focused extension watch flow:

npm run dev:extension

Build And Validation

Build everything:

npm run build

Build one workspace:

npm run build:web
npm run build:extension

Type-check the extension:

npm run typecheck:extension

The extension build generates:

• apps/extension/dist/chrome
• apps/extension/dist/firefox
• apps/extension/dist/safari

Generated output should not be edited by hand.

Packaging Extension Releases

Package every browser target:

npm run package:release --workspace apps/extension

Package one browser target:

npm run package:chrome --workspace apps/extension
npm run package:firefox --workspace apps/extension
npm run package:safari --workspace apps/extension

Release ZIPs are written to apps/extension/release.

Loading The Extension Locally

First build the extension:

npm run build:extension

Chrome:

1. Open chrome://extensions.
2. Enable Developer mode.
3. Choose Load unpacked.
4. Select apps/extension/dist/chrome.

Firefox:

1. Open about:debugging#/runtime/this-firefox.
2. Choose Load Temporary Add-on.
3. Select apps/extension/dist/firefox/manifest.json.

Safari:

1. Build output is generated in apps/extension/dist/safari.
2. Use Safari Web Extension tooling on macOS for final local installation or packaging.

Privacy

The WidePlayer extension does not collect user data.

The landing site uses cookieless Umami analytics for anonymous page traffic. This is separate from the browser extension.

Contributing

Contributions are welcome. Please read CONTRIBUTING.md before opening a pull request.

When changing extension behavior, keep the detailed extension docs in apps/extension/README.md, apps/extension/CHANGELOG.md, and apps/extension/PRD.md aligned with the current state.

Security

Please report security issues privately. See SECURITY.md.

License

WidePlayer is released under the MIT License.