diff --git a/submissions/Add Effects or skins to your Cursor /Popup.html b/submissions/Add Effects or skins to your Cursor /Popup.html new file mode 100644 index 00000000..22071861 --- /dev/null +++ b/submissions/Add Effects or skins to your Cursor /Popup.html @@ -0,0 +1,114 @@ + + + + Cursor Effects + + + +

Cursor Effects

+ +
+

Cursor Skin

+
+ + + + + +
+
+ +
+

Cursor Effects

+
+ + + + +
+
+ +
+

Effect Settings

+
+ + + + + + + + +
+
+ + + + + +// popup.css +body { + width: 300px; + padding: 15px; + font-family: Arial, sans-serif; +} + +h1 { + text-align: center; + font-size: 18px; + margin-top: 0; + color: #333; +} + +h2 { + font-size: 16px; + margin-bottom: 10px; + color: #555; +} + +.section { + margin-bottom: 20px; + border-bottom: 1px solid #eee; + padding-bottom: 15px; +} + +.section:last-child { + border-bottom: none; + margin-bottom: 0; +} + +.options { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +button { + padding: 8px 12px; + border: 1px solid #ddd; + background: #f5f5f5; + border-radius: 4px; + cursor: pointer; + transition: all 0.2s; +} + +button:hover { + background: #e0e0e0; +} + +button.selected { + background: #4285f4; + color: white; + border-color: #2b6abc; +} + +.settings { + display: grid; + grid-template-columns: 80px 1fr; + gap: 10px; + align-items: center; +} + +input[type="range"] { + width: 100%; +} diff --git a/submissions/Add Effects or skins to your Cursor /manifest.json b/submissions/Add Effects or skins to your Cursor /manifest.json new file mode 100644 index 00000000..fa448873 --- /dev/null +++ b/submissions/Add Effects or skins to your Cursor /manifest.json @@ -0,0 +1,22 @@ +{ + "manifest_version": 3, + "name": "Cursor Effects", + "version": "1.0", + "description": "Add cool effects and skins to your cursor", + "permissions": ["storage"], + "action": { + "default_popup": "popup.html", + "default_icon": { + "16": "images/icon16.png", + "48": "images/icon48.png", + "128": "images/icon128.png" + } + }, + "content_scripts": [ + { + "matches": [""], + "js": ["content.js"], + "css": ["styles.css"] + } + ] +} diff --git a/submissions/Add Effects or skins to your Cursor /popup.js b/submissions/Add Effects or skins to your Cursor /popup.js new file mode 100644 index 00000000..b7fd78d8 --- /dev/null +++ b/submissions/Add Effects or skins to your Cursor /popup.js @@ -0,0 +1,40 @@ + +document.addEventListener('DOMContentLoaded', function() { + // Load saved settings + chrome.storage.sync.get(['cursorSkin', 'cursorEffect', 'effectSize', 'effectColor', 'effectOpacity'], function(data) { + if (data.cursorSkin) { + document.querySelectorAll('.skin-btn').forEach(btn => { + btn.classList.toggle('selected', btn.id === data.cursorSkin); + }); + } + + if (data.cursorEffect) { + document.querySelectorAll('.effect-btn').forEach(btn => { + btn.classList.toggle('selected', btn.id === data.cursorEffect); + }); + } + + if (data.effectSize) document.getElementById('size').value = data.effectSize; + if (data.effectColor) document.getElementById('color').value = data.effectColor; + if (data.effectOpacity) document.getElementById('opacity').value = data.effectOpacity; + }); + + // Cursor skin buttons + document.querySelectorAll('.skin-btn').forEach(button => { + button.addEventListener('click', function() { + document.querySelectorAll('.skin-btn').forEach(btn => btn.classList.remove('selected')); + this.classList.add('selected'); + + const skin = this.id; + chrome.storage.sync.set({cursorSkin: skin}); + + // Send message to content script + chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { + chrome.tabs.sendMessage(tabs[0].id, { + action: "updateCursor", + skin: skin + }); + }); + }); + }); + diff --git a/submissions/Add Effects or skins to your Cursor /readme.md b/submissions/Add Effects or skins to your Cursor /readme.md new file mode 100644 index 00000000..9bd43c07 --- /dev/null +++ b/submissions/Add Effects or skins to your Cursor /readme.md @@ -0,0 +1,18 @@ + +### Features +1. **Cursor Skins** - Change your cursor to different shapes: + - Default + - Pointer + - Heart + - Star + - Sword + +2. **Cursor Effects** - Add dynamic effects to your cursor: + - Trail - Leaves a fading trail as you move + - Sparkle - Creates sparkle particles around your cursor + - Rainbow - Displays colorful rainbow particles as you move + +3. **Customizable Settings**: + - Size - Adjust the size of effects + - Color - Choose any color for your effects + - Opacity - Set the transparency level