toggle and footer

about.html

@@ -54,5 +54,38 @@
 				<img src="images/test.jpg" alt="" />
 			</div>
 		</main>
+		<footer>
+			<a class="logo" href="https://www.facebook.com/legal/terms/update" target="__blank">
+				<img src="images/facebook.png" alt="Facebook" />
+			</a>
+
+			<a class="logo" href="https://help.instagram.com/581066165581870" target="__blank">
+				<img src="images/Instagram.png" alt="Instagram" />
+			</a>
+
+			<a class="logo" href="https://www.tiktok.com/legal/privacy-policy-eea" target="__blank">
+				<img src="images/TikTok.png" alt="TikTok" />
+			</a>
+
+			<a class="logo" href="https://snap.com/en-GB/privacy/privacy-policy" target="__blank">
+				<img src="images/Snapchat.png" alt="Snapchat" />
+			</a>
+
+			<a class="logo" href="https://telegram.org/privacy" target="__blank">
+				<img src="images/Telegram.png" alt="Telegram" />
+			</a>
+
+			<a class="logo" href="https://www.wechat.com/en/privacy_policy.html" target="__blank">
+				<img src="./images/WeChat.png" alt="WeChat" />
+			</a>
+
+			<a class="logo" href="https://www.whatsapp.com/legal/privacypolicy" target="__blank">
+				<img src="images/Whatsapp.png" alt="Whatsapp" />
+			</a>
+
+			<a class="logo" href="https://www.youtube.com/static?template=terms" target="__blank">
+				<img src="images/Youtube.png" alt="Youtube" />
+			</a>
+		</footer>
 	</body>
 </html>

categories.html

@@ -145,5 +145,39 @@
 				</div>
 			</div>
 		</main>
+
+		<footer>
+			<a class="logo" href="https://www.facebook.com/legal/terms/update" target="__blank">
+				<img src="images/facebook.png" alt="Facebook" />
+			</a>
+
+			<a class="logo" href="https://help.instagram.com/581066165581870" target="__blank">
+				<img src="images/Instagram.png" alt="Instagram" />
+			</a>
+
+			<a class="logo" href="https://www.tiktok.com/legal/privacy-policy-eea" target="__blank">
+				<img src="images/TikTok.png" alt="TikTok" />
+			</a>
+
+			<a class="logo" href="https://snap.com/en-GB/privacy/privacy-policy" target="__blank">
+				<img src="images/Snapchat.png" alt="Snapchat" />
+			</a>
+
+			<a class="logo" href="https://telegram.org/privacy" target="__blank">
+				<img src="images/Telegram.png" alt="Telegram" />
+			</a>
+
+			<a class="logo" href="https://www.wechat.com/en/privacy_policy.html" target="__blank">
+				<img src="./images/WeChat.png" alt="WeChat" />
+			</a>
+
+			<a class="logo" href="https://www.whatsapp.com/legal/privacypolicy" target="__blank">
+				<img src="images/Whatsapp.png" alt="Whatsapp" />
+			</a>
+
+			<a class="logo" href="https://www.youtube.com/static?template=terms" target="__blank">
+				<img src="images/Youtube.png" alt="Youtube" />
+			</a>
+		</footer>
 	</body>
 </html>

images/logo.svg

