diff --git a/background.js b/background.js index 4c4a948..fdd9819 100644 --- a/background.js +++ b/background.js @@ -26,22 +26,34 @@ customSloganTextbox.onkeyup = () => { }; addSlogan.onclick = () => { - const customSlogan = customSloganTextbox.value; + const customSlogan = customSloganTextbox.value.toLowerCase(); if (!customSlogans.includes(customSlogan)) { customSlogans.push(customSlogan); chrome.storage.sync.set({ savedCustomSlogans: customSlogans }, function() { - updateUserBannedList(customSloganTextbox.value); + customSloganTextbox.value = ""; + updateUserBannedList(""); }); } }; function updateUserBannedList(filter) { + filter = filter.toLowerCase(); + + if (customSlogans.length == 0) { + userBannedSlogansList.innerHTML = fullDiv( + "Type in word in the textbox and press '+' to add a new word" + ); + return; + } + userBannedSlogansList.innerHTML = ""; customSlogans.forEach((slogan, i) => { if (slogan.includes(filter)) { let sloganDOM = span( - span(i + 1) + span(slogan) + button("removeSlogan-" + i, "-") + span(i + 1) + + span(slogan) + + button("removeSlogan-" + i, "") ); userBannedSlogansList.innerHTML += sloganDOM; } @@ -70,6 +82,9 @@ page1btn.onclick = () => { page1.style.marginLeft = "0px"; }; +function fullDiv(text) { + return "
" + span(text) + "
"; +} function span(text) { return "" + text + ""; } @@ -85,10 +100,10 @@ chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) { let resultContent = ""; if (response.length == 0) { - resultContent = span("Hooray, no banned words!"); + resultContent = fullDiv("Hooray, no banned words!"); } else { response.forEach((slogan, i) => { - resultContent += span(span(i) + span(slogan)); + resultContent += span(span(i + 1) + span(slogan)); }); } diff --git a/content.js b/content.js index 04c8c28..5d77d56 100644 --- a/content.js +++ b/content.js @@ -6,6 +6,13 @@ const slogans = {}; let slogansKeys = []; const bannedSlogans = []; +chrome.storage.sync.get("savedCustomSlogans", function(items) { + items.savedCustomSlogans.forEach(slogan => { + slogansKeys.push(slogan); + slogans[slogan] = true; + }); +}); + // const url = "https://en.wikipedia.org/wiki/List_of_political_slogans"; const url = "https://en.wikipedia.org/w/api.php?" + diff --git a/popup.html b/popup.html index f6bed0b..c7401be 100644 --- a/popup.html +++ b/popup.html @@ -14,13 +14,24 @@ width: 400px; overflow: hidden; display: flex; - padding: 5px 0; } .page { transition: all 0.25s ease; width: 100%; flex-shrink: 0; } + .fullDiv { + display: flex; + height: 100%; + text-align: center; + font-size: 0.8em; + } + .fullDiv > span { + color: rgb(206, 206, 206); + font-weight: bold; + font-size: 1.2em; + margin: auto; + } .h { color: whitesmoke; font-size: 0.8em; @@ -28,9 +39,18 @@ display: inline-block; padding: 0 15px; } + #page1 > .list { + height: calc(100% - 80px); + } + #page2 > .list { + height: calc(100% - 120px); + } .list { overflow: auto; max-height: 200px; + font-size: 0.75em; + min-height: 20px; + margin-bottom: 10px; } .list > span { display: flex; @@ -38,7 +58,7 @@ overflow: hidden; color: whitesmoke; padding: 5px 0; - cursor: pointer; + line-height: 3em; } .list > span > span { display: inline-block; @@ -55,6 +75,26 @@ .list > span > button { margin: auto; margin-right: 10px; + background: 0; + border: 2px solid rgb(247, 61, 61); + font-weight: bold; + font-size: 20px; + text-align: center; + flex-shrink: 0; + flex-grow: 0; + width: 20px; + height: 20px; + cursor: pointer; + display: flex; + } + .list > span > button:hover { + border: 2px solid rgb(179, 26, 26); + } + .minus { + margin: auto; + width: 10px; + height: 2px; + background: rgb(247, 61, 61); } .pageBtn { display: block; @@ -62,30 +102,52 @@ text-align: left; padding: 10px 15px; cursor: pointer; - background: rgb(65, 65, 65); - color: rgb(197, 197, 197); + background: black; + color: rgb(228, 228, 228); + font-weight: bold; outline: none; border: none; + border-bottom: 2px solid rgb(71, 71, 71); } .pageBtn:hover { - background: rgb(97, 97, 97); + background: rgb(20, 20, 20); color: rgb(248, 248, 248); } + .textbox { + display: flex; + margin-left: 15px; + margin-bottom: 10px; + } + .textbox input { + background: rgb(241, 241, 241); + border: 0; + padding: 8px; + outline: none; + } + .textbox button { + color: black; + font-weight: bold; + background: rgb(241, 241, 241); + border: 0; + cursor: pointer; + outline: none; + font-size: 20px; + }
Banned slogans found on this webpage:
- + Add your own banned slogans: - - + +