class Tab {
constructor(id, title, url, tabFavicon, lastAccessed) {
this.id = id;
this.title = title;
this.url = url;
this.tabFavicon = tabFavicon;
this.lastAccessed = lastAccessed;
}
}
chrome.runtime.onInstalled.addListener(() => {
console.log("Extension installed!");
const storedTabs = [];
chrome.tabs.query({}, (tabs) => {
tabs.forEach((tab) => {
storedTabs.push(new Tab(tab.id, tab.title, tab.url, tab.favIconUrl, tab.lastAccessed));
});
chrome.storage.sync.set({ tabs: storedTabs });
chrome.storage.sync.set({ inactivityThreshold: { hours: 0, minutes: 30 } });
});
});
// Handle tab creation
chrome.tabs.onCreated.addListener((tab) => {
chrome.storage.sync.get("tabs", (data) => {
const storedTabs = data.tabs || [];
storedTabs.push(new Tab(tab.id, tab.title || "New Tab", tab.url || "", tab.favIconUrl || "", tab.lastAccessed));
console.log("Tabs before ", storedTabs);
chrome.storage.sync.set({ tabs: storedTabs }, () => {
console.log("Tabs after ", storedTabs);
});
});
});
// Handle tab updates
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
if (tab.status === "complete") {
chrome.storage.sync.get("tabs", (data) => {
const storedTabs = data.tabs || [];
const updatedTabs = storedTabs.map((storedTab) => {
if (storedTab.id === tabId) {
return new Tab(tab.id, tab.title || storedTab.title, tab.url || storedTab.url, tab.favIconUrl || storedTab.tabFavicon, tab.lastAccessed);
}
return storedTab;
});
chrome.storage.sync.set({ tabs: updatedTabs }, () => {
console.log("Tabs updated: ", updatedTabs);
console.log("Tab updated: ", tab);
});
});
}
});
chrome.tabs.onActivated.addListener((activeInfo) => {
chrome.tabs.get(activeInfo.tabId, (tab) => {
chrome.storage.sync.get("tabs", (data) => {
const storedTabs = data.tabs || [];
const updatedTabs = storedTabs.map((storedTab) => {
if (storedTab.id === tab.id) {
return { ...storedTab, lastAccessed: tab.lastAccessed };
}
return storedTab;
});
chrome.storage.sync.set({ tabs: updatedTabs });
});
});
});
// Handle tab removal
chrome.tabs.onRemoved.addListener((tabId) => {
chrome.storage.sync.get("tabs", (data) => {
const storedTabs = data.tabs || [];
const remainingTabs = storedTabs.filter((storedTab) => storedTab.id !== tabId);
chrome.storage.sync.set({ tabs: remainingTabs }, () => {
console.log("Tab removed: ", tabId);
console.log(remainingTabs);
});
});
});
// Get inactivity threshold
function getInactivityThreshold() {
return new Promise((resolve) => {
chrome.storage.sync.get("inactivityThreshold", (data) => {
const inactivityThreshold = data.inactivityThreshold || { hours: 0, minutes: 30 };
const { minutes, hours } = inactivityThreshold;
resolve((minutes + hours * 60) * 60000);
});
});
}
// Setup interval
(async function setupInterval() {
const intervalTime = await getInactivityThreshold();
setInterval(() => {
// Add your periodic code here
}, intervalTime);
})();
Problem: when the extension is installed initially the whole event of reading tabs and writing them to the storage goes smooth,
Case A: but as soon as I create a new tab, like actually clicking on the + button to create a new tab, the event onCreated is fired but the chrome.storage.sync.set does not write the updated tab array to the storage.
Case B: this issue does not arise when I do “Open in new tab” it works fine and the new tab is added and then subsequently updated to new url once the status is complete.
Question: I want to know that why does CASE A does not work but CASE B does?
PS: I implemented an in-memory cache that solved the issue, but still my question remains the same? why does it work in b and not in a?