@@ -1,12 +0,0 @@
-<svg width="750" height="110" viewBox="0 0 750 110" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M156.398 94.4236C148.4 94.4236 141.533 93.0502 135.797 90.3034C130.061 87.4757 125.335 83.7998 121.619 79.2756C117.902 74.6706 115.156 69.7021 113.378 64.37C111.601 59.0379 110.712 53.8674 110.712 48.8585V46.1924C110.712 40.6179 111.601 35.1647 113.378 29.8326C115.236 24.4197 118.024 19.5319 121.74 15.1693C125.537 10.8067 130.263 7.33277 135.918 4.74751C141.574 2.16226 148.198 0.869629 155.793 0.869629C163.872 0.869629 171.021 2.40462 177.242 5.47462C183.544 8.46382 188.593 12.7053 192.39 18.1989C196.187 23.6118 198.409 29.9134 199.055 37.1036H176.515C175.95 34.0336 174.738 31.3676 172.88 29.1055C171.021 26.8434 168.638 25.1064 165.73 23.8946C162.821 22.6019 159.509 21.9556 155.793 21.9556C152.319 21.9556 149.168 22.5616 146.34 23.7734C143.593 24.9852 141.251 26.7222 139.312 28.9843C137.453 31.1656 135.999 33.8317 134.949 36.9824C133.979 40.1332 133.495 43.6879 133.495 47.6466C133.495 51.6053 133.979 55.16 134.949 58.3108C135.999 61.4616 137.494 64.168 139.433 66.4301C141.452 68.6922 143.876 70.4292 146.704 71.641C149.531 72.7721 152.763 73.3376 156.398 73.3376C162.054 73.3376 166.82 71.9642 170.698 69.2174C174.657 66.4705 177.04 62.7946 177.848 58.1896H200.388C199.661 64.8143 197.439 70.8735 193.723 76.3672C190.007 81.8609 184.998 86.2639 178.696 89.5762C172.395 92.8078 164.962 94.4236 156.398 94.4236Z" fill="white"/>
-<path d="M255.619 94.4236C247.54 94.4236 240.511 93.0502 234.533 90.3034C228.554 87.4757 223.586 83.7998 219.627 79.2756C215.668 74.6706 212.72 69.7021 210.781 64.37C208.842 59.0379 207.872 53.8674 207.872 48.8585V46.1924C207.872 40.6179 208.882 35.1647 210.902 29.8326C212.922 24.4197 215.951 19.5319 219.991 15.1693C224.03 10.8067 228.999 7.33277 234.896 4.74751C240.875 2.16226 247.782 0.869629 255.619 0.869629C263.375 0.869629 270.201 2.16226 276.099 4.74751C282.077 7.33277 287.086 10.8067 291.126 15.1693C295.165 19.5319 298.195 24.4197 300.214 29.8326C302.315 35.1647 303.365 40.6179 303.365 46.1924V48.8585C303.365 53.8674 302.355 59.0379 300.336 64.37C298.397 69.7021 295.448 74.6706 291.489 79.2756C287.531 83.7998 282.562 87.4757 276.584 90.3034C270.605 93.0502 263.617 94.4236 255.619 94.4236ZM255.619 73.3376C259.497 73.3376 262.971 72.6913 266.041 71.3987C269.111 70.106 271.736 68.2883 273.918 65.9454C276.099 63.6025 277.755 60.8961 278.886 57.8261C280.017 54.6753 280.583 51.2821 280.583 47.6466C280.583 43.7687 279.977 40.2544 278.765 37.1036C277.634 33.9528 275.978 31.2464 273.796 28.9843C271.615 26.7222 268.989 24.9852 265.919 23.7734C262.849 22.5616 259.416 21.9556 255.619 21.9556C251.741 21.9556 248.267 22.5616 245.197 23.7734C242.127 24.9852 239.501 26.7222 237.32 28.9843C235.139 31.2464 233.483 33.9528 232.351 37.1036C231.22 40.2544 230.655 43.7687 230.655 47.6466C230.655 51.2821 231.22 54.6753 232.351 57.8261C233.483 60.8961 235.139 63.6025 237.32 65.9454C239.501 68.2883 242.127 70.106 245.197 71.3987C248.267 72.6913 251.741 73.3376 255.619 73.3376Z" fill="white"/>
-<path d="M316.969 91.9999V3.53568H353.93L383.378 74.0647H387.619L385.196 76.246V3.53568H406.282V91.9999H369.078L339.63 21.4709H335.389L337.813 19.2896V91.9999H316.969Z" fill="white"/>
-<path d="M441.881 91.9999V20.7438H464.421V91.9999H441.881ZM417.644 23.1675V3.53568H488.658V23.1675H417.644Z" fill="white"/>
-<path d="M500.047 91.9999V2.80857H522.587V91.9999H500.047ZM553.368 91.9999L528.525 54.4329H553.004L579.301 91.9999H553.368ZM516.891 64.8547V47.5254H538.098C540.764 47.5254 543.067 47.0003 545.006 45.95C546.945 44.8998 548.439 43.4052 549.49 41.4662C550.621 39.5273 551.186 37.2652 551.186 34.6799C551.186 32.0139 550.621 29.7114 549.49 27.7725C548.439 25.8335 546.945 24.3389 545.006 23.2887C543.067 22.2384 540.764 21.7133 538.098 21.7133H516.891V2.80857H536.765C544.44 2.80857 551.065 3.98001 556.64 6.32291C562.214 8.58501 566.496 11.9782 569.485 16.5024C572.474 20.9458 573.969 26.4798 573.969 33.1045V35.0435C573.969 41.6682 572.434 47.2023 569.364 51.6457C566.375 56.0083 562.093 59.3207 556.518 61.5828C551.025 63.7641 544.44 64.8547 536.765 64.8547H516.891Z" fill="white"/>
-<path d="M632.188 94.4236C624.109 94.4236 617.081 93.0502 611.102 90.3034C605.124 87.4757 600.155 83.7998 596.197 79.2756C592.238 74.6706 589.289 69.7021 587.35 64.37C585.411 59.0379 584.442 53.8674 584.442 48.8585V46.1924C584.442 40.6179 585.452 35.1647 587.471 29.8326C589.491 24.4197 592.521 19.5319 596.56 15.1693C600.6 10.8067 605.568 7.33277 611.466 4.74751C617.444 2.16226 624.352 0.869629 632.188 0.869629C639.944 0.869629 646.771 2.16226 652.668 4.74751C658.647 7.33277 663.656 10.8067 667.695 15.1693C671.735 19.5319 674.764 24.4197 676.784 29.8326C678.884 35.1647 679.935 40.6179 679.935 46.1924V48.8585C679.935 53.8674 678.925 59.0379 676.905 64.37C674.966 69.7021 672.017 74.6706 668.059 79.2756C664.1 83.7998 659.131 87.4757 653.153 90.3034C647.175 93.0502 640.186 94.4236 632.188 94.4236ZM632.188 73.3376C636.066 73.3376 639.54 72.6913 642.61 71.3987C645.68 70.106 648.306 68.2883 650.487 65.9454C652.668 63.6025 654.325 60.8961 655.456 57.8261C656.587 54.6753 657.152 51.2821 657.152 47.6466C657.152 43.7687 656.546 40.2544 655.334 37.1036C654.203 33.9528 652.547 31.2464 650.366 28.9843C648.185 26.7222 645.559 24.9852 642.489 23.7734C639.419 22.5616 635.985 21.9556 632.188 21.9556C628.31 21.9556 624.836 22.5616 621.766 23.7734C618.696 24.9852 616.071 26.7222 613.89 28.9843C611.708 31.2464 610.052 33.9528 608.921 37.1036C607.79 40.2544 607.224 43.7687 607.224 47.6466C607.224 51.2821 607.79 54.6753 608.921 57.8261C610.052 60.8961 611.708 63.6025 613.89 65.9454C616.071 68.2883 618.696 70.106 621.766 71.3987C624.836 72.6913 628.31 73.3376 632.188 73.3376Z" fill="white"/>
-<path d="M693.539 91.9999V3.53568H716.079V91.9999H693.539ZM713.655 91.9999V72.3681H749.526V91.9999H713.655Z" fill="white"/>
-<path d="M79 61.1318C79.1 59.9318 79.1 58.8318 79.1 57.6318V5.23177H56.5V58.1318C56.5 59.2318 56.4 60.2318 56.3 61.1318H79Z" fill="white"/>
-<path d="M45.3 74.5318C43.6 74.9318 41.7 75.2318 39.6 75.2318C36 75.2318 32.9 74.5318 30.4 73.1318C27.9 71.7318 26 69.7318 24.6 67.1318C23.3 64.5318 22.6 61.5318 22.6 58.0318V5.13176H0V57.5318C0 65.4318 1.50001 72.3318 4.60001 78.1318C7.70001 83.9318 12.2 88.4318 18 91.5318C23.9 94.7318 31.1 96.2318 39.6 96.2318C41.6 96.2318 43.4 96.1318 45.3 95.9318V74.5318Z" fill="white"/>
-<path d="M70.1 75.1318C69.8 77.1318 69.2 78.9318 68.4 80.5318C67.1 83.1318 65.2 85.0318 62.7 86.4318C61.6 87.0318 60.4 87.5318 59.1 87.8318V109.432C65.2 108.832 70.5 107.432 75 104.932C80.9 101.732 85.3 97.3318 88.4 91.5318C90.9 86.8318 92.3 81.3318 92.8 75.1318H70.1Z" fill="white"/>
-</svg>

