josharsh · Sana-17-Cipher · Aug 23, 2026 · Aug 23, 2026
diff --git a/Chrome-Live-Wallpaper/README.md 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
@@ -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"
+    ]
+}
diff --git a/Chrome-Live-Wallpaper/newtab.css 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; }
diff --git a/Chrome-Live-Wallpaper/newtab.html b/Chrome-Live-Wallpaper/newtab.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Live Wallpaper</title>
+    <link rel="stylesheet" href="newtab.css">
+    </head>
+    <body>
+        <div id="wallpaper"></div>
+        <div class="overlay"></div>
+        <main>
+            <h1> Live Wallpaper</h1>
+            <p>Make Your new Tab yours.</p>
+            <label for="wallpaperInput">Choose Wallpaper:</label>
+            <input id="wallpaperInput" type="file" accept="image/*, video/*">
+            <button id="removeBtn">Remove Wallpaper</button>
+        </main>
+        <script src="newtab.js"></script>
+    </body>
+</html>
diff --git a/Chrome-Live-Wallpaper/newtab.js 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")
+    ? `<video src="${dataUrl}" autoplay muted loop></video>`
+    : `<img src="${dataUrl}">`;
+}
+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 = "";
+});