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: