Refactor extension settings popup and iframe

This commit is contained in:
SethBurkart123
2023-11-14 17:42:08 +11:00
parent e16ba74bd7
commit 2c42e1766b
+25 -29
View File
@@ -799,42 +799,38 @@ export function closeSettings() {
} }
function addExtensionSettings() { function addExtensionSettings() {
let link = document.createElement('link'); const link = document.createElement('link');
link.href = chrome.runtime.getURL('popup/popup.css'); link.href = chrome.runtime.getURL('popup/popup.css');
link.type = 'text/css'; link.type = 'text/css';
link.rel = 'stylesheet'; link.rel = 'stylesheet';
document.getElementsByTagName('html')[0].appendChild(link); document.querySelector('html').appendChild(link);
let Settings = const extensionPopup = document.createElement('div');
stringToHTML( extensionPopup.classList.add('outside-container', 'hide');
String.raw` extensionPopup.id = 'ExtensionPopup';
<div class="outside-container hide" id="ExtensionPopup"> document.body.appendChild(extensionPopup);
</div>
`);
document.body.append(Settings.firstChild);
let iframe = document.createElement('iframe'); const extensionIframe = document.createElement('iframe');
iframe.src = chrome.runtime.getURL('interface/index.html'); extensionIframe.src = chrome.runtime.getURL('interface/index.html');
iframe.id = 'ExtensionIframe'; extensionIframe.id = 'ExtensionIframe';
iframe.allowTransparency = 'true'; extensionIframe.allowTransparency = true;
iframe.style.width = '384px'; extensionIframe.style.width = '384px';
iframe.style.height = '600px'; extensionIframe.style.height = '600px';
iframe.style.border = 'none'; extensionIframe.style.border = 'none';
iframe.setAttribute('excludeDarkCheck', 'true'); extensionIframe.setAttribute('excludeDarkCheck', true);
extensionPopup.appendChild(extensionIframe);
document.getElementById('ExtensionPopup').append(iframe); const container = document.getElementById('container');
const closeExtensionPopup = () => {
var container = document.getElementById('container'); if (!SettingsClicked) {
var extensionsettings = document.getElementById('ExtensionPopup'); extensionPopup.classList.add('hide');
var extensionIframe = document.getElementById('ExtensionIframe'); extensionIframe.contentWindow.postMessage('popupClosed', '*');
}
container.onclick = function (event) { SettingsClicked = false;
};
container.onclick = (event) => {
if (event.target.id !== 'AddedSettings') { if (event.target.id !== 'AddedSettings') {
if (!SettingsClicked) { closeExtensionPopup();
extensionsettings.classList.add('hide');
extensionIframe.contentWindow.postMessage('popupClosed', '*');
}
SettingsClicked = false;
} else { } else {
SettingsClicked = false; SettingsClicked = false;
} }