58 lines
1.5 KiB
JavaScript
58 lines
1.5 KiB
JavaScript
|
// Dynamic Icon generator
|
||
|
|
function createIcon(text, size = 16) {
|
||
|
|
const canvas = new OffscreenCanvas(size, size);
|
||
|
|
const ctx = canvas.getContext("2d");
|
||
|
|
|
||
|
|
// Wipe canvas
|
||
|
|
ctx.clearRect(0, 0, size, size);
|
||
|
|
|
||
|
|
// Background
|
||
|
|
ctx.fillStyle = "#4285F4"; // Google Blue
|
||
|
|
ctx.fillRect(0, 0, size, size);
|
||
|
|
|
||
|
|
// Text
|
||
|
|
ctx.fillStyle = "white";
|
||
|
|
ctx.font = `bold ${Math.floor(size * 0.5625)}px Arial`;
|
||
|
|
ctx.textAlign = "center";
|
||
|
|
ctx.textBaseline = "middle";
|
||
|
|
ctx.fillText(text, size / 2, size / 2);
|
||
|
|
|
||
|
|
return ctx.getImageData(0, 0, size, size);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Update the extension icon
|
||
|
|
function updateExtensionIcon(zoomLevel, accelerationMultiplier) {
|
||
|
|
const zoomText = zoomLevel.toFixed(2);
|
||
|
|
const accelText = accelerationMultiplier.toFixed(2);
|
||
|
|
|
||
|
|
// Create icons of different sizes
|
||
|
|
const icon16 = createIcon(zoomText, 16);
|
||
|
|
const icon32 = createIcon(zoomText, 32);
|
||
|
|
const icon48 = createIcon(zoomText, 48);
|
||
|
|
const icon128 = createIcon(zoomText, 128);
|
||
|
|
|
||
|
|
// Set the icon
|
||
|
|
chrome.action.setIcon({
|
||
|
|
imageData: {
|
||
|
|
16: icon16,
|
||
|
|
32: icon32,
|
||
|
|
48: icon48,
|
||
|
|
128: icon128,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
// Update badge with multiplier
|
||
|
|
chrome.action.setBadgeText({ text: accelText + "x" });
|
||
|
|
chrome.action.setBadgeBackgroundColor({ color: "#34A853" }); // Google Green
|
||
|
|
}
|
||
|
|
|
||
|
|
// Listen for messages
|
||
|
|
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
|
||
|
|
if (request.action === "updateZoomInfo") {
|
||
|
|
updateExtensionIcon(request.zoomLevel, request.accelerationMultiplier);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Set icon
|
||
|
|
updateExtensionIcon(1, 1);
|