diff --git a/background.js b/background.js index 127a801..08a3251 100644 --- a/background.js +++ b/background.js @@ -4,6 +4,16 @@ // }); const bannedSlogansList = document.getElementById("bannedSlogansList"); +const page2btn = document.getElementById("s_page2"); +const page1btn = document.getElementById("s_page1"); +const container = document.getElementById("container"); + +page2btn.onclick = () => { + container.style.marginLeft = "-400px"; +}; +page1btn.onclick = () => { + container.style.marginLeft = "0px"; +}; function span(text) { return "" + text + ""; @@ -14,14 +24,16 @@ chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, { action: "getBannedSlogans" }, function( response ) { - const resultContent = ""; + let resultContent = ""; if (response.length == 0) { resultContent = span("Hooray, no banned words!"); } else { - response.forEach(slogan => { - resultContent += span(slogan); + response.forEach((slogan, i) => { + resultContent += span(span(i) + span(slogan)); }); } + + bannedSlogansList.innerHTML = resultContent; }); }); diff --git a/popup.html b/popup.html index fac3a95..aa26199 100644 --- a/popup.html +++ b/popup.html @@ -7,23 +7,78 @@ body { background: rgb(24, 24, 24); font-size: 1em; + padding: 0; + margin: 0; } .container { - width: 200px; + transition: all 0.25s ease; + width: 400px; + overflow: hidden; + display: flex; + padding: 5px 0; + } + .page { + width: 100%; } .h { color: whitesmoke; font-size: 0.8em; + margin-bottom: 10px; + display: inline-block; + padding: 0 15px; + } + #bannedSlogansList { + overflow: auto; + max-height: 200px; } #bannedSlogansList > span { + display: flex; + width: 100%; + overflow: hidden; + color: whitesmoke; + padding: 5px 0; + cursor: pointer; + } + #bannedSlogansList > span > span { + display: inline-block; + } + #bannedSlogansList > span:nth-child(2n) { + background: rgb(34, 34, 34); + } + #bannedSlogansList > span > span:first-child { + flex-shrink: 0; + width: 50px; + text-align: center; + margin-right: 10px; + } + #s_page2 { display: block; + width: 100%; + text-align: left; + padding: 10px 15px; + cursor: pointer; + background: rgb(65, 65, 65); + color: rgb(197, 197, 197); + outline: none; + border: none; + } + #s_page2:hover { + background: rgb(97, 97, 97); + color: rgb(248, 248, 248); } -
- Currently banned slogans: - -
+
+
+ + Banned slogans found on this webpage: +
+
+
+ + Add your own banned words: +
+