Update README.md

docs: cant install anymore

README.md

@@ -2,7 +2,8 @@
 Cucko is a Google Chrome browser extension that lets you hide the number of likes, retweets and replies a tweet has.
 
 ## Installation
-[Download the extension](https://chrome.google.com/webstore/detail/cuckoo-for-twitter/agjappnhmfoffegbhnakelgilanmnibb) from the Chrome web store here.
+
+You can no longer install this extension.
 
 ## Development
 To get set up for local development, follow these steps:

src/.eslintrc.json

@@ -0,0 +1,30 @@
+{
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "extends": [
+        "standard",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": 2018,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "no-tabs": "off",
+        "space-before-function-paren": "off",
+        "semi": "off",
+        "eol-last": "off",
+        "indent": "off"
+    }
+}

src/content.ts

@@ -1,53 +1,25 @@
-import { TwitterHider } from "./hider";
-import { Preferences } from "./interfaces/preferences";
-
+import { TwitterHider } from './hider';
+import { Preferences } from './interfaces/preferences';
+import { PreferencesRepository } from './preferences-repository';
 
 class Background {
-	static async init() {
+	static async init(): Promise<void> {
 		if (await this.checkIfFirstStart()) {
 			await this.setup();
 		}
 
-		this.listen();
-	}
-
-	static async listen() {
-		const preferences: Preferences = await this.getSavedPreferences();
+		const preferences: Preferences = await PreferencesRepository.get();
 		const hider = new TwitterHider(preferences);
-
 		hider.init();
 	}
 
-	static setup() {
-		const defaults = {
-			hideLikes: true,
-			hideRetweets: true,
-			hideReplies: true,
-			setup: true
-		};
-
-		return new Promise(resolve => {
-			globalThis.chrome.storage.local.set(defaults, () => resolve());
-		});
+	private static async setup(): Promise<void> {
+		await PreferencesRepository.set(PreferencesRepository.DefaultPreferences);
 	}
 
-	static checkIfFirstStart(): Promise<boolean> {
-		return new Promise(resolve => {
-			globalThis.chrome.storage.local.get('setup', data => {
-				resolve(!data.setup);
-			});
-		});
-	}
-
-	static getSavedPreferences(): Promise<Preferences> {
-		return new Promise(resolve => {
-			globalThis.chrome.storage.local.get(['hideLikes', 'hideReplies', 'hideRetweets'], (data: Preferences) => {
-				resolve(data);
-			});
-		})
+	private static async checkIfFirstStart(): Promise<boolean> {
+		return !(await PreferencesRepository.get());
 	}
 }
 
-
-
 Background.init();

src/hider.scss

@@ -8,16 +8,20 @@ body[data-hidereplies]
   display: none;
 }
 
-body[data-hideretweets]
-  div[data-testid="retweet"]
-  span.css-901oao.css-16my406.r-1qd0xha.r-ad9z0x.r-bcqeeo.r-qvutc0 {
-  display: none;
+body[data-hideretweets] {
+  div[data-testid="retweet"], div[data-testid="unretweet"] {
+    span.css-901oao.css-16my406.r-1qd0xha.r-ad9z0x.r-bcqeeo.r-qvutc0 {
+      display: none;
+    }
+  }
 }
-
-body[data-hidelikes]
-  div[data-testid="like"]
-  span.css-901oao.css-16my406.r-1qd0xha.r-ad9z0x.r-bcqeeo.r-qvutc0 {
-  display: none;
+  
+body[data-hidelikes] {
+  div[data-testid="like"], div[data-testid="unlike"] {
+    span.css-901oao.css-16my406.r-1qd0xha.r-ad9z0x.r-bcqeeo.r-qvutc0 {
+      display: none;
+    }
+  }
 }
 
 /*
@@ -27,17 +31,24 @@ body[data-hidelikes]
 body[data-hideretweets]
   div.css-1dbjc4n.r-1ila09b.r-qklmqi.r-1adg3ll
   div.css-1dbjc4n.r-1kfrmmb.r-1efd50x.r-5kkj8d.r-18u37iz.r-9qu9m4
-  a[href$="retweets"]
-  span.css-901oao.css-16my406.r-1qd0xha.r-vw2c0b.r-ad9z0x.r-bcqeeo.r-d3hbe1.r-1wgg2b2.r-axxi2z.r-qvutc0
-  span.css-901oao.css-16my406.r-1qd0xha.r-ad9z0x.r-bcqeeo.r-qvutc0 {
+  a[href$="retweets"] {
   display: none;
 }
 
-body[data-hideretweets]
+body[data-hidelikes]
   div.css-1dbjc4n.r-1ila09b.r-qklmqi.r-1adg3ll
   div.css-1dbjc4n.r-1kfrmmb.r-1efd50x.r-5kkj8d.r-18u37iz.r-9qu9m4
-  a[href$="likes"]
-  span.css-901oao.css-16my406.r-1qd0xha.r-vw2c0b.r-ad9z0x.r-bcqeeo.r-d3hbe1.r-1wgg2b2.r-axxi2z.r-qvutc0
+  a[href$="likes"] {
+  display: none;
+}
+
+/*
+  Profile (example: https://twitter.com/DeborahMeaden/status/1249679362863124480)
+*/
+
+body[data-hidefollowers]
+  div.css-1dbjc4n.r-18u37iz
+  a[href$="followers"]
   span.css-901oao.css-16my406.r-1qd0xha.r-ad9z0x.r-bcqeeo.r-qvutc0 {
   display: none;
 }

src/hider.ts

@@ -1,31 +1,41 @@
-import { Preferences } from "./interfaces/preferences";
+import { Preferences } from './interfaces/preferences';
 
 export class TwitterHider {
 	private preferences: Preferences;
-	
+
+	private readonly hideLikesToggleAttr = 'data-hidelikes';
+	private readonly hideRetweetsToggleAttr = 'data-hideretweets';
+	private readonly HideRepliesToggleAttr = 'data-hidereplies';
+	private readonly HideFollowersToggleAttr = 'data-hidefollowers';
+
 	constructor(preferences: Preferences) {
 		this.preferences = preferences;
 	}
 
-	public init() {
+	public init(): void {
 		this.setLikesVisibility(this.preferences.hideLikes);
 		this.setRetweetsVisibility(this.preferences.hideRetweets);
 		this.setRepliesVisibility(this.preferences.hideReplies);
+		this.setFollowersVisibility(this.preferences.hideFollowers);
 	}
 
-	private setLikesVisibility(visiblity: boolean) {
-		this.setAttributeOrRemoveIfNull(document.body, "data-hidelikes", this.trueStringOrNull(visiblity));
+	private setLikesVisibility(visiblity: boolean): void {
+		this.setAttributeOrRemoveIfNull(document.body, this.hideLikesToggleAttr, this.trueStringOrNull(visiblity));
 	}
 
-	private setRetweetsVisibility(visiblity: boolean) {
-		this.setAttributeOrRemoveIfNull(document.body, "data-hideretweets", this.trueStringOrNull(visiblity));
+	private setRetweetsVisibility(visiblity: boolean): void {
+		this.setAttributeOrRemoveIfNull(document.body, this.hideRetweetsToggleAttr, this.trueStringOrNull(visiblity));
 	}
 
-	private setRepliesVisibility(visiblity: boolean) {
-		this.setAttributeOrRemoveIfNull(document.body, "data-hidereplies", this.trueStringOrNull(visiblity));
+	private setRepliesVisibility(visiblity: boolean): void {
+		this.setAttributeOrRemoveIfNull(document.body, this.HideRepliesToggleAttr, this.trueStringOrNull(visiblity));
 	}
 
-	private setAttributeOrRemoveIfNull(element: HTMLElement, attributeName: string, value: string) {
+	private setFollowersVisibility(visibility: boolean): void {
+		this.setAttributeOrRemoveIfNull(document.body, this.HideFollowersToggleAttr, this.trueStringOrNull(visibility));
+	}
+
+	private setAttributeOrRemoveIfNull(element: HTMLElement, attributeName: string, value: string): void {
 		if (!value) {
 			element.removeAttribute(attributeName);
 			return;
@@ -34,51 +44,7 @@ export class TwitterHider {
 		element.setAttribute(attributeName, value);
 	}
 
-	private trueStringOrNull(value: boolean) {
-		return value ? "true" : null;
+	private trueStringOrNull(value: boolean): string {
+		return value ? 'true' : null;
 	}
-
-	// hideRetweetCounts() {
-	// 	const elements = [
-	// 		...document.querySelectorAll(this.selectors.retweetContainer),
-	// 		...this.findMainTweetCountByLabelText("Retweets")
-	// 	];
-
-	// 	this.omitElements(elements);
-	// }
-
-	// hideReplyCounts() {
-	// 	const elements = document.querySelectorAll(this.selectors.replyContainer);
-	// 	this.omitElements(elements);
-	// }
-
-	// omitElements(elements) {
-	// 	elements.forEach((element) => {
-	// 		this.markElementAsProcessed(element);
-
-	// 		const textElement = element.querySelector(this.selectors.countText);
-
-	// 		if (textElement !== null)
-	// 			this.omitElement(textElement);
-	// 	});
-	// }
-
-	// omitElement(element) {
-	// 	element.innerHTML = "???";
-	// }
-
-	// markElementAsProcessed(element) {
-	// 	element.setAttribute(this.processedAttribute, true);
-	// }
-
-	// findMainTweetCountByLabelText(labelText) {
-	// 	return [...document.querySelectorAll(this.selectors.countText)]
-	// 		.filter(element => element.innerHTML === labelText)
-	// 		.map(element => {
-	// 			const wrappingDiv = element.parentElement.parentElement.parentElement;
-	// 			const countContainer = wrappingDiv.children[0];
-				
-	// 			return countContainer;
-	// 		});
-	// }
 }

src/interfaces/preferences.ts

@@ -2,4 +2,5 @@ export interface Preferences {
 	hideLikes: boolean;
 	hideRetweets: boolean;
 	hideReplies: boolean;
+	hideFollowers: boolean;
 }

src/manifest.json

@@ -1,7 +1,7 @@
 {
 	"name": "Cuckoo for Twitter",
-	"description": "Hide Twitter like, retweet and reply counts.",
-	"version": "2.0.0",
+	"description": "Hide Twitter like, retweet, follower and reply counts.",
+	"version": "2.1.1",
 	"manifest_version": 2,
 	"content_scripts": [
 		{

src/package.json

@@ -1,11 +1,20 @@
 {
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^2.27.0",
+    "@typescript-eslint/parser": "^2.27.0",
+    "cpx": "1.5.0",
     "cssnano": "^4.1.10",
-    "typescript": "^3.8.3",
-    "cpx": "1.5.0"
+    "eslint": "^6.8.0",
+    "eslint-config-standard": "^14.1.1",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.1",
+    "sass": "^1.26.3",
+    "typescript": "^3.8.3"
   },
   "scripts": {
-    "build": "cpx manifest.json ../build/ && parcel build content.ts hider.ts popup.html hider.css --no-source-maps -d ../build/"
+    "build": "cpx manifest.json ../build/ && parcel build content.ts hider.ts popup.html hider.scss --no-source-maps -d ../build/"
   },
   "browserslist": [
     "last 3 Chrome versions",

src/popup.css

@@ -1,6 +1,6 @@
 h1 {
 	font-size: 18px;
-	color: #AAB8C2;
+	color: #fff;
 	margin-bottom: 15px;
 	margin: 0;
 	padding: 0;
@@ -34,6 +34,17 @@ label, #savedChanges span {
 	border: none;
 	color: #fff;
 	padding: 10px 5px;
+	cursor: pointer;
+}
+
+#savedChanges {
+	padding: 10px;
+	border-radius: 5px;
+	background-color: #599b47;
+}
+
+#savedChanges span {
+	color: #fff;
 }
 
 #banner {

src/popup.html

@@ -13,22 +13,27 @@
 	
 		<div class="container">
 			<div>
-				<label for="hidelikes">Hide likes?</label>
 				<input type="checkbox" name="hidelikes" id="hideLikes">
+				<label for="hidelikes">Hide likes?</label>
 			</div>
 
 			<div class="row">
-				<label for="hidereplies">Hide replies?</label>
 				<input type="checkbox" name="hidereplies" id="hideReplies">
+				<label for="hidereplies">Hide replies?</label>
 			</div>
 		
 			<div class="row">
-				<label for="hideretweets">Hide re-tweets?</label>
 				<input type="checkbox" name="hideretweets" id="hideRetweets">
+				<label for="hideretweets">Hide re-tweets?</label>
+			</div>
+
+			<div class="row">
+				<input type="checkbox" name="hidefollowers" id="hideFollowers">
+				<label for="hideretweets">Hide follower counts?</label>
 			</div>
 			
 			<div class="row" id="savedChanges" style="display: none">
-				<span style="color: green">Your changes have been saved. You must refresh your page before they take effect.</span>
+				<span>Your changes have been saved. You must refresh your page before they take effect.</span>
 			</div>
 
 			<div class="row">
@@ -36,6 +41,6 @@
 			</div>
 		</div>
 	</div>
-	<script src="popup.js"></script>
+	<script src="popup.ts"></script>
 </body>
 </html>

src/popup.js

@@ -1,50 +0,0 @@
-class Popup {
-	static async init() {
-		this.bind();
-
-		const preferences = await this.getPreferences();
-		this.hideLikesCheckbox.checked = preferences.hideLikes;
-		this.hideRepliesCheckbox.checked = preferences.hideReplies;
-		this.hideRetweetsCheckbox.checked = preferences.hideRetweets;
-	}
-
-	static bind() {
-		this.hideLikesCheckbox = document.getElementById("hideLikes");
-		this.hideRepliesCheckbox = document.getElementById("hideReplies");
-		this.hideRetweetsCheckbox = document.getElementById("hideRetweets");
-		this.saveButton = document.getElementById("saveButton");
-		this.saveChangesMessage = document.getElementById("savedChanges");
-
-		saveButton.addEventListener("click", async () => {
-			await this.saveChanges();
-			this.saveChangesMessage.style.display = "block";
-		});
-	}
-
-	static saveChanges() {
-		return new Promise(resolve => {
-			chrome.storage.local.set({
-				hideLikes: this.hideLikesCheckbox.checked,
-				hideRetweets: this.hideRetweetsCheckbox.checked,
-				hideReplies: this.hideRepliesCheckbox.checked
-			}, () => resolve());
-		});
-	}
-
-	static getPreferences() {
-		return new Promise(resolve => {
-			chrome.storage.local.get([
-				'hideLikes', 
-				'hideRetweets', 
-				'hideReplies'
-			], data => {
-				resolve(data);
-			});
-		});
-	}
-	
-}
-
-window.onload = () => {
-	Popup.init();
-};

src/popup.ts

@@ -0,0 +1,56 @@
+import { PreferencesRepository } from './preferences-repository';
+import { Preferences } from './interfaces/preferences';
+
+class Popup {
+	private static hideLikesCheckbox: HTMLInputElement;
+	private static hideRepliesCheckbox: HTMLInputElement;
+	private static hideRetweetsCheckbox: HTMLInputElement;
+	private static hideFollowersCheckbox: HTMLInputElement;
+	private static saveButton: HTMLButtonElement;
+	private static saveChangesMessage: HTMLElement;
+
+	static async init(): Promise<void> {
+		const preferences: Preferences = await PreferencesRepository.get();
+
+		this.bind();
+
+		this.hideLikesCheckbox.checked = preferences.hideLikes;
+		this.hideRepliesCheckbox.checked = preferences.hideReplies;
+		this.hideRetweetsCheckbox.checked = preferences.hideRetweets;
+		this.hideFollowersCheckbox.checked = preferences.hideFollowers;
+	}
+
+	static bind(): void {
+		this.hideLikesCheckbox = document.getElementById('hideLikes') as HTMLInputElement;
+		this.hideRepliesCheckbox = document.getElementById('hideReplies') as HTMLInputElement;
+		this.hideRetweetsCheckbox = document.getElementById('hideRetweets') as HTMLInputElement;
+		this.hideFollowersCheckbox = document.getElementById('hideFollowers') as HTMLInputElement;
+
+		this.saveChangesMessage = document.getElementById('savedChanges');
+
+		this.saveButton = document.getElementById('saveButton') as HTMLButtonElement;
+		this.saveButton.addEventListener('click', async () => {
+			await this.saveChanges();
+			this.saveChangesMessage.style.display = 'block';
+		});
+	}
+
+	static async saveChanges(): Promise<void> {
+		return new Promise(resolve => {
+			const updatedPreferences: Preferences = {
+				hideLikes: this.hideLikesCheckbox.checked,
+				hideRetweets: this.hideRetweetsCheckbox.checked,
+				hideReplies: this.hideRepliesCheckbox.checked,
+				hideFollowers: this.hideFollowersCheckbox.checked
+			};
+
+			PreferencesRepository.set(updatedPreferences);
+
+			resolve();
+		});
+	}
+}
+
+window.onload = (): void => {
+	Popup.init();
+};

src/preferences-repository.ts

@@ -0,0 +1,23 @@
+import { Preferences } from './interfaces/preferences';
+
+export class PreferencesRepository {
+	static readonly DefaultPreferences: Preferences = {
+		hideLikes: true,
+		hideRetweets: true,
+		hideReplies: true,
+		hideFollowers: true
+	};
+
+	static get(): Promise<Preferences> {
+		const propertyNames: string[] = Object.keys(this.DefaultPreferences);
+		return new Promise(resolve => {
+			globalThis.chrome.storage.local.get(propertyNames, (data: Preferences) => resolve(data))
+		});
+	}
+
+	static set(preferences: Preferences): Promise<void> {
+		return new Promise(resolve => {
+			globalThis.chrome.storage.local.set(preferences, () => resolve());
+		});
+	}
+}