From 657dea2334542da7f0d580e172123941a2e8eb3a Mon Sep 17 00:00:00 2001 From: taneeshaa15 Date: Mon, 10 Jun 2024 17:14:07 +0530 Subject: [PATCH 1/2] Quick Text Fomatter --- Quick Text Formatter/background.js | 7 ++++++ Quick Text Formatter/manifest.json | 14 +++++++++++ Quick Text Formatter/popup.html | 20 +++++++++++++++ Quick Text Formatter/script.js | 15 ++++++++++++ Quick Text Formatter/style.css | 39 ++++++++++++++++++++++++++++++ 5 files changed, 95 insertions(+) create mode 100644 Quick Text Formatter/background.js create mode 100644 Quick Text Formatter/manifest.json create mode 100644 Quick Text Formatter/popup.html create mode 100644 Quick Text Formatter/script.js create mode 100644 Quick Text Formatter/style.css diff --git a/Quick Text Formatter/background.js b/Quick Text Formatter/background.js new file mode 100644 index 00000000..bd30cc64 --- /dev/null +++ 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() }); + }); + } +}); \ No newline at end of file diff --git a/Quick Text Formatter/manifest.json b/Quick Text Formatter/manifest.json new file mode 100644 index 00000000..5c609e65 --- /dev/null +++ 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" + } + } \ No newline at end of file diff --git a/Quick Text Formatter/popup.html b/Quick Text Formatter/popup.html new file mode 100644 index 00000000..08958cce --- /dev/null +++ b/Quick Text Formatter/popup.html @@ -0,0 +1,20 @@ + + + + + + Quick Text Formatter + + + +
+

Quick Text Formatter

+ + + + +
+ + + + \ No newline at end of file diff --git a/Quick Text Formatter/script.js b/Quick Text Formatter/script.js new file mode 100644 index 00000000..7aac5062 --- /dev/null +++ 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('')); +italicButton.addEventListener('click', () => formatText('')); +strikethroughButton.addEventListener('click', () => formatText('')); +bulletListButton.addEventListener('click', () => formatText('')); \ No newline at end of file diff --git a/Quick Text Formatter/style.css b/Quick Text Formatter/style.css new file mode 100644 index 00000000..b80e3fbc --- /dev/null +++ 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; +} \ No newline at end of file From 4b768b79e72e30e08111f0f0271dddd4ba9e719c Mon Sep 17 00:00:00 2001 From: taneeshaa15 Date: Mon, 10 Jun 2024 18:29:11 +0530 Subject: [PATCH 2/2] ColorSplash --- Color Splash/manifest.json | 19 ++++++++ Color Splash/popup.css | 73 ++++++++++++++++++++++++++++++ Color Splash/popup.html | 30 +++++++++++++ Color Splash/popup.js | 92 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 214 insertions(+) create mode 100644 Color Splash/manifest.json create mode 100644 Color Splash/popup.css create mode 100644 Color Splash/popup.html create mode 100644 Color Splash/popup.js diff --git a/Color Splash/manifest.json b/Color Splash/manifest.json new file mode 100644 index 00000000..b27f6cff --- /dev/null +++ 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 new file mode 100644 index 00000000..93c60d2b --- /dev/null +++ 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 new file mode 100644 index 00000000..2f8e7905 --- /dev/null +++ b/Color Splash/popup.html @@ -0,0 +1,30 @@ + + + + + + ColorSplash + + + +
+

ColorSplash

+
+ + +
+ + +
+ + + +
+
+

Favorites

+
+
+
+ + + diff --git a/Color Splash/popup.js b/Color Splash/popup.js new file mode 100644 index 00000000..db601ddf --- /dev/null +++ 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); + }); +}