Page Flip - Chrome Extension

A modern Chrome extension that allows you to rotate web pages left, right, or reset them to their original orientation. Perfect for viewing content in portrait mode or adjusting page orientation for better readability.

About This Extension

Features

• Rotate Left/Right: Rotate the page in 90-degree increments.
• Reset: Instantly return the page to its original orientation.
• Live Preview: Visual representation of the current rotation angle in the popup.
• Keyboard Shortcuts: Quick access via system-wide commands.
• Smart URL Validation: Protects browser security by disabling on internal pages.
• Responsive Layout: Advanced CSS transformation logic that handles complex website containers without shrinking.

Technical Stack

• Framework: React 19
• Build Tool: Vite 8 with @crxjs/vite-plugin
• Language: TypeScript 6
• Styling: Modern CSS with CSS Variables and mask-image for vector icons.
• Manifest: Version 3 (Latest Extension Standard)

Keyboard Shortcuts

• Ctrl+Insert: Rotate counter-clockwise (left)
• Ctrl+Delete: Rotate clockwise (right)
• Ctrl+Home: Reset rotation

Development

Prerequisites

• Node.js (v18 or higher recommended)
• npm

Setup

1. Clone the repository:

   git clone https://github.com/Quo-len/rotate-extension.git
   cd rotate-extension

2. Install dependencies:

   npm install

3. Start development server (with HMR):

   npm run dev

4. Build for production:

   npm run build

Installation

1. Build the project using npm run build.
2. Open Chrome and navigate to chrome://extensions/.
3. Enable Developer mode (toggle in the top right).
4. Click Load unpacked.
5. Select the dist directory generated by the build process.

File Structure

ts-rotate-extension/
├── public/             # Static assets (icons for manifest)
├── src/
│   ├── assets/         # SVG icons used in the UI
│   ├── background/     # Extension service worker
│   ├── popup/          # React-based popup interface
│   └── utils/          # Core rotation and validation logic
├── manifest.json       # Extension configuration
├── vite.config.ts      # Vite and CRXJS configuration
└── tsconfig.json       # TypeScript configuration

Browser Compatibility

• Chrome (Manifest V3 support required)
• Microsoft Edge
• Brave / Opera / Vivaldi

Limitations

• Cannot rotate Chrome internal pages (e.g., chrome://, Settings, Web Store).
• Rotation is per-tab and resets upon page refresh/navigation.
• Some websites with extremely complex fixed-positioning might require manual scrolling adjustment.