8e1631b340
- Created icon files in 4 sizes: 16x16, 32x32, 48x48, 128x128 - Added icons directory with gradient purple design - Updated manifest.json to include default_icon configuration - Icons will now display properly in Chrome toolbar Required for Chrome Web Store compliance
54 lines
1.7 KiB
HTML
54 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Icon Creator</title>
|
|
</head>
|
|
<body>
|
|
<canvas id="canvas" width="128" height="128"></canvas>
|
|
<script>
|
|
const canvas = document.getElementById('canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
// Crear icono simple con gradiente
|
|
const gradient = ctx.createLinearGradient(0, 0, 128, 128);
|
|
gradient.addColorStop(0, '#667eea');
|
|
gradient.addColorStop(1, '#764ba2');
|
|
|
|
ctx.fillStyle = gradient;
|
|
ctx.fillRect(0, 0, 128, 128);
|
|
|
|
// Agregar texto
|
|
ctx.fillStyle = 'white';
|
|
ctx.font = 'bold 48px Arial';
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'middle';
|
|
ctx.fillText('📦', 64, 64);
|
|
|
|
// Descargar en diferentes tamaños
|
|
function downloadIcon(size) {
|
|
const tempCanvas = document.createElement('canvas');
|
|
tempCanvas.width = size;
|
|
tempCanvas.height = size;
|
|
const tempCtx = tempCanvas.getContext('2d');
|
|
|
|
// Redibujar con el tamaño correcto
|
|
tempCtx.drawImage(canvas, 0, 0, size, size);
|
|
|
|
const link = document.createElement('a');
|
|
link.download = `icon${size}.png`;
|
|
link.href = tempCanvas.toDataURL('image/png');
|
|
link.click();
|
|
}
|
|
|
|
// Crear botones para descargar
|
|
[16, 32, 48, 128].forEach(size => {
|
|
const btn = document.createElement('button');
|
|
btn.textContent = `Download ${size}x${size}`;
|
|
btn.onclick = () => downloadIcon(size);
|
|
document.body.appendChild(btn);
|
|
document.body.appendChild(document.createElement('br'));
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|