I am developing an extension for Google Chrome that is supposed to show a GIF in overlay at the end of a timer.
The timer works just fine, but the image doesn’t get shown.
background.js
let timerId = null;
// Function to start the timer
function startTimer(duration) {
// Clear existing timer
if (timerId) {
clearTimeout(timerId);
}
// Set new timer
timerId = setTimeout(function() {
// Inject content script into the active tab
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
const activeTab = tabs[0];
const tabId = activeTab.id; // Get the ID of the active tab
chrome.scripting.executeScript({
target: { tabId: tabId, allFrames: true }, // Use the tabId obtained above
files: ['contentScript.js'],
});
});
console.log("Timer ended");
}, duration * 1000); // Convert seconds to milliseconds
}
// Listen for messages from the popup script
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
if (message.action === 'startTimer') {
const duration = message.duration;
console.log("Received duration:", duration);
startTimer(duration); // Start the timer
}
});
contentScript.js
// Create a semi-transparent overlay
const overlay = document.createElement('div');
overlay.style.position = 'fixed';
overlay.style.top = '0';
overlay.style.left = '0';
overlay.style.width = '100%';
overlay.style.height = '100%';
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; // Semi-transparent black
overlay.style.zIndex = '9999';
document.body.appendChild(overlay);
// Create an image element
const imgSrc = 'AAA.gif';
const img = document.createElement('img');
img.src = imgSrc;
img.style.position = 'fixed';
img.style.top = '50%';
img.style.left = '50%';
img.style.transform = 'translate(-50%, -50%)';
img.style.zIndex = '10000';
document.body.appendChild(img);
setTimeout(function() {
overlay.remove();
img.remove();
}, 2000);
I tried changing the approach and, if I create another tab after the timer, the GIF it’s shown accordingly. But I need it to work as above, instead of creating another tab.
I tried creating a notification after the timer, but the notification doesn’t get created.
New contributor