Warum funktioniert meine Chrome -Erweiterung nur, wenn ich das Popup inspiziere? ⇐ JavaScript

[Anonymous]

Ich schreibe derzeit eine Chrome -Erweiterung mit JavaScript, die theoretisch im Hintergrund ausgeführt werden sollte, aber ich habe Probleme, sie an zu bringen. Ich wollte eine Erweiterung erstellen, um mich zu konzentrieren, da ich leicht abgelenkt werde. Daher habe ich ein System eingerichtet, in dem jeder Benutzer jede URL eingeben kann, und es wird diesen Wert annimmt und es einer Liste verbotener URLs hinzufügen, die lokal mit Chrome.Storage gespeichert werden. Wenn dann eine Registerkarte aktualisiert wird, die mit chrome.tabs.onupdated gemessen wird, überprüft sie die URL jeder Registerkarte. Wenn sich die URL in der Menge der verbotenen URLs befindet, wird die Registerkarte geschlossen. Das vollständige Skript ist < /p>

Code: Select all

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()
});
});
< /code>
Das ist alles schön und gut, aber aus irgendeinem Grund funktioniert dieser Code nur, wenn die Konsole geöffnet ist. Nehmen wir beispielsweise an, ich füge die URL https://www.derivative-calculator.net/ zur Liste der verbotenen URLS-Liste hinzu. Wenn ich diese Website jetzt öffnen würde, würde nichts passieren, das Nachladen macht nichts, es ist, als wäre die Erweiterung nicht da. Wenn ich jedoch die Erweiterung inspiziere und die Registerkarte neu lade, schließen Sie sie und die Konsole sofort. Das ist nicht das, was ich passieren möchte, die Erweiterung sollte ohne die Konsole geöffnet werden.  Ich habe den Code so festgelegt, dass er in der Datei Manifest.json 

ein Dienstarbeiter ist, und alle Berechtigungen für die Chrome -APIs befinden sich auch im Manifest.json .
{
"permissions": [
"tabs",
"storage"
],
"background": [
"service_worker": "Code.js"
]
}
< /code>
Wenn die Erweiterung überhaupt nicht funktioniert hat, würde dies nur bedeuten, dass mein Code nicht funktioniert, aber mein Code funktioniert, wenn die Konsole geöffnet ist und nur wenn er geöffnet ist. Ich habe keine Ahnung, was dies verursacht, also wird jede Hilfe geschätzt.