Fix twitter flicker

src/intercept.ts

@@ -15,6 +15,7 @@ import * as Github from './sites/github';
 import * as LinkedIn from './sites/linkedin';
 import * as Instagram from './sites/instagram';
 import * as YouTube from './sites/youtube';
+import * as TikTok from './sites/tiktok';
 import { createStore, Store } from './store';
 
 const store = createStore();
@@ -35,6 +36,8 @@ export function eradicate(store: Store) {
 		YouTube.eradicate(store);
 	} else if (Instagram.checkSite()) {
 		Instagram.eradicate(store);
+	} else if (TikTok.checkSite()) {
+		TikTok.eradicate(store);
 	} else if (FbClassic.checkSite()) {
 		FbClassic.eradicate(store);
 	} else {

src/manifest-chrome.json

@@ -24,7 +24,9 @@
 		"https://www.github.com/*",
 		"https://github.com/*",
 		"http://www.instagram.com/*",
-		"https://www.instagram.com/*"
+		"https://www.instagram.com/*",
+		"https://www.tiktok.com/*",
+		"https://tiktok.com/*"
 	],
 	"action": {
 		"default_icon": {

src/manifest.json

@@ -24,7 +24,9 @@
 		"https://www.github.com/*",
 		"https://github.com/*",
 		"http://www.instagram.com/*",
-		"https://www.instagram.com/*"
+		"https://www.instagram.com/*",
+		"https://www.tiktok.com/*",
+		"https://tiktok.com/*"
 	],
 	"browser_action": {
 		"default_icon": {

src/sites/index.ts

@@ -2,6 +2,7 @@ import instagramCss from './instagram.str.css';
 import twitterCss from './twitter.str.css';
 import linkedinCss from './linkedin.str.css';
 import githubCss from './github.str.css';
+import tiktokCss from './tiktok.str.css';
 
 export type SiteId =
 	| 'facebook'
@@ -11,7 +12,8 @@ export type SiteId =
 	| 'linkedin'
 	| 'youtube'
 	| 'instagram'
-	| 'github';
+	| 'github'
+	| 'tiktok';
 
 export const Sites: Record<SiteId, Site> = {
 	facebook: {
@@ -97,6 +99,13 @@ export const Sites: Record<SiteId, Site> = {
 		origins: ['https://github.com/*'],
 		css: githubCss,
 	},
+	tiktok: {
+		label: 'TikTok',
+		domain: ['tiktok.com'],
+		paths: ['/'],
+		origins: ['https://www.tiktok.com/*', 'https://tiktok.com/*'],
+		css: tiktokCss,
+	},
 };
 
 export type Site = {

src/sites/tiktok.str.css

@@ -0,0 +1,10 @@
+/* TikTok feed */
+html:not([data-nfe-enabled='false']) main > :not(#nfe-container) {
+	display: none;
+}
+
+html:not([data-nfe-enabled='false']) main > #nfe-container {
+	width: 100%;
+	font-size: 24px;
+	padding: 128px;
+}

src/sites/tiktok.ts

@@ -0,0 +1,36 @@
+import injectUI, { isAlreadyInjected } from '../lib/inject-ui';
+import { isEnabled } from '../lib/is-enabled';
+import { Store } from '../store';
+import { injectCSS } from './shared';
+
+export function checkSite(): boolean {
+	return window.location.host.includes('tiktok.com');
+}
+
+export function eradicate(store: Store) {
+	injectCSS('tiktok');
+
+	function eradicateRetry() {
+		const settings = store.getState().settings;
+		if (settings == null || !isEnabled(settings)) {
+			return;
+		}
+
+		// Don't do anything if the UI hasn't loaded yet
+		const feed = document.querySelector('main');
+		if (feed == null) {
+			return;
+		}
+
+		const container = feed;
+
+		// Add News Feed Eradicator quote/info panel
+		if (feed && !isAlreadyInjected()) {
+			injectUI(feed, store);
+		}
+	}
+
+	// This delay ensures that the elements have been created by TikTok's
+	// scripts before we attempt to replace them
+	setInterval(eradicateRetry, 1000);
+}

src/sites/twitter.str.css

@@ -7,11 +7,10 @@ html:not([data-nfe-enabled='false'])
 	padding: 16px;
 }
 
-html:not([data-nfe-enabled='false']) div[aria-label*='Timeline'],
-html:not([data-nfe-enabled='false']) div[data-testid="primaryColumn"] > div:last-child > div:last-child
+html:not([data-nfe-enabled='false']) div[aria-label*='Timeline']:not(.nfe-processed),
+html:not([data-nfe-enabled='false']) div[data-testid="primaryColumn"] > div:last-child > div:last-child:not(.nfe-processed)
 {
-	opacity: 0 !important;
-	pointer-events: none !important;
+	display: none !important;
 }
 
 /* "What's Happening" section on Twitter */

src/sites/twitter.ts

@@ -43,6 +43,10 @@ export function eradicate(store: Store) {
 
 		// Add News Feed Eradicator quote/info panel
 		if (container && !isAlreadyInjected()) {
+			// Clear the feed content to prevent any remaining posts from showing
+			container.innerHTML = '';
+			// Mark the container as processed by NFE
+			container.classList.add('nfe-processed');
 			injectUI(container, store);
 		}
 	}