Skip to content

Commit 0e46fab

Browse files
alanboyalanboy
committed
added icons; titles; and other stuff
1 parent c77d4a4 commit 0e46fab

8 files changed

Lines changed: 240 additions & 13 deletions

File tree

‎tab-extension/icons/generate-png-icons.html‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Generate PNG Icons</title>
7+
<style>
8+
body {
9+
font-family: system-ui, -apple-system, sans-serif;
10+
max-width: 800px;
11+
margin: 40px auto;
12+
padding: 20px;
13+
background: #f5f5f5;
14+
}
15+
.container {
16+
background: white;
17+
padding: 30px;
18+
border-radius: 12px;
19+
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
20+
}
21+
h1 {
22+
color: #333;
23+
margin-bottom: 10px;
24+
}
25+
.instructions {
26+
background: #e3f2fd;
27+
padding: 15px;
28+
border-radius: 8px;
29+
margin: 20px 0;
30+
color: #1565c0;
31+
}
32+
.icons-preview {
33+
display: flex;
34+
gap: 30px;
35+
margin: 30px 0;
36+
align-items: flex-start;
37+
}
38+
.icon-item {
39+
text-align: center;
40+
}
41+
.icon-item canvas {
42+
border: 1px solid #ddd;
43+
border-radius: 4px;
44+
margin-bottom: 10px;
45+
}
46+
button {
47+
background: #10b981;
48+
color: white;
49+
border: none;
50+
padding: 12px 24px;
51+
border-radius: 6px;
52+
font-size: 16px;
53+
cursor: pointer;
54+
margin-right: 10px;
55+
}
56+
button:hover {
57+
background: #059669;
58+
}
59+
.success {
60+
background: #d4edda;
61+
color: #155724;
62+
padding: 15px;
63+
border-radius: 8px;
64+
margin-top: 20px;
65+
display: none;
66+
}
67+
</style>
68+
</head>
69+
<body>
70+
<div class="container">
71+
<h1>🎨 Tab Manager Icon Generator</h1>
72+
<p>Generate PNG icons for your Chrome extension</p>
73+
74+
<div class="instructions">
75+
<strong>Instructions:</strong>
76+
<ol>
77+
<li>Click "Generate Icons" to create the PNG files</li>
78+
<li>Click each "Download" button to save the icons</li>
79+
<li>Save them in the <code>icons/</code> folder with the correct names</li>
80+
<li>Reload your extension in Chrome</li>
81+
</ol>
82+
</div>
83+
84+
<button onclick="generateIcons()">Generate Icons</button>
85+
86+
<div class="icons-preview" id="preview"></div>
87+
88+
<div class="success" id="success">
89+
✓ Icons generated! Click the download buttons above to save them.
90+
</div>
91+
</div>
92+
93+
<script>
94+
function drawIcon(canvas, size) {
95+
const ctx = canvas.getContext('2d');
96+
const scale = size / 48;
97+
98+
ctx.scale(scale, scale);
99+
100+
// Background with rounded corners
101+
ctx.fillStyle = '#10b981';
102+
roundRect(ctx, 0, 0, 48, 48, 8);
103+
ctx.fill();
104+
105+
// Window/Tab icon - white background
106+
ctx.fillStyle = 'white';
107+
roundRect(ctx, 9, 12, 30, 24, 2);
108+
ctx.fill();
109+
110+
// Top bar (header)
111+
ctx.fillStyle = '#059669';
112+
roundRect(ctx, 9, 12, 30, 7, 2);
113+
ctx.fill();
114+
115+
// Lines representing text
116+
ctx.strokeStyle = '#10b981';
117+
ctx.lineWidth = 2;
118+
ctx.lineCap = 'round';
119+
120+
// First line
121+
ctx.beginPath();
122+
ctx.moveTo(14, 24);
123+
ctx.lineTo(34, 24);
124+
ctx.stroke();
125+
126+
// Second line (shorter)
127+
ctx.beginPath();
128+
ctx.moveTo(14, 29);
129+
ctx.lineTo(26, 29);
130+
ctx.stroke();
131+
}
132+
133+
function roundRect(ctx, x, y, width, height, radius) {
134+
ctx.beginPath();
135+
ctx.moveTo(x + radius, y);
136+
ctx.lineTo(x + width - radius, y);
137+
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
138+
ctx.lineTo(x + width, y + height - radius);
139+
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
140+
ctx.lineTo(x + radius, y + height);
141+
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
142+
ctx.lineTo(x, y + radius);
143+
ctx.quadraticCurveTo(x, y, x + radius, y);
144+
ctx.closePath();
145+
}
146+
147+
function downloadCanvas(canvas, filename) {
148+
canvas.toBlob(function(blob) {
149+
const url = URL.createObjectURL(blob);
150+
const a = document.createElement('a');
151+
a.href = url;
152+
a.download = filename;
153+
a.click();
154+
URL.revokeObjectURL(url);
155+
});
156+
}
157+
158+
function generateIcons() {
159+
const preview = document.getElementById('preview');
160+
preview.innerHTML = '';
161+
162+
const sizes = [
163+
{ size: 16, name: 'icon16.png' },
164+
{ size: 48, name: 'icon48.png' },
165+
{ size: 128, name: 'icon128.png' }
166+
];
167+
168+
sizes.forEach(({ size, name }) => {
169+
const item = document.createElement('div');
170+
item.className = 'icon-item';
171+
172+
const canvas = document.createElement('canvas');
173+
canvas.width = size;
174+
canvas.height = size;
175+
drawIcon(canvas, size);
176+
177+
const label = document.createElement('div');
178+
label.textContent = `${size}x${size}`;
179+
label.style.fontWeight = 'bold';
180+
label.style.marginBottom = '8px';
181+
182+
const button = document.createElement('button');
183+
button.textContent = `Download ${name}`;
184+
button.onclick = () => downloadCanvas(canvas, name);
185+
186+
item.appendChild(label);
187+
item.appendChild(canvas);
188+
item.appendChild(button);
189+
preview.appendChild(item);
190+
});
191+
192+
document.getElementById('success').style.display = 'block';
193+
}
194+
</script>
195+
</body>
196+
</html>

