Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-06 19:47:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

improve display while popup loads

Browse Source
This commit is contained in:
Ajay
2022-06-02 21:08:34 -04:00
parent 96173dd901
commit 3d9221eb8d
8 changed files with 43 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/popup.html
View File

@@ -8,7 +8,7 @@
<link id="sponsorBlockStyleSheet" href="popup.css" rel="stylesheet"> <link id="sponsorBlockStyleSheet" href="popup.css" rel="stylesheet">
</head> </head>
<body id="sponsorBlockPopupBody"> <body id="sponsorBlockPopupBody" style="visibility: hidden">
<div id="sponsorblockPopup" class="sponsorBlockPageBody sb-preload"> <div id="sponsorblockPopup" class="sponsorBlockPageBody sb-preload">
<button id="sbCloseButton" title="__MSG_closePopup__" class="sbCloseButton"> <button id="sbCloseButton" title="__MSG_closePopup__" class="sbCloseButton">

2
src/content.ts
View File

@@ -1694,7 +1694,7 @@ function openInfoMenu() {
const frame = document.createElement("iframe"); const frame = document.createElement("iframe");
frame.width = "374"; frame.width = "374";
frame.height = "500"; frame.height = "500";
frame.onload = () => frame.contentWindow.postMessage("", "*"); frame.addEventListener("load", () => frame.contentWindow.postMessage("", "*"));
frame.src = chrome.extension.getURL("popup.html"); frame.src = chrome.extension.getURL("popup.html");
popup.appendChild(frame); popup.appendChild(frame);

8
src/help.ts
View File

@@ -1,15 +1,15 @@
import Config from "./config"; import Config from "./config";
import { showDonationLink } from "./utils/configUtils"; import { showDonationLink } from "./utils/configUtils";
import Utils from "./utils"; import { localizeHtmlPage } from "./utils/pageUtils";
const utils = new Utils(); import { GenericUtils } from "./utils/genericUtils";
window.addEventListener('DOMContentLoaded', init); window.addEventListener('DOMContentLoaded', init);
async function init() { async function init() {
utils.localizeHtmlPage(); localizeHtmlPage();
await utils.wait(() => Config.config !== null); await GenericUtils.wait(() => Config.config !== null);
if (!Config.config.darkMode) { if (!Config.config.darkMode) {
document.documentElement.setAttribute("data-theme", "light"); document.documentElement.setAttribute("data-theme", "light");

3
src/options.ts
View File

@@ -12,13 +12,14 @@ import Utils from "./utils";
import CategoryChooser from "./render/CategoryChooser"; import CategoryChooser from "./render/CategoryChooser";
import KeybindComponent from "./components/KeybindComponent"; import KeybindComponent from "./components/KeybindComponent";
import { showDonationLink } from "./utils/configUtils"; import { showDonationLink } from "./utils/configUtils";
import { localizeHtmlPage } from "./utils/pageUtils";
const utils = new Utils(); const utils = new Utils();
let embed = false; let embed = false;
window.addEventListener('DOMContentLoaded', init); window.addEventListener('DOMContentLoaded', init);
async function init() { async function init() {
utils.localizeHtmlPage(); localizeHtmlPage();
// selected tab // selected tab
if (location.hash != "") { if (location.hash != "") {

3
src/permissions.ts
View File

@@ -1,5 +1,6 @@
import Config from "./config"; import Config from "./config";
import Utils from "./utils"; import Utils from "./utils";
import { localizeHtmlPage } from "./utils/pageUtils";
const utils = new Utils(); const utils = new Utils();
// This is needed, if Config is not imported before Utils, things break. // This is needed, if Config is not imported before Utils, things break.
@@ -9,7 +10,7 @@ Config.config;
window.addEventListener('DOMContentLoaded', init); window.addEventListener('DOMContentLoaded', init);
async function init() { async function init() {
utils.localizeHtmlPage(); localizeHtmlPage();
const domains = document.location.hash.replace("#", "").split(","); const domains = document.location.hash.replace("#", "").split(",");

20
src/popup.ts
View File

@@ -6,6 +6,7 @@ import { Message, MessageResponse, IsInfoFoundMessageResponse } from "./messageT
import { showDonationLink } from "./utils/configUtils"; import { showDonationLink } from "./utils/configUtils";
import { AnimationUtils } from "./utils/animationUtils"; import { AnimationUtils } from "./utils/animationUtils";
import { GenericUtils } from "./utils/genericUtils"; import { GenericUtils } from "./utils/genericUtils";
import { localizeHtmlPage } from "./utils/pageUtils";
const utils = new Utils(); const utils = new Utils();
interface MessageListener { interface MessageListener {
@@ -43,25 +44,20 @@ class MessageHandler {
} }
} }
let allowPopup = (window === window.top);
// To prevent clickjacking // To prevent clickjacking
window.onmessage = async e => { let allowPopup = window === window.top;
if (e.source !== window.parent) return window.addEventListener("message", async (e) => {
if (e.source !== window.parent) return;
if (e.origin.endsWith('.youtube.com')) return allowPopup = true; if (e.origin.endsWith('.youtube.com')) return allowPopup = true;
await utils.wait(() => Config.config !== null); });
if (Config.config.supportInvidious && e.origin.includes(Config.config.invidiousInstances)) return allowPopup = true;
}
//make this a function to allow this to run on the content page //make this a function to allow this to run on the content page
async function runThePopup(messageListener?: MessageListener): Promise<void> { async function runThePopup(messageListener?: MessageListener): Promise<void> {
if (window !== window.top) await utils.wait(() => allowPopup === true);
const messageHandler = new MessageHandler(messageListener); const messageHandler = new MessageHandler(messageListener);
localizeHtmlPage();
utils.localizeHtmlPage(); await utils.wait(() => Config.config !== null && allowPopup === true, 5000, 5);
document.querySelector("body").style.removeProperty("visibility");
await utils.wait(() => Config.config !== null);
type InputPageElements = { type InputPageElements = {
whitelistToggle?: HTMLInputElement, whitelistToggle?: HTMLInputElement,

25
src/utils.ts
View File

@@ -256,31 +256,6 @@ export default class Utils {
} }
} }
localizeHtmlPage(): void {
//Localize by replacing __MSG_***__ meta tags
const localizedMessage = this.getLocalizedMessage(document.title);
if (localizedMessage) document.title = localizedMessage;
const objects = document.getElementsByClassName("sponsorBlockPageBody")[0].children;
for (let j = 0; j < objects.length; j++) {
const obj = objects[j];
const localizedMessage = this.getLocalizedMessage(obj.innerHTML.toString());
if (localizedMessage) obj.innerHTML = localizedMessage;
}
}
getLocalizedMessage(text: string): string | false {
const valNewH = text.replace(/__MSG_(\w+)__/g, function(match, v1) {
return v1 ? chrome.i18n.getMessage(v1).replace(/</g, "&#60;")
.replace(/"/g, "&quot;").replace(/\n/g, "<br/>") : "";
});
if(valNewH != text) {
return valNewH;
} else {
return false;
}
}
/** /**
* @returns {String[]} Domains in regex form * @returns {String[]} Domains in regex form
*/ */

25
src/utils/pageUtils.ts
View File

@@ -62,3 +62,28 @@ export function getHashParams(): Record<string, unknown> {
return {}; return {};
} }
export function localizeHtmlPage(): void {
//Localize by replacing __MSG_***__ meta tags
const localizedMessage = getLocalizedMessage(document.title);
if (localizedMessage) document.title = localizedMessage;
const objects = document.getElementsByClassName("sponsorBlockPageBody")[0].children;
for (let j = 0; j < objects.length; j++) {
const obj = objects[j];
const localizedMessage = getLocalizedMessage(obj.innerHTML.toString());
if (localizedMessage) obj.innerHTML = localizedMessage;
}
}
export function getLocalizedMessage(text: string): string | false {
const valNewH = text.replace(/__MSG_(\w+)__/g, function(match, v1) {
return v1 ? chrome.i18n.getMessage(v1).replace(/</g, "&#60;")
.replace(/"/g, "&quot;").replace(/\n/g, "<br/>") : "";
});
if (valNewH != text) {
return valNewH;
} else {
return false;
}
}