mirror of
https://github.com/tiennm99/WPlace-AutoBOT.git
synced 2026-05-30 22:23:16 +00:00
MiraclePatrickLumowa
616 lines
18 KiB
JavaScript
616 lines
18 KiB
JavaScript
// WPlace AutoBOT Script Manager - Neon Cyberpunk Edition
|
||
// Fixed version with proper content script communication
|
||
|
||
(function() {
|
||
'use strict';
|
||
|
||
console.log('%c🎮 WPlace AutoBOT Script Manager v2.0 - FIXED', 'color: #00ff41; font-weight: bold; font-size: 16px;');
|
||
console.log('%c⚡ Neon Cyberpunk Theme with Content Script Bridge', 'color: #00ff41; font-weight: bold;');
|
||
|
||
// Available scripts configuration
|
||
const AVAILABLE_SCRIPTS = [
|
||
{
|
||
name: 'Auto-Image.js',
|
||
title: 'Auto Image Placer',
|
||
description: 'Automatically place images on the canvas with smart positioning',
|
||
category: 'Automation',
|
||
primary: true
|
||
},
|
||
{
|
||
name: 'Auto-Farm.js',
|
||
title: 'Auto Farm Bot',
|
||
description: 'Automated farming and resource collection',
|
||
category: 'Automation'
|
||
},
|
||
{
|
||
name: 'Auto-Repair.js',
|
||
title: 'Auto Repair Tool',
|
||
description: 'Automatically repair damaged pixels and structures',
|
||
category: 'Utility'
|
||
}
|
||
];
|
||
|
||
// Neon cyberpunk CSS styles
|
||
const NEON_STYLES = `
|
||
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
|
||
|
||
@keyframes neon-glow {
|
||
0%, 100% { box-shadow: 0 0 5px #00ff41, 0 0 10px #00ff41, 0 0 15px #00ff41; }
|
||
50% { box-shadow: 0 0 10px #00ff41, 0 0 20px #00ff41, 0 0 30px #00ff41; }
|
||
}
|
||
|
||
@keyframes pixel-blink {
|
||
0%, 50% { opacity: 1; }
|
||
51%, 100% { opacity: 0.7; }
|
||
}
|
||
|
||
@keyframes scanline {
|
||
0% { transform: translateX(-100%); }
|
||
100% { transform: translateX(100vw); }
|
||
}
|
||
|
||
@keyframes neon-fade-in {
|
||
from { opacity: 0; transform: scale(0.8) translateY(20px); }
|
||
to { opacity: 1; transform: scale(1) translateY(0); }
|
||
}
|
||
|
||
@keyframes neon-fade-out {
|
||
from { opacity: 1; transform: scale(1) translateY(0); }
|
||
to { opacity: 0; transform: scale(0.8) translateY(-20px); }
|
||
}
|
||
|
||
@keyframes backdrop-fade-in {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
@keyframes backdrop-fade-out {
|
||
from { opacity: 1; }
|
||
to { opacity: 0; }
|
||
}
|
||
|
||
.script-manager-backdrop {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background: rgba(26, 26, 46, 0.8);
|
||
backdrop-filter: blur(5px);
|
||
z-index: 999998;
|
||
animation: backdrop-fade-in 0.3s ease-out forwards;
|
||
}
|
||
|
||
.script-manager-container {
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 90%;
|
||
max-width: 600px;
|
||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||
border: 2px solid #00ff41;
|
||
border-radius: 0;
|
||
z-index: 999999;
|
||
font-family: 'Press Start 2P', monospace;
|
||
color: #00ff41;
|
||
box-shadow: 0 0 30px rgba(0, 255, 65, 0.5), inset 0 0 30px rgba(0, 255, 65, 0.1);
|
||
animation: neon-fade-in 0.3s ease-out forwards;
|
||
outline: none;
|
||
}
|
||
|
||
.script-manager-container::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 2px;
|
||
background: linear-gradient(90deg, transparent, #00ff41, transparent);
|
||
z-index: 1;
|
||
pointer-events: none;
|
||
animation: scanline 3s linear infinite;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.script-manager-header {
|
||
background: #16213e;
|
||
border-bottom: 2px solid #00ff41;
|
||
padding: 15px 20px;
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.header-content {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
}
|
||
|
||
.header-icon {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 6px;
|
||
box-shadow: 0 0 15px rgba(0, 255, 65, 0.4);
|
||
transition: all 0.3s ease;
|
||
animation: pixel-blink 3s infinite;
|
||
}
|
||
|
||
.header-icon:hover {
|
||
transform: scale(1.1);
|
||
box-shadow: 0 0 25px rgba(0, 255, 65, 0.6);
|
||
}
|
||
|
||
.script-manager-title {
|
||
color: #00ff41;
|
||
font-size: 14px;
|
||
text-shadow: 0 0 15px #00ff41;
|
||
margin: 0;
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
}
|
||
|
||
.script-manager-close {
|
||
background: transparent;
|
||
border: 2px solid #ff073a;
|
||
color: #ff073a;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 0;
|
||
font-family: 'Press Start 2P', monospace;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
text-shadow: 0 0 10px #ff073a;
|
||
}
|
||
|
||
.script-manager-close:hover {
|
||
background: #ff073a;
|
||
color: #000;
|
||
box-shadow: 0 0 20px rgba(255, 7, 58, 0.6);
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.script-manager-content {
|
||
padding: 20px;
|
||
min-height: 200px;
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.script-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 15px;
|
||
}
|
||
|
||
.script-card {
|
||
background: linear-gradient(135deg, #1a1a2e, #16213e);
|
||
border: 1px solid #00ff41;
|
||
padding: 15px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.script-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.1), transparent);
|
||
transition: left 0.5s ease;
|
||
}
|
||
|
||
.script-card:hover::before {
|
||
left: 100%;
|
||
}
|
||
|
||
.script-card:hover {
|
||
border-color: #39ff14;
|
||
box-shadow: 0 0 20px rgba(0, 255, 65, 0.4);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.script-card.primary {
|
||
border-color: #39ff14;
|
||
box-shadow: 0 0 15px rgba(57, 255, 20, 0.3);
|
||
}
|
||
|
||
.script-card.primary::after {
|
||
content: '⭐ RECOMMENDED';
|
||
position: absolute;
|
||
top: 5px;
|
||
right: 5px;
|
||
background: #39ff14;
|
||
color: #000;
|
||
padding: 2px 5px;
|
||
font-size: 6px;
|
||
text-shadow: none;
|
||
}
|
||
|
||
.script-name {
|
||
color: #00ff41;
|
||
font-size: 10px;
|
||
font-weight: bold;
|
||
text-shadow: 0 0 10px #00ff41;
|
||
margin-bottom: 8px;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.script-description {
|
||
color: #00ff41dd;
|
||
font-size: 7px;
|
||
line-height: 1.4;
|
||
margin-bottom: 10px;
|
||
text-shadow: 0 0 5px #00ff41;
|
||
}
|
||
|
||
.script-category {
|
||
background: rgba(255, 107, 53, 0.2);
|
||
border: 1px solid #ff6b35;
|
||
color: #ff6b35;
|
||
padding: 3px 8px;
|
||
font-size: 7px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
text-shadow: 0 0 5px #ff6b35;
|
||
display: inline-block;
|
||
}
|
||
|
||
.script-manager-footer {
|
||
background: #16213e;
|
||
border-top: 2px solid #00ff41;
|
||
padding: 15px 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.status-text {
|
||
color: #00ff41dd;
|
||
font-size: 8px;
|
||
text-shadow: 0 0 5px #00ff41;
|
||
}
|
||
|
||
.action-buttons {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.neon-btn {
|
||
background: #16213e;
|
||
border: 2px solid #00ff41;
|
||
border-radius: 0;
|
||
color: #00ff41;
|
||
padding: 8px 15px;
|
||
font-family: 'Press Start 2P', monospace;
|
||
font-size: 8px;
|
||
text-transform: uppercase;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
text-shadow: 0 0 8px #00ff41;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.neon-btn:hover {
|
||
background: #00ff41;
|
||
color: #000;
|
||
box-shadow: 0 0 20px rgba(0, 255, 65, 0.6);
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.neon-btn.secondary {
|
||
border-color: #ff6b35;
|
||
color: #ff6b35;
|
||
text-shadow: 0 0 8px #ff6b35;
|
||
}
|
||
|
||
.neon-btn.secondary:hover {
|
||
background: #ff6b35;
|
||
color: #000;
|
||
box-shadow: 0 0 20px rgba(255, 107, 53, 0.6);
|
||
}
|
||
|
||
.loading-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 200px;
|
||
gap: 20px;
|
||
}
|
||
|
||
.loading-spinner {
|
||
width: 40px;
|
||
height: 40px;
|
||
border: 2px solid #16213e;
|
||
border-top: 2px solid #00ff41;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
.loading-text {
|
||
color: #00ff41;
|
||
font-size: 10px;
|
||
text-align: center;
|
||
text-shadow: 0 0 10px #00ff41;
|
||
animation: pixel-blink 1.5s infinite;
|
||
}
|
||
`;
|
||
|
||
// ESC key handler for closing
|
||
function handleEscKey(event) {
|
||
if (event.key === 'Escape') {
|
||
closeScriptManager();
|
||
}
|
||
}
|
||
|
||
// Execute script function with content script communication
|
||
async function executeScript(scriptName) {
|
||
console.group(`%c🚀 Executing ${scriptName}`, 'color: #00ff41; font-weight: bold;');
|
||
|
||
try {
|
||
showLoading(`Launching ${scriptName}...`);
|
||
|
||
console.log('%c🔄 Script Manager → Content Script → Background Script → Execute', 'color: #ff6b35; font-weight: bold;');
|
||
console.log('Script Manager runs in page context, using postMessage bridge to extension');
|
||
|
||
// Create response promise
|
||
const responsePromise = new Promise((resolve, reject) => {
|
||
const timeoutId = setTimeout(() => {
|
||
reject(new Error('Timeout: No response from extension after 10 seconds'));
|
||
}, 10000);
|
||
|
||
const handleResponse = (event) => {
|
||
if (event.source !== window || !event.data) return;
|
||
|
||
if (event.data.type === 'AUTOBOT_SCRIPT_RESPONSE') {
|
||
clearTimeout(timeoutId);
|
||
window.removeEventListener('message', handleResponse);
|
||
|
||
if (event.data.success) {
|
||
resolve(event.data);
|
||
} else {
|
||
reject(new Error(event.data.error || 'Script execution failed'));
|
||
}
|
||
}
|
||
};
|
||
|
||
window.addEventListener('message', handleResponse);
|
||
});
|
||
|
||
// Send message to content script
|
||
console.log(`%c📤 Sending postMessage to content script`, 'color: #06b6d4;');
|
||
console.log(` Script: ${scriptName}`);
|
||
|
||
window.postMessage({
|
||
type: 'AUTOBOT_EXECUTE_SCRIPT',
|
||
scriptName: scriptName,
|
||
source: 'script-manager',
|
||
timestamp: Date.now()
|
||
}, '*');
|
||
|
||
// Wait for response
|
||
const response = await responsePromise;
|
||
|
||
console.log(`%c✅ ${scriptName} executed successfully!`, 'color: #39ff14; font-weight: bold;');
|
||
showSuccess(`${scriptName} launched successfully!`);
|
||
|
||
setTimeout(() => {
|
||
closeScriptManager();
|
||
}, 2000);
|
||
|
||
} catch (error) {
|
||
console.error(`%c❌ Failed to execute ${scriptName}:`, 'color: #ff073a; font-weight: bold;', error);
|
||
showError(`Failed to launch ${scriptName}: ${error.message}`);
|
||
} finally {
|
||
console.groupEnd();
|
||
}
|
||
}
|
||
|
||
// UI Management functions
|
||
function showLoading(message) {
|
||
const container = document.getElementById('script-manager-content');
|
||
if (!container) return;
|
||
|
||
container.innerHTML = `
|
||
<div class="loading-container">
|
||
<div class="loading-spinner"></div>
|
||
<div class="loading-text">${message}</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function showSuccess(message) {
|
||
const statusText = document.querySelector('.status-text');
|
||
if (statusText) {
|
||
statusText.textContent = `✅ ${message}`;
|
||
statusText.style.color = '#39ff14';
|
||
statusText.style.textShadow = '0 0 10px #39ff14';
|
||
}
|
||
}
|
||
|
||
function showError(message) {
|
||
const statusText = document.querySelector('.status-text');
|
||
if (statusText) {
|
||
statusText.textContent = `❌ ${message}`;
|
||
statusText.style.color = '#ff073a';
|
||
statusText.style.textShadow = '0 0 10px #ff073a';
|
||
}
|
||
|
||
// Reset the content to show scripts again
|
||
setTimeout(() => {
|
||
renderScripts();
|
||
}, 3000);
|
||
}
|
||
|
||
// Render scripts grid
|
||
function renderScripts() {
|
||
const container = document.getElementById('script-manager-content');
|
||
if (!container) return;
|
||
|
||
const scriptGrid = AVAILABLE_SCRIPTS.map(script => `
|
||
<div class="script-card ${script.primary ? 'primary' : ''}" onclick="executeScript('${script.name}')">
|
||
<div class="script-name">${script.title}</div>
|
||
<p class="script-description">${script.description}</p>
|
||
<span class="script-category">${script.category}</span>
|
||
</div>
|
||
`).join('');
|
||
|
||
container.innerHTML = `
|
||
<div class="script-grid">
|
||
${scriptGrid}
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
// Close script manager
|
||
function closeScriptManager() {
|
||
const container = document.getElementById('script-manager-container');
|
||
const backdrop = document.getElementById('script-manager-backdrop');
|
||
|
||
if (container) {
|
||
container.style.animation = 'neon-fade-out 0.3s ease-in forwards';
|
||
setTimeout(() => {
|
||
container.remove();
|
||
}, 300);
|
||
}
|
||
|
||
if (backdrop) {
|
||
backdrop.style.animation = 'backdrop-fade-out 0.3s ease-in forwards';
|
||
setTimeout(() => {
|
||
backdrop.remove();
|
||
}, 300);
|
||
}
|
||
|
||
// Remove ESC key listener
|
||
document.removeEventListener('keydown', handleEscKey);
|
||
|
||
console.log('%c👋 Script Manager closed', 'color: #ff6b35;');
|
||
}
|
||
|
||
// Show script manager interface
|
||
function showScriptManager() {
|
||
// Remove any existing manager
|
||
const existing = document.getElementById('script-manager-container');
|
||
if (existing) existing.remove();
|
||
|
||
const existingBackdrop = document.getElementById('script-manager-backdrop');
|
||
if (existingBackdrop) existingBackdrop.remove();
|
||
|
||
console.log('%c🎮 Opening Script Manager with Neon Theme', 'color: #00ff41; font-weight: bold;');
|
||
|
||
// Get icon URL for display
|
||
let iconUrl = '';
|
||
try {
|
||
if (chrome && chrome.runtime && chrome.runtime.getURL) {
|
||
iconUrl = chrome.runtime.getURL('icons/icon32.png');
|
||
console.log('📷 Icon URL:', iconUrl);
|
||
}
|
||
} catch (e) {
|
||
console.log('Extension context not available for icon');
|
||
}
|
||
|
||
// Inject styles
|
||
if (!document.getElementById('script-manager-styles')) {
|
||
const styleElement = document.createElement('style');
|
||
styleElement.id = 'script-manager-styles';
|
||
styleElement.textContent = NEON_STYLES;
|
||
document.head.appendChild(styleElement);
|
||
}
|
||
|
||
// Create backdrop
|
||
const backdrop = document.createElement('div');
|
||
backdrop.id = 'script-manager-backdrop';
|
||
backdrop.className = 'script-manager-backdrop';
|
||
backdrop.addEventListener('click', closeScriptManager);
|
||
|
||
// Create container
|
||
const container = document.createElement('div');
|
||
container.id = 'script-manager-container';
|
||
container.className = 'script-manager-container';
|
||
|
||
container.innerHTML = `
|
||
<div class="script-manager-header">
|
||
<div class="header-content">
|
||
${iconUrl ? `<img src="${iconUrl}" alt="AutoBOT" class="header-icon" onerror="this.style.display='none'">` : ''}
|
||
<h2 class="script-manager-title">⚡ WPlace AutoBOT Script Manager ⚡</h2>
|
||
</div>
|
||
<button class="script-manager-close" onclick="closeScriptManager()">×</button>
|
||
</div>
|
||
<div id="script-manager-content" class="script-manager-content">
|
||
<!-- Scripts will be rendered here -->
|
||
</div>
|
||
<div class="script-manager-footer">
|
||
<div class="status-text">Ready to launch scripts via content script bridge</div>
|
||
<div class="action-buttons">
|
||
<button class="neon-btn secondary" onclick="closeScriptManager()">Cancel</button>
|
||
<button class="neon-btn" onclick="window.location.reload()">Refresh Page</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
// Add to page
|
||
document.body.appendChild(backdrop);
|
||
document.body.appendChild(container);
|
||
|
||
// Render scripts
|
||
renderScripts();
|
||
|
||
// Add ESC key listener
|
||
document.addEventListener('keydown', handleEscKey);
|
||
|
||
// Focus container for accessibility
|
||
container.focus();
|
||
|
||
console.log('%c✅ Script Manager opened successfully', 'color: #39ff14; font-weight: bold;');
|
||
}
|
||
|
||
// Make functions globally available
|
||
window.executeScript = executeScript;
|
||
window.closeScriptManager = closeScriptManager;
|
||
window.showScriptManager = showScriptManager;
|
||
|
||
// Test content script communication
|
||
console.group('%c🔍 Content Script Communication Test', 'color: #ff6b35; font-weight: bold;');
|
||
console.log('Testing if content script can receive postMessage...');
|
||
|
||
// Listen for test response
|
||
const testTimeout = setTimeout(() => {
|
||
console.warn('❌ No response from content script - communication may not work');
|
||
console.groupEnd();
|
||
}, 2000);
|
||
|
||
window.addEventListener('message', function testHandler(event) {
|
||
if (event.data && event.data.type === 'AUTOBOT_CONTENT_SCRIPT_READY') {
|
||
clearTimeout(testTimeout);
|
||
window.removeEventListener('message', testHandler);
|
||
console.log('✅ Content script communication confirmed!');
|
||
console.groupEnd();
|
||
}
|
||
});
|
||
|
||
// Send test message
|
||
window.postMessage({
|
||
type: 'AUTOBOT_TEST_CONNECTION',
|
||
source: 'script-manager'
|
||
}, '*');
|
||
|
||
// Auto-start the script manager
|
||
console.log('%c🎯 Auto-launching Script Manager...', 'color: #00ff41; font-weight: bold;');
|
||
showScriptManager();
|
||
|
||
console.log('%c🚀 WPlace AutoBOT Script Manager v2.0 Ready!', 'color: #39ff14; font-weight: bold; font-size: 16px;');
|
||
})();
|