Feat: added support for pop-out and embedded chats.

CHANGELOG-nightly.md

@@ -3,6 +3,7 @@
 -   Added support for animated FFZ emotes
 -   Added option to hide whispers
 -   Added tooltip to error messages in /search
+-   Added support for 7TV to work in Twitch chat embeds and popouts
 
 ### 3.1.1.2100
 

manifest.config.ts

@@ -50,6 +50,7 @@ export async function getManifest(opt: ManifestOptions): Promise<Manifest.WebExt
 			{
 				matches: ["*://*.twitch.tv/*"],
 				js: ["content.js"],
+				all_frames: true,
 			},
 		],
 		options_ui: {

src/content/content.ts

@@ -1,111 +1,129 @@
 import { APP_BROADCAST_CHANNEL } from "@/common/Constant";
 import { insertEmojiVectors } from "./emoji";
 
-// Inject extension into site
-const inject = () => {
-	// Script
-	const script = document.createElement("script");
-	script.src = import.meta.env.DEV ? import.meta.env.BASE_URL + "src/site/site.ts" : chrome.runtime.getURL("site.js");
-	script.id = "seventv-extension";
-	script.type = "module";
-	script.setAttribute("worker_url", chrome.runtime.getURL("worker.js"));
-	script.setAttribute("extension_origin", chrome.runtime.getURL(""));
-
-	// Style
-	if (!import.meta.env.DEV) {
-		const style = document.createElement("link");
-		style.rel = "stylesheet";
-		style.type = "text/css";
-		style.href = chrome.runtime.getURL("assets/" + import.meta.env.VITE_APP_STYLESHEET_NAME);
-		style.setAttribute("charset", "utf-8");
-		style.setAttribute("content", "text/html");
-		style.setAttribute("http-equiv", "content-type");
-		style.id = "seventv-stylesheet";
-
-		(document.head || document.documentElement).appendChild(style);
+const shouldInject = () => {
+	//check if it is top-level window (not an iframe) or a Twitch chat popout/embed, if it is allow injection
+	return (
+		window === window.top ||
+		window.location.href.startsWith("https://www.twitch.tv/popout/") ||
+		window.location.href.startsWith("https://www.twitch.tv/embed/")
+	);
+};
+
+(() => {
+	"use strict";
+
+	if (!shouldInject()) {
+		return;
 	}
+	// Inject extension into site
+	const inject = () => {
+		// Script
+		const script = document.createElement("script");
+		script.src = import.meta.env.DEV
+			? import.meta.env.BASE_URL + "src/site/site.ts"
+			: chrome.runtime.getURL("site.js");
+		script.id = "seventv-extension";
+		script.type = "module";
+		script.setAttribute("worker_url", chrome.runtime.getURL("worker.js"));
+		script.setAttribute("extension_origin", chrome.runtime.getURL(""));
 
-	(document.head || document.documentElement).appendChild(script);
+		// Style
+		if (!import.meta.env.DEV) {
+			const style = document.createElement("link");
+			style.rel = "stylesheet";
+			style.type = "text/css";
+			style.href = chrome.runtime.getURL("assets/" + import.meta.env.VITE_APP_STYLESHEET_NAME);
+			style.setAttribute("charset", "utf-8");
+			style.setAttribute("content", "text/html");
+			style.setAttribute("http-equiv", "content-type");
+			style.id = "seventv-stylesheet";
 
-	// Insert emojis
-	setTimeout(() => {
-		insertEmojiVectors();
-	}, 1e3);
-};
+			(document.head || document.documentElement).appendChild(style);
+		}
 
-const bc = new BroadcastChannel(APP_BROADCAST_CHANNEL);
-(() => {
-	inject();
+		(document.head || document.documentElement).appendChild(script);
 
-	// Listen for requests to set up an extension permission
-	bc.addEventListener("message", (ev) => {
-		switch (ev.data.type) {
-			case "seventv-create-permission-listener": {
-				const { selector, id, origins, permissions } = ev.data.data as PermissionRequestEvent;
+		// Insert emojis
+		setTimeout(() => {
+			insertEmojiVectors();
+		}, 1e3);
+	};
 
-				const btn = document.querySelector<HTMLElement>(selector);
-				if (!btn) return;
+	const bc = new BroadcastChannel(APP_BROADCAST_CHANNEL);
+	(() => {
+		inject();
 
-				btn.addEventListener("switch", () => {
-					chrome.runtime.sendMessage(
-						{
-							type: "permission-request",
-							data: { id, origins, permissions },
-						},
-						{},
-						(response: { id: string; granted: boolean }) => {
-							if (!response) return;
+		// Listen for requests to set up an extension permission
+		bc.addEventListener("message", (ev) => {
+			switch (ev.data.type) {
+				case "seventv-create-permission-listener": {
+					const { selector, id, origins, permissions } = ev.data.data as PermissionRequestEvent;
+
+					const btn = document.querySelector<HTMLElement>(selector);
+					if (!btn) return;
+
+					btn.addEventListener("switch", () => {
+						chrome.runtime.sendMessage(
+							{
+								type: "permission-request",
+								data: { id, origins, permissions },
+							},
+							{},
+							(response: { id: string; granted: boolean }) => {
+								if (!response) return;
 
+								bc.postMessage({
+									type: "seventv-permission-granted",
+									data: { id: response.id, granted: response.granted },
+								});
+							},
+						);
+					});
+					break;
+				}
+				case "seventv-update-check": {
+					chrome.runtime.sendMessage(
+						{ type: "update-check" },
+						(response: { status: string; version: string }) => {
 							bc.postMessage({
-								type: "seventv-permission-granted",
-								data: { id: response.id, granted: response.granted },
+								type: "seventv-update-check-result",
+								data: { status: response.status, version: response.version },
 							});
 						},
 					);
-				});
-				break;
-			}
-			case "seventv-update-check": {
-				chrome.runtime.sendMessage(
-					{ type: "update-check" },
-					(response: { status: string; version: string }) => {
-						bc.postMessage({
-							type: "seventv-update-check-result",
-							data: { status: response.status, version: response.version },
-						});
-					},
-				);
+				}
 			}
-		}
-	});
+		});
 
-	chrome.runtime.onMessage.addListener((msg) => {
-		switch (msg.type) {
-			case "update-ready": {
-				onUpdateDownloaded(msg.data.version ?? "");
-				break;
+		chrome.runtime.onMessage.addListener((msg) => {
+			switch (msg.type) {
+				case "update-ready": {
+					onUpdateDownloaded(msg.data.version ?? "");
+					break;
+				}
+				case "settings-sync": {
+					onSettingsUpdated(msg.data.settings ?? []);
+					break;
+				}
 			}
-			case "settings-sync": {
-				onSettingsUpdated(msg.data.settings ?? []);
-				break;
-			}
-		}
-	});
-})();
+		});
+	})();
 
-function onUpdateDownloaded(version: string): void {
-	bc.postMessage({
-		type: "seventv-update-ready",
-		data: { version },
-	});
-}
+	function onUpdateDownloaded(version: string): void {
+		bc.postMessage({
+			type: "seventv-update-ready",
+			data: { version },
+		});
+	}
 
-function onSettingsUpdated(settings: SevenTV.Setting<SevenTV.SettingNode>[]): void {
-	bc.postMessage({
-		type: "seventv-settings-sync",
-		data: { nodes: settings },
-	});
-}
+	function onSettingsUpdated(settings: SevenTV.Setting<SevenTV.SettingNode>[]): void {
+		bc.postMessage({
+			type: "seventv-settings-sync",
+			data: { nodes: settings },
+		});
+	}
+})();
 
 interface PermissionRequestEvent {
 	selector: string;