Sulagna-Dutta-Roy · taneeshaa15 · Jun 10, 2024 · Jun 10, 2024
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);
+  });
+}
diff --git a/Quick Text Formatter/background.js b/Quick Text Formatter/background.js
@@ -0,0 +1,7 @@
+chrome.runtime.onMessage.addListener((message) => {
+    if (message.action === 'getSelection') {
+        chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+            chrome.tabs.sendMessage(tabs[0].id, { selection: window.getSelection().toString() });
+        });
+    }
+});
diff --git a/Quick Text Formatter/manifest.json b/Quick Text Formatter/manifest.json
@@ -0,0 +1,14 @@
+{
+    "manifest_version": 3,
+    "name": "Quick Text Formatter",
+    "version": "1.0",
+    "description": "Format your text quickly and easily!",
+    "permissions": ["activeTab"],
+    "background": {
+      "scripts": ["background.js"]
+    },
+    "browser_action": {
+      "default_popup": "popup.html",
+      "default_title": "Quick Text Formatter"
+    }
+  }
diff --git a/Quick Text Formatter/popup.html b/Quick Text Formatter/popup.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Quick Text Formatter</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Quick Text Formatter</h1>
+        <button id="bold">Bold</button>
+        <button id="italic">Italic</button>
+        <button id="strikethrough">Strikethrough</button>
+        <button id="bullet-list">Bullet List</button>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Quick Text Formatter/script.js b/Quick Text Formatter/script.js
@@ -0,0 +1,15 @@
+const boldButton = document.getElementById('bold');
+const italicButton = document.getElementById('italic');
+const strikethroughButton = document.getElementById('strikethrough');
+const bulletListButton = document.getElementById('bullet-list');
+
+function formatText(format) {
+    chrome.tabs.executeScript(null, {
+        code: document.getSelection().toString().wrappedBy('${format}')
+    });
+}
+
+boldButton.addEventListener('click', () => formatText('<b></b>'));
+italicButton.addEventListener('click', () => formatText('<i></i>'));
+strikethroughButton.addEventListener('click', () => formatText('<s></s>'));
+bulletListButton.addEventListener('click', () => formatText('<ul><li></li></ul>'));
diff --git a/Quick Text Formatter/style.css b/Quick Text Formatter/style.css
@@ -0,0 +1,39 @@
+body {
+    font-family: sans-serif;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background-color: #f5f5f5;
+}
+
+.container {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 5px;
+    text-align: center;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    max-width: 300px; /* Ensure responsiveness on smaller screens */
+}
+
+h1 {
+    font-size: 20px;
+    margin-bottom: 10px;
+    color: #333;
+}
+
+button {
+    background-color: #4CAF50;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+    margin: 5px;
+}
+
+button:hover {
+    background-color: #3e8e41;
+}