ColorSplash

Sulagna-Dutta-Roy · Jun 10, 2024 · 4b768b7 · 4b768b7
1 parent 657dea2
commit 4b768b7
Show file tree

Hide file tree

Showing 4 changed files with 214 additions and 0 deletions.
diff --git a/Color Splash/manifest.json b/Color Splash/manifest.json
@@ -0,0 +1,19 @@
+{
+  "manifest_version": 3,
+  "name": "ColorSplash",
+  "version": "1.2",
+  "description": "An interactive Chrome extension to change and save the background colors of the current page with advanced features.",
+  "permissions": [
+    "activeTab",
+    "scripting",
+    "storage"
+  ],
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "icons/icon16.png",
+      "48": "icons/icon48.png",
+      "128": "icons/icon128.png"
+    }
+  }
+}
diff --git a/Color Splash/popup.css b/Color Splash/popup.css
@@ -0,0 +1,73 @@
+body {
+  width: 300px;
+  height: 400px;
+  font-family: 'Roboto', sans-serif;
+  text-align: center;
+  background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
+  color: #333;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.container {
+  width: 90%;
+}
+
+h1 {
+  font-size: 24px;
+  margin-bottom: 20px;
+  color: #005F73;
+}
+
+.color-picker,
+.gradient-picker {
+  margin-bottom: 15px;
+}
+
+input[type="color"] {
+  padding: 5px;
+  margin-right: 5px;
+  border: none;
+  cursor: pointer;
+}
+
+.btn {
+  padding: 10px 15px;
+  margin: 5px;
+  background-color: #008CBA;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.3s;
+}
+
+.btn:hover {
+  background-color: #005F73;
+  transform: scale(1.05);
+}
+
+#favorites {
+  margin-top: 20px;
+}
+
+#favoriteColors {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.favorite-color {
+  width: 30px;
+  height: 30px;
+  margin: 5px;
+  cursor: pointer;
+  border-radius: 50%;
+  transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.favorite-color:hover {
+  transform: scale(1.2);
+  box-shadow: 0 0 10px rgba(0,0,0,0.3);
+}
diff --git a/Color Splash/popup.html b/Color Splash/popup.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ColorSplash</title>
+  <link rel="stylesheet" href="popup.css">
+</head>
+<body>
+  <div class="container">
+    <h1>ColorSplash</h1>
+    <div class="color-picker">
+      <input type="color" id="colorInput" value="#ffffff">
+      <button id="applyColor" class="btn">Apply Color</button>
+    </div>
+    <button id="randomColor" class="btn">Random Color</button>
+    <button id="saveColor" class="btn">Save Color</button>
+    <div class="gradient-picker">
+      <input type="color" id="gradientStart" value="#ff0000">
+      <input type="color" id="gradientEnd" value="#0000ff">
+      <button id="applyGradient" class="btn">Apply Gradient</button>
+    </div>
+    <div id="favorites">
+      <h2>Favorites</h2>
+      <div id="favoriteColors"></div>
+    </div>
+  </div>
+  <script src="popup.js"></script>
+</body>
+</html>
diff --git a/Color Splash/popup.js b/Color Splash/popup.js
@@ -0,0 +1,92 @@
+document.getElementById('applyColor').addEventListener('click', () => {
+  const color = document.getElementById('colorInput').value;
+  changeBackgroundColor(color);
+});
+
+document.getElementById('randomColor').addEventListener('click', () => {
+  const color = getRandomColor();
+  changeBackgroundColor(color);
+});
+
+document.getElementById('applyGradient').addEventListener('click', () => {
+  const startColor = document.getElementById('gradientStart').value;
+  const endColor = document.getElementById('gradientEnd').value;
+  changeBackgroundGradient(startColor, endColor);
+});
+
+document.getElementById('saveColor').addEventListener('click', () => {
+  const color = document.getElementById('colorInput').value;
+  saveFavoriteColor(color);
+});
+
+document.addEventListener('DOMContentLoaded', loadFavoriteColors);
+
+function changeBackgroundColor(color) {
+  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+    chrome.scripting.executeScript({
+      target: { tabId: tabs[0].id },
+      function: setPageBackgroundColor,
+      args: [color]
+    });
+  });
+}
+
+function setPageBackgroundColor(color) {
+  document.body.style.backgroundColor = color;
+}
+
+function changeBackgroundGradient(startColor, endColor) {
+  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+    chrome.scripting.executeScript({
+      target: { tabId: tabs[0].id },
+      function: setPageBackgroundGradient,
+      args: [startColor, endColor]
+    });
+  });
+}
+
+function setPageBackgroundGradient(startColor, endColor) {
+  document.body.style.backgroundImage = `linear-gradient(${startColor}, ${endColor})`;
+}
+
+function getRandomColor() {
+  const letters = '0123456789ABCDEF';
+  let color = '#';
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+}
+
+function saveFavoriteColor(color) {
+  chrome.storage.sync.get(['favoriteColors'], (result) => {
+    let favoriteColors = result.favoriteColors || [];
+    if (!favoriteColors.includes(color)) {
+      favoriteColors.push(color);
+      chrome.storage.sync.set({ favoriteColors }, () => {
+        displayFavoriteColors(favoriteColors);
+      });
+    }
+  });
+}
+
+function loadFavoriteColors() {
+  chrome.storage.sync.get(['favoriteColors'], (result) => {
+    const favoriteColors = result.favoriteColors || [];
+    displayFavoriteColors(favoriteColors);
+  });
+}
+
+function displayFavoriteColors(favoriteColors) {
+  const favoriteColorsContainer = document.getElementById('favoriteColors');
+  favoriteColorsContainer.innerHTML = '';
+  favoriteColors.forEach(color => {
+    const colorDiv = document.createElement('div');
+    colorDiv.className = 'favorite-color';
+    colorDiv.style.backgroundColor = color;
+    colorDiv.addEventListener('click', () => {
+      changeBackgroundColor(color);
+    });
+    favoriteColorsContainer.appendChild(colorDiv);
+  });
+}