From 53c900efd6c3c25711b603810559818d6b70f7c0 Mon Sep 17 00:00:00 2001
From: Younes Aassila <47226184+younesaassila@users.noreply.github.com>
Date: Fri, 5 Jan 2024 16:44:38 +0100
Subject: [PATCH] Add Twitch tabs report button in Options
---
src/options/options.ts | 126 +++++++++++++++++++++++++++++++++++++++++
src/options/page.html | 3 +
2 files changed, 129 insertions(+)
diff --git a/src/options/options.ts b/src/options/options.ts
index 6cece683..65218353 100644
--- a/src/options/options.ts
+++ b/src/options/options.ts
@@ -1,7 +1,9 @@
import browser from "webextension-polyfill";
import $ from "../common/ts/$";
import { readFile, saveFile } from "../common/ts/file";
+import findChannelFromTwitchTvUrl from "../common/ts/findChannelFromTwitchTvUrl";
import getProxyInfoFromUrl from "../common/ts/getProxyInfoFromUrl";
+import isChannelWhitelisted from "../common/ts/isChannelWhitelisted";
import isChromium from "../common/ts/isChromium";
import {
clearProxySettings,
@@ -86,6 +88,9 @@ const adLogExportButtonElement = $(
) as HTMLButtonElement;
const adLogClearButtonElement = $("#ad-log-clear-button") as HTMLButtonElement;
// Troubleshooting
+const twitchTabsReportButtonElement = $(
+ "#twitch-tabs-report-button"
+) as HTMLButtonElement;
const unsetPacScriptButtonElement = $(
"#unset-pac-script-button"
) as HTMLButtonElement;
@@ -596,6 +601,127 @@ adLogClearButtonElement.addEventListener("click", () => {
store.state.adLog = [];
});
+twitchTabsReportButtonElement.addEventListener("click", async () => {
+ let report = "--- Twitch Tabs report ---\n\n";
+
+ const extensionInfo = await browser.management.getSelf();
+ report += `Extension: ${extensionInfo.name} v${extensionInfo.version} (${extensionInfo.installType})\n`;
+ report += `User agent: ${window.navigator.userAgent}\n\n`;
+
+ const openedTabs = await browser.tabs.query({
+ url: ["https://www.twitch.tv/*", "https://m.twitch.tv/*"],
+ });
+ const detectedTabs = store.state.openedTwitchTabs;
+
+ // Print all opened tabs.
+ report += `Opened Twitch tabs (${openedTabs.length}):\n`;
+ for (const tab of openedTabs) {
+ report += `- ${tab.url} (id: ${tab.id}, windowId: ${tab.windowId})\n`;
+ }
+ report += "\n";
+
+ // Whitelisted tabs in `openedTabs`.
+ const openedWhitelistedTabs = openedTabs.filter(tab => {
+ const url = tab.url || tab.pendingUrl;
+ if (!url) return false;
+ const channelName = findChannelFromTwitchTvUrl(url);
+ const isWhitelisted = channelName
+ ? isChannelWhitelisted(channelName)
+ : false;
+ return isWhitelisted;
+ });
+ report += `Out of the ${openedTabs.length} opened Twitch tabs, ${
+ openedWhitelistedTabs.length
+ } ${openedWhitelistedTabs.length === 1 ? "is" : "are"} whitelisted:\n`;
+ for (const tab of openedWhitelistedTabs) {
+ report += `- ${tab.url} (id: ${tab.id}, windowId: ${tab.windowId})\n`;
+ }
+ report += "\n";
+
+ // Check for missing tabs in `detectedTabs`.
+ const missingTabs = openedTabs.filter(
+ tab => !detectedTabs.some(extensionTab => extensionTab.id === tab.id)
+ );
+ if (missingTabs.length > 0) {
+ report += `The following Twitch tabs are missing from \`store.state.openedTwitchTabs\`:\n`;
+ for (const tab of missingTabs) {
+ report += `- ${tab.url} (id: ${tab.id}, windowId: ${tab.windowId})\n`;
+ }
+ report += "\n";
+ } else {
+ report +=
+ "All opened Twitch tabs are present in `store.state.openedTwitchTabs`.\n\n";
+ }
+
+ // Check for extra tabs in `detectedTabs`.
+ const extraTabs = detectedTabs.filter(
+ extensionTab => !openedTabs.some(tab => tab.id === extensionTab.id)
+ );
+ if (extraTabs.length > 0) {
+ report += `The following Twitch tabs are extra in \`store.state.openedTwitchTabs\`:\n`;
+ for (const tab of extraTabs) {
+ report += `- ${tab.url} (id: ${tab.id}, windowId: ${tab.windowId})\n`;
+ }
+ report += "\n";
+ } else {
+ report += "No extra Twitch tabs in `store.state.openedTwitchTabs`.\n\n";
+ }
+
+ // Whitelisted tabs in `detectedTabs`.
+ const detectedWhitelistedTabs = detectedTabs.filter(tab => {
+ const url = tab.url || tab.pendingUrl;
+ if (!url) return false;
+ const channelName = findChannelFromTwitchTvUrl(url);
+ const isWhitelisted = channelName
+ ? isChannelWhitelisted(channelName)
+ : false;
+ return isWhitelisted;
+ });
+ report += `Out of the ${
+ detectedTabs.length
+ } Twitch tabs in \`store.state.openedTwitchTabs\`, ${
+ detectedWhitelistedTabs.length
+ } ${detectedWhitelistedTabs.length === 1 ? "is" : "are"} whitelisted:\n`;
+ for (const tab of detectedWhitelistedTabs) {
+ report += `- ${tab.url} (id: ${tab.id}, windowId: ${tab.windowId})\n`;
+ }
+ report += "\n";
+
+ // Should the PAC script be set?
+ const allTabsAreWhitelisted =
+ openedWhitelistedTabs.length === openedTabs.length;
+ const shouldSetPacScript = openedTabs.length > 0 && !allTabsAreWhitelisted;
+ report += `Should the PAC script be set? ${
+ shouldSetPacScript ? "Yes" : "No"
+ }\n`;
+ report += `Is the PAC script set? ${
+ store.state.chromiumProxyActive ? "Yes" : "No"
+ }\n`;
+ report += "\n";
+
+ let fixed = false;
+ if (shouldSetPacScript && !store.state.chromiumProxyActive) {
+ store.state.openedTwitchTabs = openedTabs;
+ updateProxySettings();
+ fixed = true;
+ report += "Fixed issue by setting the PAC script.\n\n";
+ } else if (!shouldSetPacScript && store.state.chromiumProxyActive) {
+ store.state.openedTwitchTabs = openedTabs;
+ clearProxySettings();
+ fixed = true;
+ report += "Fixed issue by unsetting the PAC script.\n\n";
+ }
+
+ report += "--- End of report ---\n";
+
+ saveFile("ttv-lol-pro_tabs-report.txt", report, "text/plain;charset=utf-8");
+ alert(
+ `Report saved ${
+ fixed ? "and issue fixed " : ""
+ }successfully. Please send the report to the developer (on Discord or GitHub).`
+ );
+});
+
unsetPacScriptButtonElement.addEventListener("click", () => {
if (isChromium) {
clearProxySettings();
diff --git a/src/options/page.html b/src/options/page.html
index 707faabe..7f96dfbd 100644
--- a/src/options/page.html
+++ b/src/options/page.html
@@ -194,6 +194,9 @@ Ad log
Troubleshooting
+