From 657dea2334542da7f0d580e172123941a2e8eb3a Mon Sep 17 00:00:00 2001 From: taneeshaa15 Date: Mon, 10 Jun 2024 17:14:07 +0530 Subject: [PATCH 1/3] 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/3] 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); + }); +} From 6aba1f5ee98254e2c484d8399f970e42588c3cc8 Mon Sep 17 00:00:00 2001 From: taneeshaa15 Date: Mon, 10 Jun 2024 18:37:37 +0530 Subject: [PATCH 3/3] quick text formatter --- Color Splash/manifest.json | 19 -------- Color Splash/popup.css | 73 ------------------------------ Color Splash/popup.html | 30 ------------- Color Splash/popup.js | 92 -------------------------------------- 4 files changed, 214 deletions(-) delete mode 100644 Color Splash/manifest.json delete mode 100644 Color Splash/popup.css delete mode 100644 Color Splash/popup.html delete mode 100644 Color Splash/popup.js diff --git a/Color Splash/manifest.json b/Color Splash/manifest.json deleted file mode 100644 index b27f6cff..00000000 --- a/Color Splash/manifest.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "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 deleted file mode 100644 index 93c60d2b..00000000 --- a/Color Splash/popup.css +++ /dev/null @@ -1,73 +0,0 @@ -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 deleted file mode 100644 index 2f8e7905..00000000 --- a/Color Splash/popup.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - ColorSplash - - - -
-

ColorSplash

-
- - -
- - -
- - - -
-
-

Favorites

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