I am currently writing up a chrome extension using JavaScript that should in theory run in the background, but I’m having some trouble getting it to. I wanted to create an extension to help me focus, since I get distracted easily. So I set up a system in which any user can input any URL, and it will take this value and add it to a list of banned URLs, which gets stored locally using chrome.storage. Then, whenever a tab is updated, which is measured using chrome.tabs.onUpdated, it checks the URL of every tab, if the URL is in the set of banned URLs, the tab gets closed. The full script is
document.addEventListener('DOMContentLoaded', () => {
/* URL Data from the extension UI (HTML file) */
/* -> InterfaceType: Buttons */
const confirmAddButton = document.getElementById("confirmAddButton"); // Confirm add url from 'urlToAdd' textbox
const confirmRemoveButton = document.getElementById("confirmRemoveButton"); // Confirm remove url from 'urlToRemove' textbox
/* -> InterfaceType: Textboxes */
const urlToAdd = document.getElementById("urlToAdd"); // User inputted url to be added to the list of banned urls.
const urlToRemove = document.getElementById("urlToRemove"); // User inputted url to be added to the list of banned urls.
/* Clear Everything from a particular storage key */
/* -> InterfaceType: Buttons*/
const clearAllUrls = document.getElementById("clearAllUrls"); // Removes all data from the storage key 'urlKey'
/* Display*/
const display = document.getElementById("display"); // The display
// When confirmAddButton is clicked:
confirmAddButton.addEventListener('click', () => {
// Get all data from 'urlKey' storage
chrome.storage.local.get(['urlKey']).then((result) => {
let bannedUrlsList = result.urlKey // Assign result to temporary list
// Checks to see if the urlToAdd is already in the list of bannedUrls &0>
if (bannedUrlsList.includes(urlToAdd.value) == false) { // >&0: If it is not, add it to the list
bannedUrlsList = bannedUrlsList.concat(urlToAdd.value) // Add urlToAdd.value to the temporary list
// set the 'urlKey' storage to the temporary list which has the added url in it
chrome.storage.local.set({'urlKey': bannedUrlsList}).then(() => {
display.innerHTML = `${urlToAdd.value} was added to the list of banned urls`
})
} else { // >&0: Else, alert the user that the url is already in the list
display.innerHTML = `${urlToAdd.value} is already in the list`
}
})
});
// When clearAllUrls is clicked:
clearAllUrls.addEventListener('click', () => {
chrome.storage.local.set({'urlKey': []}).then(() => {
display.innerHTML = `The list of banned urls has been completely wiped`
})
});
// Function checks all tabs to make sure they aren't banned, closes them if they are
function isValidTab() {
// Get all the open tabs from chrome
chrome.tabs.query({windowId: chrome.windows.WINDOW_ID_CURRENT}, (tabs) => {
for (let i = 0 /*i starts at zero*/; i < tabs.length /*i must be less than the numbe of tabs*/; i++ /*increments by one each iteration*/) {
const currentTabUrl = tabs[i].url; //For each tab, assign the tabs URL to a value 'currentTabUrl'
// Get the list of banned URLs from the 'urlKey' storage
chrome.storage.local.get(['urlKey']).then((result) => {
let bannedUrlsList = result.urlKey // Assign result to temporary list
// If the list of banned urls contains the url of the current tab, close the tab, else, leave it be
if (bannedUrlsList.includes(currentTabUrl)) {
chrome.tabs.remove(tabs[i].id) // Closes the current tab
display.innerHTML = `${currentTabUrl} was closed`
} else {
_ = 1 // Do nothing
}
})
}
})
};
// Every time a tab is updated or changed, or a new tab is created, close all banned tabs
chrome.tabs.onUpdated.addListener(() => {
isValidTab()
});
});
This is all well and good, but for some reason, this code only works when the console is open. For example, lets say I add the URL https://www.derivative-calculator.net/ to the list of banned URLs list. If I were to now open that website, nothing would happen, reloading does nothing, it’s as if the extension wasn’t there. However, if I inspect the extension, and reload the tab, both it and the console close immediately. This is not what I want to happen, the extension should run without the console needing to be open.
I’ve tried removing every reference to the console from the code, I’ve placed comments everywhere so that I know exactly what and where everything is, I referred to the list of banned URLs directly from the storage key, and I’ve restarted from scratch 3 times, yet still the same problem persists. I’ve set the code to be a service worker in the manifest.json file, and all the permissions for the chrome APIs are in the manifest.json as well.
{
"permissions": [
"tabs",
"storage"
],
"background": [
"service_worker": "Code.js"
]
}
If the extension didn’t work at all, that would just mean that my code doesn’t work, but my code does work when the console is open, and only when it’s open. I have no clue what is causing this, so any help is appreciated.