‎tab-extension/icons/icon128.png‎

1.84 KB
Loading

‎tab-extension/icons/icon16.png‎

347 Bytes
Loading

‎tab-extension/icons/icon48.png‎

622 Bytes
Loading

‎tab-extension/manager.html‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,7 @@
1111
<header>
1212
<div class="header-left">
1313
<div class="logo">
14-
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
15-
<circle cx="16" cy="16" r="14" fill="#10b981" stroke="#059669" stroke-width="2"/>
16-
<path d="M12 16L15 19L20 13" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
17-
</svg>
14+
<img src="icons/icon48.png" alt="Tab Manager" width="32" height="32">
1815
<h1>Tab Manager</h1>
1916
</div>
2017
</div>

‎tab-extension/manager.js‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,9 @@ function createWindowCard(window) {
9999
<option value="">Move to...</option>
100100
</select>
101101
<button class="btn btn-danger btn-close-selected" data-window-id="${window.id}" disabled>
102+
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
103+
<path d="M1 1L13 13M13 1L1 13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
104+
</svg>
102105
Close Selected
103106
</button>
104107
</div>
@@ -379,7 +382,23 @@ async function sortTabs(windowId, sortType) {
379382
sortedTabs.sort((a, b) => {
380383
const domainA = getTopLevelDomain(a.url);
381384
const domainB = getTopLevelDomain(b.url);
382-
return domainA.localeCompare(domainB);
385+
386+
// First, compare by top-level domain
387+
const domainCompare = domainA.localeCompare(domainB);
388+
if (domainCompare !== 0) {
389+
return domainCompare;
390+
}
391+
392+
// If top-level domains are the same, compare by full URL (hostname + path)
393+
try {
394+
const urlA = new URL(a.url);
395+
const urlB = new URL(b.url);
396+
const fullA = urlA.hostname + urlA.pathname;
397+
const fullB = urlB.hostname + urlB.pathname;
398+
return fullA.localeCompare(fullB);
399+
} catch (e) {
400+
return a.url.localeCompare(b.url);
401+
}
383402
});
384403
} else {
385404
// Default order - no sorting needed

‎tab-extension/manifest.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,19 @@
99
],
1010
"action": {
1111
"default_icon": {
12-
"16": "icons/icon16.svg",
13-
"48": "icons/icon48.svg",
14-
"128": "icons/icon128.svg"
12+
"16": "icons/icon16.png",
13+
"48": "icons/icon48.png",
14+
"128": "icons/icon128.png"
1515
},
1616
"default_title": "Tab Manager"
1717
},
1818
"background": {
1919
"service_worker": "background.js"
2020
},
2121
"icons": {
22-
"16": "icons/icon16.svg",
23-
"48": "icons/icon48.svg",
24-
"128": "icons/icon128.svg"
22+
"16": "icons/icon16.png",
23+
"48": "icons/icon48.png",
24+
"128": "icons/icon128.png"
2525
},
2626
"content_security_policy": {
2727
"extension_pages": "script-src 'self'; object-src 'self'"

‎tab-extension/styles.css‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@ header {
4141
gap: 12px;
4242
}
4343

44+
.logo img {
45+
border-radius: 6px;
46+
}
47+
4448
.logo h1 {
4549
font-size: 16px;
4650
font-weight: 600;
@@ -126,14 +130,23 @@ header {
126130
align-items: center;
127131
}
128132

129-
.sort-dropdown {
133+
.sort-dropdown,
134+
.move-to-dropdown {
130135
padding: 6px 12px;
131136
border: 1px solid #e5e5e5;
132137
border-radius: 4px;
133138
font-size: 13px;
134139
background: white;
135140
cursor: pointer;
136141
outline: none;
142+
height: 32px;
143+
line-height: 1.5;
144+
}
145+
146+
.sort-dropdown:disabled,
147+
.move-to-dropdown:disabled {
148+
opacity: 0.5;
149+
cursor: not-allowed;
137150
}
138151

139152
.btn {
@@ -145,7 +158,9 @@ header {
145158
transition: all 0.2s;
146159
display: flex;
147160
align-items: center;
148-
gap: 4px;
161+
gap: 6px;
162+
height: 32px;
163+
line-height: 1.5;
149164
}
150165

151166
.btn-icon {

0 commit comments

Comments
 (0)