popup.js

@@ -37,32 +37,53 @@ preferences.addEventListener("click", () => {
 const activate = document.getElementById("activate");
 activate.addEventListener("click", async () => {
 	activate.classList.toggle("active");
+	let active = activate.classList.contains("active");
+	console.log(active);
 
 	let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
 
 	chrome.scripting.executeScript({
 		target: { tabId: tab.id },
 		function: highlightSelected,
+		args: [active],
 	});
 });
 
-function highlightSelected() {
+function highlightSelected(active) {
 	chrome.storage.sync.get(["categories", "selected"], (result) => {
-		for (category of result.selected) {
-			result.categories[category].keywords.forEach((keyword) => {
-				let findings = contains("p, span, li, h1, h2, h3, h4, h5, h6", keyword);
-
-				if (findings.length) {
-					findings.forEach((finding) => (finding.style.color = "red"));
-				}
-			});
+		for (const el of document.querySelectorAll("*")) {
+			el.style.visibility = active ? "hidden" : "visible";
+		}
+
+		if (active) {
+			for (category of result.selected) {
+				result.categories[category].keywords.forEach((keyword) => {
+					const body = document.querySelector("body");
+					let findings = textNodesUnder(body).filter((text) =>
+						text.textContent.includes(keyword)
+					);
+
+					if (findings.length) {
+						for (const finding of findings) {
+							let wrapped = document.createElement("span");
+							wrapped.innerHTML = finding.textContent;
+
+							wrapped.style.visibility = "visible";
+
+							let target = finding.parentElement;
+							target.replaceChild(wrapped, finding);
+						}
+					}
+				});
+			}
 		}
 	});
 
-	function contains(selector, text) {
-		var elements = document.querySelectorAll(selector);
-		return Array.prototype.filter.call(elements, function (element) {
-			return RegExp(text).test(element.textContent.toLowerCase());
-		});
+	function textNodesUnder(el) {
+		var n,
+			a = [],
+			walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);
+		while ((n = walk.nextNode())) a.push(n);
+		return a;
 	}
 }

style.css

@@ -319,6 +319,34 @@ input:checked + .slider:before {
 	overflow: hidden;
 }
 
+footer {
+	margin-top: 128px;
+	margin-bottom: 32px;
+	display: flex;
+	justify-content: center;
+}
+
+.logo {
+	transition: all 0.2s ease;
+	display: inline-block;
+	width: 36px;
+	height: 36px;
+}
+
+.logo + .logo {
+	margin-left: 24px;
+}
+
+.logo img {
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+}
+
+.logo:hover {
+	transform: scale(1.1);
+}
+
 @media (max-width: 991.98px) {
 	html,
 	body {

tips.html

@@ -98,5 +98,38 @@
 				</ul>
 			</div>
 		</main>
+		<footer>
+			<a class="logo" href="https://www.facebook.com/legal/terms/update" target="__blank">
+				<img src="images/facebook.png" alt="Facebook" />
+			</a>
+
+			<a class="logo" href="https://help.instagram.com/581066165581870" target="__blank">
+				<img src="images/Instagram.png" alt="Instagram" />
+			</a>
+
+			<a class="logo" href="https://www.tiktok.com/legal/privacy-policy-eea" target="__blank">
+				<img src="images/TikTok.png" alt="TikTok" />
+			</a>
+
+			<a class="logo" href="https://snap.com/en-GB/privacy/privacy-policy" target="__blank">
+				<img src="images/Snapchat.png" alt="Snapchat" />
+			</a>
+
+			<a class="logo" href="https://telegram.org/privacy" target="__blank">
+				<img src="images/Telegram.png" alt="Telegram" />
+			</a>
+
+			<a class="logo" href="https://www.wechat.com/en/privacy_policy.html" target="__blank">
+				<img src="./images/WeChat.png" alt="WeChat" />
+			</a>
+
+			<a class="logo" href="https://www.whatsapp.com/legal/privacypolicy" target="__blank">
+				<img src="images/Whatsapp.png" alt="Whatsapp" />
+			</a>
+
+			<a class="logo" href="https://www.youtube.com/static?template=terms" target="__blank">
+				<img src="images/Youtube.png" alt="Youtube" />
+			</a>
+		</footer>
 	</body>
 </html>