100% compat with widgets/<service>.js

This commit is contained in:
Hygna 2022-09-21 20:38:30 +01:00
parent b2b9adfa97
commit d86fecab3f
7 changed files with 188 additions and 75 deletions

View File

@ -385,7 +385,7 @@ function initDefaults() {
.then(response => response.text()) .then(response => response.text())
.then(async data => { .then(async data => {
let dataJson = JSON.parse(data) let dataJson = JSON.parse(data)
redirects = dataJson redirects = dataJson.slice()
browser.storage.local.get(["cloudflareBlackList", "authenticateBlackList", "offlineBlackList"], async r => { browser.storage.local.get(["cloudflareBlackList", "authenticateBlackList", "offlineBlackList"], async r => {
for (const service in config.services) { for (const service in config.services) {
if (config.services[service].targets == "datajson") { if (config.services[service].targets == "datajson") {

View File

@ -180,7 +180,7 @@
"setEndpoint": "/applysettings" "setEndpoint": "/applysettings"
}, },
"name": "Bibliogram", "name": "Bibliogram",
"instanceList": false "instanceList": true
} }
}, },
"targets": ["^https?:\\/{2}(www\\.)?instagram\\.com"], "targets": ["^https?:\\/{2}(www\\.)?instagram\\.com"],

View File

@ -46,8 +46,8 @@
</select> </select>
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_protocol__"></h4> <h4 data-localise="__MSG_network__">Network</h4>
<select id="protocol"> <select id="network">
<option value="clearnet">Clearnet</option> <option value="clearnet">Clearnet</option>
<option value="tor">Tor</option> <option value="tor">Tor</option>
<option value="i2p">I2P</option> <option value="i2p">I2P</option>
@ -55,10 +55,10 @@
</select> </select>
</div> </div>
<div id="protocol-fallback"> <div id="network-fallback">
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_protocolFallback__">Fallback to normal if no instances are available for the current protocol</h4> <h4 data-localise="__MSG_networkFallback__">Fallback to normal if no instances are available for the current network</h4>
<input id="protocol-fallback-checkbox" type="checkbox"> <input id="network-fallback-checkbox" type="checkbox">
</div> </div>
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
@ -254,15 +254,13 @@
</select> </select>
</div> </div>
<div id="youtube-embedFrontend">
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_embed_frontend__">Embed Frontend</h4> <h4 data-localise="__MSG_embed_frontend__">Embed Frontend</h4>
<select id="youtube-embed_frontend"> <select id="youtube-embedFrontend">
<option value="invidious">invidious</option> <option value="invidious">Invidious</option>
<option value="piped">piped</option> <option value="piped">Piped</option>
</select> </select>
</div>
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_redirectType__">Redirect Type</h4> <h4 data-localise="__MSG_redirectType__">Redirect Type</h4>
@ -998,7 +996,103 @@
<input id="instagram-enabled" type="checkbox"> <input id="instagram-enabled" type="checkbox">
</div> </div>
<hr> <hr>
<div id="bibliogram">
<div class="clearnet">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form class="custom-instance-form">
<div class="some-block option-block">
<input class="custom-instance" placeholder="http://bibliogram.org" type="url">
<button class="add add-instance" type="submit">
<svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
</svg>
</button>
</div>
</form>
<div class="checklist custom-checklist"></div>
<div class="buttons buttons-inline">
<label class="button button-inline" id="latency-bibliogram-label" for="latency-bibliogram">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
<path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path>
</svg>&nbsp;
<x data-localise="__MSG_testInstancesLatency__">Test Instances Latency</x>
</label>
<input class="button button-inline" id="latency-bibliogram" style="display:none;">
</div>
</div>
<div class="tor">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form class="custom-instance-form">
<div class="some-block option-block">
<input class="custom-instance" placeholder="http://bibliogram.onion" type="url">
<button class="add add-instance" type="submit">
<svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
</svg>
</button>
</div>
</form>
<div class="checklist custom-checklist"></div>
</div>
<div class="i2p">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form class="custom-instance-form">
<div class="some-block option-block">
<input class="custom-instance" placeholder="http://bibliogram.i2p" type="url">
<button class="add add-instance" type="submit">
<svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
</svg>
</button>
</div>
</form>
<div class="checklist custom-checklist"></div>
</div>
<div class="loki">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form class="custom-instance-form">
<div class="some-block option-block">
<input class="custom-instance" placeholder="http://bibliogram.loki" type="url">
<button class="add add-instance" type="submit">
<svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
</svg>
</button>
</div>
</form>
<div class="checklist custom-checklist"></div>
</div>
</div>
</section> </section>
<section class="option-block" id="tiktok_page"> <section class="option-block" id="tiktok_page">
<div class="some-block option-block"> <div class="some-block option-block">
@ -2095,14 +2189,12 @@
</select> </select>
</div> </div>
<div id="lbry-embedFrontend">
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_embed_frontend__">Embed Frontend</h4> <h4 data-localise="__MSG_embed_frontend__">Embed Frontend</h4>
<select id="lbry-embed_frontend"> <select id="lbry-embedFrontend">
<option value="librarian">librarian</option> <option value="librarian">Librarian</option>
</select> </select>
</div>
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_redirectType__">Redirect Type</h4> <h4 data-localise="__MSG_redirectType__">Redirect Type</h4>

View File

@ -12,17 +12,17 @@
</select> </select>
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_protocol__"></h4> <h4 data-localise="__MSG_network__">Network</h4>
<select id="protocol"> <select id="network">
<% for (const network in config.networks) { -%> <% for (const network in config.networks) { -%>
<option value="<%= network %>"><%= config.networks[network].name %></option> <option value="<%= network %>"><%= config.networks[network].name %></option>
<% }; %> <% }; %>
</select> </select>
</div> </div>
<div id="protocol-fallback"> <div id="network-fallback">
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_protocolFallback__">Fallback to normal if no instances are available for the current protocol</h4> <h4 data-localise="__MSG_networkFallback__">Fallback to normal if no instances are available for the current network</h4>
<input id="protocol-fallback-checkbox" type="checkbox"> <input id="network-fallback-checkbox" type="checkbox">
</div> </div>
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">

View File

@ -86,15 +86,15 @@ themeElement.addEventListener("change", event => {
location.reload() location.reload()
}) })
let protocolElement = document.getElementById("protocol") let networkElement = document.getElementById("network")
protocolElement.addEventListener("change", event => { networkElement.addEventListener("change", event => {
const value = event.target.options[protocol.selectedIndex].value const value = event.target.options[network.selectedIndex].value
browser.storage.local.set({ network: value }) browser.storage.local.set({ network: value })
location.reload() location.reload()
}) })
let protocolFallbackCheckbox = document.getElementById("protocol-fallback-checkbox") let networkFallbackCheckbox = document.getElementById("network-fallback-checkbox")
protocolFallbackCheckbox.addEventListener("change", event => { networkFallbackCheckbox.addEventListener("change", event => {
browser.storage.local.set({ networkFallback: event.target.checked }) browser.storage.local.set({ networkFallback: event.target.checked })
}) })
@ -138,16 +138,16 @@ browser.storage.local.get(
r => { r => {
autoRedirectElement.checked = r.autoRedirect autoRedirectElement.checked = r.autoRedirect
themeElement.value = r.theme themeElement.value = r.theme
protocolElement.value = r.network networkElement.value = r.network
protocolFallbackCheckbox.checked = r.networkFallback networkFallbackCheckbox.checked = r.networkFallback
latencyOutput.value = r.latencyThreshold latencyOutput.value = r.latencyThreshold
// firstPartyIsolate.checked = r.firstPartyIsolate; // firstPartyIsolate.checked = r.firstPartyIsolate;
let protocolFallbackElement = document.getElementById("protocol-fallback") let networkFallbackElement = document.getElementById("network-fallback")
if (protocolElement.value == "clearnet") { if (networkElement.value == "clearnet") {
protocolFallbackElement.style.display = "none" networkFallbackElement.style.display = "none"
} else { } else {
protocolFallbackElement.style.display = "block" networkFallbackElement.style.display = "block"
} }
instanceTypeElement.addEventListener("change", event => { instanceTypeElement.addEventListener("change", event => {
@ -200,7 +200,7 @@ browser.storage.local.get(
if (instanceType == "url") { if (instanceType == "url") {
if (nameCustomInstanceInput.validity.valid) { if (nameCustomInstanceInput.validity.valid) {
let url = new URL(nameCustomInstanceInput.value) let url = new URL(nameCustomInstanceInput.value)
val = `${url.protocol}//${url.host}` val = `${url.network}//${url.host}`
if (!exceptionsCustomInstances.url.includes(val)) exceptionsCustomInstances.url.push(val) if (!exceptionsCustomInstances.url.includes(val)) exceptionsCustomInstances.url.push(val)
} }
} else if (instanceType == "regex") { } else if (instanceType == "regex") {

View File

@ -18,17 +18,15 @@
</select> </select>
</div> </div>
<% if (config.services[service].embeddable) { _%> <% if (config.services[service].embeddable) { _%>
<div id="<%= service %>-embedFrontend"> <div class="some-block option-block">
<div class="some-block option-block"> <h4 data-localise="__MSG_embed_frontend__">Embed Frontend</h4>
<h4 data-localise="__MSG_embed_frontend__">Embed Frontend</h4> <select id="<%= service %>-embedFrontend">
<select id="<%= service %>-embed_frontend"> <% for (const frontend in config.services[service].frontends) { -%>
<% for (const frontend in config.services[service].frontends) { -%> <% if (config.services[service].frontends[frontend].embeddable) { _%>
<% if (config.services[service].frontends[frontend].embeddable) { _%> <option value="<%= frontend %>"><%= config.services[service].frontends[frontend].name %></option>
<option value="<%= frontend %>"><%= frontend %></option> <% } _%>
<% } _%> <% } %>
<% } %> </select>
</select>
</div>
</div> </div>
<% } _%> <% } _%>
<% } _%> <% } _%>

View File

@ -16,19 +16,22 @@ function getConfig() {
}) })
} }
await getConfig() function getNetwork() {
return new Promise(resolve => {
browser.storage.local.get("network", r => {
selectedNetwork = r.network
resolve()
})
})
}
browser.storage.local.get("network", r => { await getConfig()
selectedNetwork = r.network await getNetwork()
})
function changeFrontendsSettings(service) { function changeFrontendsSettings(service) {
for (const frontend in config.services[service].frontends) { for (const frontend in config.services[service].frontends) {
if (config.services[service].frontends[frontend].instanceList && config.services[service].frontends.length > 1) { if (config.services[service].frontends[frontend].instanceList) {
const frontendDiv = document.getElementById(frontend) const frontendDiv = document.getElementById(frontend)
if (divs[service].frontend == null) {
console.log(frontend)
}
if (frontend == divs[service].frontend.value) { if (frontend == divs[service].frontend.value) {
frontendDiv.style.display = "block" frontendDiv.style.display = "block"
} else { } else {
@ -36,25 +39,43 @@ function changeFrontendsSettings(service) {
} }
} }
} }
if (config.services[service].embeddable) {
if (!config.services[service].frontends[divs[service].frontend.value].instanceList) {
divs[service].embedFrontend.disabled = false
for (const frontend in config.services[service].frontends) {
if (config.services[service].frontends[frontend].embeddable) {
const frontendDiv = document.getElementById(frontend)
if (frontend == divs[service].embedFrontend.value) {
frontendDiv.style.display = "block"
} else {
frontendDiv.style.display = "none"
}
}
}
} else if (Object.keys(config.services[service].frontends) > 1) divs[service].embedFrontend.disabled = true
}
} }
function changeNetworkSettings(selectedNetwork) { function changeNetworkSettings() {
for (const frontend in config.frontends) { for (const service in config.services) {
if (config.services[service].frontends[frontend].instanceList) { for (const frontend in config.services[service].frontends) {
const frontendDiv = document.getElementById(frontend) if (config.services[service].frontends[frontend].instanceList) {
for (const network in config.networks) { const frontendDiv = document.getElementById(frontend)
const networkDiv = frontendDiv.getElementsByClassName(network)[0] for (const network in config.networks) {
if (network == selectedNetwork) { const networkDiv = frontendDiv.getElementsByClassName(network)[0]
networkDiv.style.display = "block" if (network == selectedNetwork) {
} else { networkDiv.style.display = "block"
networkDiv.style.display = "none" } else {
networkDiv.style.display = "none"
}
} }
} }
} }
} }
} }
changeNetworkSettings(selectedNetwork) changeNetworkSettings()
for (const service in config.services) { for (const service in config.services) {
divs[service] = {} divs[service] = {}
divs[service][service] = document.getElementById(`${service}_page`) divs[service][service] = document.getElementById(`${service}_page`)
@ -62,18 +83,20 @@ for (const service in config.services) {
divs[service][option] = document.getElementById(`${service}-${option}`) divs[service][option] = document.getElementById(`${service}-${option}`)
browser.storage.local.get([`${service + utils.camelCase(option)}`], r => { browser.storage.local.get([`${service + utils.camelCase(option)}`], r => {
if (typeof config.services[service].options[option] == "boollean") divs[service][option].checked = r[service + utils.camelCase(option)] if (typeof config.services[service].options[option] == "boolean") divs[service][option].checked = r[service + utils.camelCase(option)]
else divs[service][option].value = !r[service + utils.camelCase(option)] else divs[service][option].value = r[service + utils.camelCase(option)]
}) })
divs[service][option].addEventListener("change", () => { divs[service][option].addEventListener("change", () => {
if (typeof config.services[service].options[option] == "boollean") browser.storage.local.set({ [service + utils.camelCase(option)]: divs[service][option].checked }) if (typeof config.services[service].options[option] == "boolean") browser.storage.local.set({ [service + utils.camelCase(option)]: divs[service][option].checked })
else browser.storage.local.set({ [service + utils.camelCase(option)]: divs[service][option].value }) else browser.storage.local.set({ [service + utils.camelCase(option)]: divs[service][option].value })
changeFrontendsSettings() changeFrontendsSettings(service)
}) })
} }
changeFrontendsSettings(service) if (Object.keys(config.services[service].frontends).length > 1) {
changeFrontendsSettings(service)
}
for (const frontend in config.services[service].frontends) { for (const frontend in config.services[service].frontends) {
if (config.services[service].frontends[frontend].instanceList) { if (config.services[service].frontends[frontend].instanceList) {