diff --git a/Chrome-Live-Wallpaper/README.md b/Chrome-Live-Wallpaper/README.md new file mode 100644 index 00000000..cc443437 --- /dev/null +++ b/Chrome-Live-Wallpaper/README.md @@ -0,0 +1,51 @@ +# Live Wallpaper + +**Author:** Sankari + +## Project Idea + +Live Wallpaper is a lightweight Chrome browser extension that allows users to personalize their browser's new-tab page using their own videos or GIFs as animated wallpapers. + +Instead of having a static background, users can choose an existing video or GIF from their device and use it as the background of their new-tab page. + +## Features + +* Set a custom video as a live wallpaper. +* Support animated GIF wallpapers. +* Use the user's own media files. +* Display the selected wallpaper whenever a new tab is opened. +* Simple and lightweight browser extension. + +## Implementation + +The project is implemented as a Chrome browser extension using: + +* **HTML** — Structure of the extension and new-tab page. +* **CSS** — Styling and wallpaper layout. +* **JavaScript** — Wallpaper selection, media handling and extension functionality. +* **Chrome Extension APIs** — Integration with the browser's new-tab experience. + +The extension replaces the default new-tab background with the user's selected video or GIF while keeping the interface simple and distraction-free. + +## How It Works + +1. The user loads the extension in Chrome using Developer Mode. +2. The user selects a video or GIF from their device. +3. The extension stores the selected wallpaper information. +4. When a new tab is opened, the selected media is displayed as the animated background. + +## Installation + +1. Open `chrome://extensions/`. +2. Enable **Developer mode**. +3. Select **Load unpacked**. +4. Select the `Live-Wallpaper` project folder. +5. Open a new tab and use the extension. + +## Working App + +This project is provided as a browser extension and can be run locally using Chrome's **Load unpacked** feature. + +## Author + +**Sankari** diff --git a/Chrome-Live-Wallpaper/manifest.json b/Chrome-Live-Wallpaper/manifest.json new file mode 100644 index 00000000..50d92dc8 --- /dev/null +++ b/Chrome-Live-Wallpaper/manifest.json @@ -0,0 +1,14 @@ +{ + "manifest_version":3, + "name": "Live Wallpaper", + "version": "1.0.0", + "description": "Use your own videos and GIFs as ur new tab wallpaper", + + "chrome_url_overrides": { + "newtab": "newtab.html" + }, + "permissions": [ + "storage", + "unlimitedStorage" + ] +} \ No newline at end of file diff --git a/Chrome-Live-Wallpaper/newtab.css b/Chrome-Live-Wallpaper/newtab.css new file mode 100644 index 00000000..9b4967b4 --- /dev/null +++ b/Chrome-Live-Wallpaper/newtab.css @@ -0,0 +1,8 @@ +* { box-sizing: border-box; } +html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; font-family: Arial, sans-serif; } +#wallpaper { position: fixed; inset: 0; width: 100%; height: 100%; background: center/cover no-repeat; z-index: 0; } +#wallpaper img, #wallpaper video { width: 100%; height: 100%; object-fit: cover; } +.overlay { position: fixed; inset: 0; background: rgb(0 0 0 / 35%); z-index: 1; } +main { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; z-index: 2; text-shadow: 0 2px 8px rgba(0,0,0,.7); opacity: .15; transition: opacity .3s; } +main:hover, body:has(#wallpaper:empty) main { opacity: 1; } +input { margin-top: 15px; } \ No newline at end of file diff --git a/Chrome-Live-Wallpaper/newtab.html b/Chrome-Live-Wallpaper/newtab.html new file mode 100644 index 00000000..ca75ec51 --- /dev/null +++ b/Chrome-Live-Wallpaper/newtab.html @@ -0,0 +1,19 @@ + + + + Live Wallpaper + + + +
+
+
+

Live Wallpaper

+

Make Your new Tab yours.

+ + + +
+ + + \ No newline at end of file diff --git a/Chrome-Live-Wallpaper/newtab.js b/Chrome-Live-Wallpaper/newtab.js new file mode 100644 index 00000000..b0c14a6a --- /dev/null +++ b/Chrome-Live-Wallpaper/newtab.js @@ -0,0 +1,25 @@ +const input = document.getElementById("wallpaperInput"); +const wallpaper = document.getElementById("wallpaper"); +function render(dataUrl, type) { + wallpaper.innerHTML = type.startsWith("video") + ? `` + : ``; +} +chrome.storage.local.get(["wallpaperData", "wallpaperType"], (res) => { + if (res.wallpaperData) render(res.wallpaperData, res.wallpaperType); +}); +input.addEventListener("change", () => { + const file = input.files[0]; + if (!file) return; + const reader = new FileReader(); + reader.onload = () => { + chrome.storage.local.set({ wallpaperData: reader.result, wallpaperType: file.type }); + render(reader.result, file.type); + }; + reader.readAsDataURL(file); +}); +const removeBtn = document.getElementById("removeBtn"); +removeBtn.addEventListener("click", () => { + chrome.storage.local.remove(["wallpaperData", "wallpaperType"]); + wallpaper.innerHTML = ""; +}); \ No newline at end of file