feat: artwork extractor

Extension/Script-manager.js

@@ -34,6 +34,13 @@
       description: 'Automated repair and maintenance tasks',
       icon: '🔧',
       category: 'utility'
+    },
+    {
+      name: 'Art-Extractor.js',
+      displayName: '🎨 Art Extractor',
+      description: 'Extract artwork areas to JSON for auto-repair',
+      icon: '🎨',
+      category: 'utility'
     }
   ];  // Neon theme styling
   const NEON_STYLES = `

Extension/auto-image-styles.css

@@ -97,11 +97,9 @@
 
   /* Slider colors - defaults for classic compatibility */
   --wplace-slider-thumb-bg: white;
-  --wplace-slider-track-bg: linear-gradient(
-    to right,
-    var(--wplace-icon-primary) 0%,
-    var(--wplace-icon-secondary) 100%
-  );
+  --wplace-slider-track-bg: linear-gradient(to right,
+      var(--wplace-icon-primary) 0%,
+      var(--wplace-icon-secondary) 100%);
 }
 
 /* Theme classes are now defined in separate files */
@@ -112,6 +110,7 @@
 /* Core animations (shared)  */
 /* ========================= */
 @keyframes neon-glow {
+
   0%,
   100% {
     text-shadow:
@@ -129,6 +128,7 @@
 }
 
 @keyframes pixel-blink {
+
   0%,
   50% {
     opacity: 1;
@@ -247,7 +247,7 @@
   position: fixed;
   top: 20px;
   left: 370px;
-  width: 300px;
+  width: 350px;
   max-height: calc(100vh - 40px);
   padding: 0;
   z-index: 9997;
@@ -1079,7 +1079,7 @@
 /* ========================= */
 /* Responsive tweaks         */
 /* ========================= */
-@media (width <= 768px) {
+@media (width <=768px) {
   #wplace-image-bot-container {
     left: 10px;
     width: calc(100vw - 20px);
@@ -1087,7 +1087,8 @@
   }
 
   #wplace-stats-container {
-    display: none !important; /* hide secondary panel on small screens */
+    display: none !important;
+    /* hide secondary panel on small screens */
   }
 
   .wplace-alert-base {
@@ -1992,12 +1993,12 @@
   transition: all 0.3s ease;
 }
 
-.wplace-toggle-switch input:checked + .wplace-toggle-slider {
+.wplace-toggle-switch input:checked+.wplace-toggle-slider {
   background: var(--wplace-success);
   border-color: var(--wplace-success);
 }
 
-.wplace-toggle-switch input:checked + .wplace-toggle-slider:before {
+.wplace-toggle-switch input:checked+.wplace-toggle-slider:before {
   transform: translateX(20px);
   background: white;
 }
@@ -2022,7 +2023,7 @@
   justify-content: space-between;
   padding: 10px 12px;
   border-bottom: 1px solid var(--wplace-border-color);
-  transition: all 0.2s ease;
+  transition: all 0.3s ease, box-shadow 0.5s ease;
 }
 
 .wplace-account-item:last-child {
@@ -2036,6 +2037,39 @@
 .wplace-account-item.current {
   background: var(--wplace-success)20;
   border-left: 3px solid var(--wplace-success);
+  box-shadow: 0 0 15px rgba(46, 204, 113, 0.6), 
+              0 0 25px rgba(46, 204, 113, 0.4), 
+              0 0 35px rgba(46, 204, 113, 0.2);
+  animation: currentAccountGlow 2s ease-in-out infinite alternate;
+}
+
+@keyframes currentAccountGlow {
+  from {
+    box-shadow: 0 0 15px rgba(46, 204, 113, 0.6), 
+                0 0 25px rgba(46, 204, 113, 0.4), 
+                0 0 35px rgba(46, 204, 113, 0.2);
+  }
+  to {
+    box-shadow: 0 0 20px rgba(46, 204, 113, 0.8), 
+                0 0 30px rgba(46, 204, 113, 0.6), 
+                0 0 40px rgba(46, 204, 113, 0.4);
+  }
+}
+
+@keyframes currentAccountNumberPulse {
+  from {
+    box-shadow: 0 0 10px rgba(46, 204, 113, 0.8);
+    transform: scale(1);
+  }
+  to {
+    box-shadow: 0 0 15px rgba(46, 204, 113, 1.0);
+    transform: scale(1.05);
+  }
+}
+
+.wplace-account-item.next-in-sequence {
+  background: var(--wplace-warning)15;
+  border-left: 3px solid var(--wplace-warning);
 }
 
 .wplace-account-info-item {
@@ -2157,4 +2191,4 @@ input[type="number"] {
 .wplace-notification-interval-input {
   -moz-appearance: textfield;
   appearance: textfield;
-}
+}

Extension/background.js

@@ -41,9 +41,9 @@ async function executeLocalScript(scriptName, tabId) {
     try {
         console.log(`Loading script: ${scriptName}`);
 
-        // Check if we need to inject dependencies first for Auto-Image.js
-        if (scriptName === 'Auto-Image.js') {
-            console.log('🔑 Auto-Image.js detected, ensuring dependencies are loaded first...');
+        // Check if we need to inject dependencies first for Auto-Image.js or Art-Extractor.js
+        if (scriptName === 'Auto-Image.js' || scriptName === 'Art-Extractor.js') {
+            console.log(`🔑 ${scriptName} detected, ensuring dependencies are loaded first...`);
             
             try {
                 // First inject token-manager.js
@@ -777,34 +777,39 @@ async function setCookie(value) {
     const cleaned = value.trim();
     console.log("[bg] setCookie CALLED with:", cleaned);
 
-    chrome.cookies.set(
-        {
-            url: "https://backend.wplace.live/",
-            name: "j",
-            value: cleaned,
-            domain: cookieDomain,
-            path: "/",
-        },
-        (cookie) => {
-            if (chrome.runtime.lastError) {
-                console.error(
-                    "[bg] cookie set error:",
-                    chrome.runtime.lastError.message
-                );
-            } else {
-                console.log("[bg] cookie set result:", cookie);
+    return new Promise((resolve, reject) => {
+        chrome.cookies.set(
+            {
+                url: "https://backend.wplace.live/",
+                name: "j",
+                value: cleaned,
+                domain: cookieDomain,
+                path: "/",
+            },
+            (cookie) => {
+                if (chrome.runtime.lastError) {
+                    console.error(
+                        "[bg] cookie set error:",
+                        chrome.runtime.lastError.message
+                    );
+                    reject(new Error(chrome.runtime.lastError.message));
+                } else {
+                    console.log("[bg] cookie set result:", cookie);
 
-                chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-                    if (tabs.length > 0) {
-                        chrome.tabs.sendMessage(tabs[0].id, {
-                            type: "cookieSet",
-                            value: cleaned,
-                        });
-                    }
-                });
+                    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+                        if (tabs.length > 0) {
+                            chrome.tabs.sendMessage(tabs[0].id, {
+                                type: "cookieSet",
+                                value: cleaned,
+                            });
+                        }
+                    });
+                    
+                    resolve(cookie);
+                }
             }
-        }
-    );
+        );
+    });
 }
 
 async function deleteAccountAtIndex(index) {

Extension/content-script.js

@@ -279,10 +279,19 @@ if (window.location.hostname === 'wplace.live') {
         if (event.data.source !== "my-userscript") return;
         const message = event.data;
         if (message.type === "setCookie" && message.value) {
+            console.log("🍪 Content script received setCookie message:", message);
             chrome.runtime.sendMessage(
                 { type: "setCookie", value: message.value },
                 (response) => {
-                    if (response.status === "ok") {
+                    console.log("📥 Content script received response from background:", response);
+                    // Send response back to userscript
+                    window.postMessage({
+                        type: "setCookieResponse",
+                        status: response ? response.status || 'ok' : 'error',
+                        originalMessage: message
+                    }, "*");
+                    
+                    if (response && response.status === "ok") {
                         console.log("✅ Forwarded token to background.");
                     }
                 }

Extension/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "WPlace AutoBOT Script Launcher",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Launch and manage automation scripts for WPlace",
   "icons": {
     "16": "icons/icon16.png",

Extension/popup/popup.html

@@ -105,7 +105,7 @@
 
         <footer>
             <div class="footer-info">
-                <span>v2.0.1</span>
+                <span>v2.0.2</span>
                 <a href="#" id="settingsBtn">Settings</a>
             </div>
         </footer>
@@ -114,4 +114,3 @@
     <script src="popup.js"></script>
 </body>
 </html>
-

Extension/popup/popup.js

@@ -26,6 +26,12 @@ const AVAILABLE_SCRIPTS = [
         displayName: '🔧 Auto Repair',
         description: 'Automated repair and maintenance tasks',
         filename: 'Auto-Repair.js'
+    },
+    {
+        name: 'Art-Extractor.js',
+        displayName: '🎨 Art Extractor',
+        description: 'Extract artwork areas from canvas and save as JSON files',
+        filename: 'Art-Extractor.js'
     }
 ];
 

Extension/scripts/Auto-Repair.js

@@ -364,10 +364,14 @@
 
   // NUEVA LÓGICA DE INYECCIÓN - ACTUALIZADA DESDE new.txt
   function inject(callback) {
-    const script = document.createElement('script');
-    script.textContent = `(${callback})();`;
-    document.documentElement?.appendChild(script);
-    script.remove();
+    try {
+      const script = document.createElement('script');
+      script.textContent = `(${callback})();`;
+      document.documentElement?.appendChild(script);
+      script.remove();
+    } catch (error) {
+      console.error('❌ Injection error:', error);
+    }
   }
 
   inject(() => {
@@ -593,7 +597,7 @@
         }
       } catch { }
     }
-    console.error(`❌ Could not find Pawtect chunk: `, error);
+    console.error(`❌ Could not find Pawtect chunk with string: ${str}`);
   }
 
   // Audio notification system
@@ -1788,11 +1792,10 @@
               currentRgb: currentPixel.slice(0, 3),
               isDamagedTransparent: false
             });
-              wrongColorPixelsDetected++;
+            wrongColorPixelsDetected++;
 
-              if (!state.autonomousMode || wrongColorPixelsDetected <= 10) {
-                Utils.addDebugLog(`Color damage at (${x},${y}): expected color ${targetColor.id}, found color ${currentColor.id}`, 'warning');
-              }
+            if (!state.autonomousMode || wrongColorPixelsDetected <= 10) {
+              Utils.addDebugLog(`Color damage at (${x},${y}): expected color ${targetColor.id}, found color ${currentColor.id}`, 'warning');
             }
           }
 

Extension/themes/acrylic.css

@@ -15,8 +15,7 @@
     border-radius: var(--wplace-radius);
     box-shadow: none;
     backdrop-filter: var(--wplace-backdrop);
-    border: var(--wplace-border-width) var(--wplace-border-style)
-        var(--wplace-border-color);
+    border: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-border-color);
     min-width: 250px;
 }
 
@@ -41,8 +40,7 @@
     border-radius: var(--wplace-radius);
     box-shadow: none;
     backdrop-filter: var(--wplace-backdrop);
-    border: var(--wplace-border-width) var(--wplace-border-style)
-        var(--wplace-border-color);
+    border: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-border-color);
     min-width: 300px;
 }
 
@@ -54,7 +52,7 @@
 .wplace-theme-acrylic .wplace-content {
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    /* gap: 10px; */
     padding: 10px;
 }
 
@@ -71,8 +69,7 @@
     border-radius: var(--wplace-radius);
     box-shadow: none;
     backdrop-filter: var(--wplace-backdrop);
-    border: var(--wplace-border-width) var(--wplace-border-style)
-        var(--wplace-border-color);
+    border: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-border-color);
 }
 
 .wplace-theme-acrylic .wplace-stats {
@@ -91,8 +88,7 @@
     border-radius: var(--wplace-radius) !important;
     box-shadow: none !important;
     backdrop-filter: var(--wplace-backdrop) !important;
-    border: var(--wplace-border-width) var(--wplace-border-style)
-        var(--wplace-border-color) !important;
+    border: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-border-color) !important;
     max-width: 400px !important;
 }
 
@@ -630,10 +626,10 @@
 
 /* Account switching UI styles */
 .wplace-theme-acrylic .wplace-section {
-    margin: 15px 0;
+    margin: 5px;
     border-radius: var(--wplace-radius);
     background: rgba(255, 255, 255, 0.08);
-    padding: 15px;
+    padding: 5px;
     border: 1px solid rgba(255, 255, 255, 0.15);
     backdrop-filter: var(--wplace-backdrop);
 }
@@ -644,7 +640,7 @@
     gap: 8px;
     font-weight: 600;
     color: var(--wplace-text);
-    margin-bottom: 10px;
+    margin: 2px;
     font-size: 14px;
 }
 
@@ -688,55 +684,57 @@
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }
 
-.wplace-theme-acrylic .wplace-switch input:checked + .wplace-slider-round {
+.wplace-theme-acrylic .wplace-switch input:checked+.wplace-slider-round {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
 
-.wplace-theme-acrylic .wplace-switch input:checked + .wplace-slider-round:before {
+.wplace-theme-acrylic .wplace-switch input:checked+.wplace-slider-round:before {
     transform: translateX(26px);
 }
 
 /* Account list container */
 .wplace-theme-acrylic .accounts-list-container {
-    max-height: 200px;
+    max-height: 500px;
     overflow-y: auto;
-    margin-top: 10px;
+    /* margin-top: 10px; */
     padding: 0 6px;
 }
 
 /* Individual account item */
 .wplace-theme-acrylic .wplace-account-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 6px 8px;
-  margin: 4px 0;
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  transition: all 0.3s ease;
-  backdrop-filter: blur(10px);
-  position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 6px 8px;
+    margin: 4px 0;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    transition: all 0.3s ease;
+    backdrop-filter: blur(10px);
+    position: relative;
 }
 
 /* Account ordering number */
 .wplace-theme-acrylic .wplace-account-number {
-  position: absolute;
-  top: 3px;
-  left: 3px;
-  width: 16px;
-  height: 16px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 9px;
-  font-weight: bold;
-  z-index: 1;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-}.wplace-theme-acrylic .wplace-account-item:hover {
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    width: 16px;
+    height: 16px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 9px;
+    font-weight: bold;
+    z-index: 1;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.wplace-theme-acrylic .wplace-account-item:hover {
     background: rgba(255, 255, 255, 0.12);
     border-color: rgba(255, 255, 255, 0.3);
     transform: translateY(-1px);
@@ -751,9 +749,11 @@
 
 /* Account details */
 .wplace-theme-acrylic .wplace-account-details {
-  flex: 1;
-  margin-left: 25px;
-}.wplace-theme-acrylic .wplace-account-name {
+    flex: 1;
+    margin-left: 25px;
+}
+
+.wplace-theme-acrylic .wplace-account-name {
     font-weight: 600;
     color: var(--wplace-text);
     font-size: 13px;
@@ -779,4 +779,4 @@
 
 .wplace-theme-acrylic .wplace-account-stats .fas.fa-tint {
     color: #00bfff;
-}
+}