kouhais-mirrors
/
safer-indie-wiki-buddy
mirror of https://github.com/KevinPayravi/indie-wiki-buddy.git
1
0
Fork 0
Code

Add option for BreezeWiki banner

pull/400/merge
Kevin Payravi 2024-01-06 18:12:01 -06:00
parent c09aa87a5f
commit 8b4b40168a
6 changed files with 309 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
background.js
View File

@ -330,11 +330,11 @@ async function main(url, tabId) {
// Self-clear notification after 6 seconds
setTimeout(() => { chrome.notifications.clear(notifID); }, 6000);
}
} else if ((storage.breezewiki ?? 'off') === 'on') {
} else if ((storage.breezewiki ?? 'off') === 'on' || (storage.breezewiki ?? 'off') === 'redirect') {
redirectToBreezeWiki(storage, tabId, url);
}
}
} else if ((storage.breezewiki ?? 'off') === 'on') {
} else if ((storage.breezewiki ?? 'off') === 'on' || (storage.breezewiki ?? 'off') === 'redirect') {
redirectToBreezeWiki(storage, tabId, url);
}
}

281
content-banners.js
View File

@ -45,84 +45,195 @@ async function getData() {
return sites;
}
function displayRedirectBanner(newUrl, id, destinationName, destinationLanguage, tags, storage) {
// Output CSS
styleString = `
#indie-wiki-banner {
font-family: sans-serif;
width: 100%;
z-index: 2147483647;
position: sticky;
top: 0;
text-align: center;
background-color: #acdae2;
padding: 8px 10px;
function outputCSS() {
if (!document.getElementById('iwb-banner-styles')) {
styleString = `
#indie-wiki-banner-container {
font-family: sans-serif;
width: 100%;
z-index: 2147483647;
position: sticky;
top: 0;
text-align: center;
}
.indie-wiki-banner {
background-color: #acdae2;
padding: 8px 10px;
font-size: 12px;
}
.indie-wiki-banner-exit {
float: right;
font-size: 20px;
color: #333;
cursor: pointer;
}
.indie-wiki-banner-controls {
padding-bottom: 5px;
}
.indie-wiki-banner-big-text {
font-size: 14px;
line-height: 24px;
margin-top: 5px;
}
.indie-wiki-banner-big-text .indie-wiki-banner-link{
font-size: 16px;
}
.indie-wiki-banner-link {
font-weight: 600;
color: #000080;
cursor: pointer;
padding: 0 10px;
display: block;
width: fit-content;
margin: 0 auto;
}
.indie-wiki-banner-link:hover {
text-decoration: underline;
color: #000080;
}
.indie-wiki-banner-link-small {
display: inline-block;
font-size: 12px;
min-width: 180px;
}
.indie-wiki-banner-disabled {
color: #333;
cursor: default;
}
.indie-wiki-banner-disabled:hover {
text-decoration: none;
}
.indie-wiki-banner-hidden {
display: none;
}
`
style = document.createElement('style');
style.id = 'iwb-banner-styles';
style.textContent = styleString;
document.head.append(style);
}
}
function outputBannerContainer() {
if (!document.getElementById('indie-wiki-banner-container')) {
const container = document.createElement('div');
container.id = 'indie-wiki-banner-container';
document.body.insertAdjacentElement('beforeBegin', container);
}
}
function processBreezeWikiBanner(storage) {
// Output BreezeWiki banner, if enabled:
if (storage.breezewiki === 'banner' && currentURL.toString().includes('.fandom.com/wiki/')) {
// Extract article from URL
const subdomain = currentURL.hostname.split(".")[0];
const article = currentURL.toString().split('fandom.com/wiki/')[1].replaceAll('%20', '_');
breezewikiHost = '';
if (!(storage.breezewikiHost ?? null)) {
fetch('https://bw.getindie.wiki/instances.json')
.then((response) => {
if (response.ok) {
return response.json();
}
throw new Error('Indie Wiki Buddy failed to get BreezeWiki data.');
}).then((breezewikiHosts) => {
breezewikiHosts = breezewikiHosts.filter(host =>
chrome.runtime.getManifest().version.localeCompare(host.iwb_version,
undefined,
{ numeric: true, sensitivity: 'base' }
) >= 0
);
// Check if BreezeWiki's main site is available
let breezewikiMain = breezewikiHosts.filter(host => host.instance === 'https://breezewiki.com');
if (breezewikiMain.length > 0) {
chrome.storage.sync.set({ 'breezewikiHost': breezewikiMain[0].instance });
} else {
// If BreezeWiki.com is not available, set to a random mirror
try {
chrome.storage.sync.set({ 'breezewikiHost': breezewikiHosts[Math.floor(Math.random() * breezewikiHosts.length)].instance });
} catch (e) {
console.log('Indie Wiki Buddy failed to get BreezeWiki data: ' + e);
}
}
chrome.storage.sync.set({ 'breezewikiHostOptions': breezewikiHosts });
chrome.storage.sync.set({ 'breezewikiHostFetchTimestamp': Date.now() });
breezewikiHost = host;
}).catch((e) => {
console.log('Indie Wiki Buddy failed to get BreezeWiki data: ' + e);
chrome.storage.sync.set({ 'breezewikiHost': 'https://breezewiki.com' });
});
} else {
if (storage.breezewikiHost === 'CUSTOM') {
breezewikiHost = storage.breezewikiCustomHost || 'https://breezewiki.com';
} else {
breezewikiHost = storage.breezewikiHost;
}
}
#indie-wiki-banner-exit {
float: right;
font-size: 20px;
color: #333;
cursor: pointer;
}
#indie-wiki-banner-controls {
padding-bottom: 5px;
}
.indie-wiki-banner-big-text {
font-size: 14px;
line-height: 24px;
margin-top: 5px;
}
.indie-wiki-banner-link {
font-size: 16px;
font-weight: 600;
color: #000080;
cursor: pointer;
padding: 0 10px;
display: block;
width: fit-content;
margin: 0 auto;
}
.indie-wiki-banner-link:hover {
text-decoration: underline;
color: #000080;
}
.indie-wiki-banner-link-small {
display: inline-block;
font-size: 12px;
min-width: 180px;
}
.indie-wiki-banner-disabled {
color: #333;
cursor: default;
}
.indie-wiki-banner-disabled:hover {
text-decoration: none;
}
.indie-wiki-banner-hidden {
display: none;
}
`
style = document.createElement('style');
style.textContent = styleString;
document.head.append(style);
displayBreezewikiBanner(breezewikiHost + '/' + subdomain + '/wiki/' + article);
}
}
function displayBreezewikiBanner(newUrl) {
outputCSS();
// Output banner
let banner = document.createElement('div');
banner.id = 'indie-wiki-banner';
banner.id = 'indie-wiki-banner-bw';
banner.classList.add('indie-wiki-banner');
// Output main banner text
let bannerText = document.createElement('span');
let bannerWikiLink = document.createElement('a');
bannerWikiLink.classList.add('indie-wiki-banner-link');
bannerWikiLink.href = newUrl;
bannerWikiLink.textContent = 'View this Fandom wiki through BreezeWiki';
bannerText.appendChild(bannerWikiLink);
banner.appendChild(bannerText);
// Function to insert banner into DOM before body element
function addBannerToDOM() {
// Check if document is in a ready state
if (document.readyState === 'interactive' || document.readyState === 'complete') {
// Add banner container if not already in doc
outputBannerContainer();
// Ensure banner isn't already outputted
if (!document.querySelector(':root > #indie-wiki-banner-bw')) {
document.getElementById('indie-wiki-banner-container').appendChild(banner);
}
// Remove readystatechange listener
document.removeEventListener('readystatechange', addBannerToDOM);
}
}
document.addEventListener('readystatechange', addBannerToDOM);
addBannerToDOM();
}
function displayRedirectBanner(newUrl, id, destinationName, destinationLanguage, tags, storage) {
outputCSS();
// Output banner
let banner = document.createElement('div');
banner.id = 'indie-wiki-banner-redirect';
banner.classList.add('indie-wiki-banner');
let bannerExit = document.createElement('div');
bannerExit.id = 'indie-wiki-banner-exit';
bannerExit.classList.add('indie-wiki-banner-exit');
banner.appendChild(bannerExit);
bannerExit.textContent = '✕';
bannerExit.onclick = function () { this.parentElement.remove(); };
// Output control links container
let bannerControls = document.createElement('div');
bannerControls.id = 'indie-wiki-banner-controls';
bannerControls.classList.add('indie-wiki-banner-controls');
banner.appendChild(bannerControls);
// Output "restore banner" link
let bannerRestoreLink = document.createElement('div');
bannerRestoreLink.id = 'indie-wiki-banner-restore';
bannerRestoreLink.classList.add('indie-wiki-banner-restore');
bannerRestoreLink.classList.add('indie-wiki-banner-link');
bannerRestoreLink.classList.add('indie-wiki-banner-link-small');
bannerRestoreLink.classList.add('indie-wiki-banner-hidden');
@ -134,16 +245,16 @@ function displayRedirectBanner(newUrl, id, destinationName, destinationLanguage,
chrome.storage.sync.set({ 'wikiSettings': response.wikiSettings });
e.target.textContent = '✓ Banner restored';
e.target.classList.add('indie-wiki-banner-disabled');
document.getElementById('indie-wiki-banner-redirect').textContent = '↪ Auto redirect this wiki';
document.getElementById('indie-wiki-banner-redirect').classList.remove('indie-wiki-banner-disabled');
document.getElementById('indie-wiki-banner-disable').textContent = '✕ Disable banner for this wiki';
document.getElementById('indie-wiki-banner-disable').classList.remove('indie-wiki-banner-disabled');
bannerRestoreLink.querySelector('.indie-wiki-banner-redirect').textContent = '↪ Auto redirect this wiki';
bannerRestoreLink.querySelector('.indie-wiki-banner-redirect').classList.remove('indie-wiki-banner-disabled');
bannerRestoreLink.querySelector('.indie-wiki-banner-disable').textContent = '✕ Disable banner for this wiki';
bannerRestoreLink.querySelector('.indie-wiki-banner-disable').classList.remove('indie-wiki-banner-disabled');
});
}
// Output "disable banner" link
let bannerDisableLink = document.createElement('div');
bannerDisableLink.id = 'indie-wiki-banner-disable';
bannerDisableLink.classList.add('indie-wiki-banner-disable');
bannerDisableLink.classList.add('indie-wiki-banner-link');
bannerDisableLink.classList.add('indie-wiki-banner-link-small');
bannerDisableLink.textContent = '✕ Disable banner for this wiki';
@ -154,17 +265,17 @@ function displayRedirectBanner(newUrl, id, destinationName, destinationLanguage,
chrome.storage.sync.set({ 'wikiSettings': response.wikiSettings });
e.target.textContent = '✓ Banner disabled';
e.target.classList.add('indie-wiki-banner-disabled');
document.getElementById('indie-wiki-banner-redirect').textContent = '↪ Auto redirect this wiki';
document.getElementById('indie-wiki-banner-redirect').classList.remove('indie-wiki-banner-disabled');
document.getElementById('indie-wiki-banner-restore').textContent = '⎌ Restore banner';
document.getElementById('indie-wiki-banner-restore').classList.remove('indie-wiki-banner-hidden');
document.getElementById('indie-wiki-banner-restore').classList.remove('indie-wiki-banner-disabled');
bannerDisableLink.querySelector('.indie-wiki-banner-redirect').textContent = '↪ Auto redirect this wiki';
bannerDisableLink.querySelector('.indie-wiki-banner-redirect').classList.remove('indie-wiki-banner-disabled');
bannerDisableLink.querySelector('.indie-wiki-banner-restore').textContent = '⎌ Restore banner';
bannerDisableLink.querySelector('.indie-wiki-banner-restore').classList.remove('indie-wiki-banner-hidden');
bannerDisableLink.querySelector('.indie-wiki-banner-restore').classList.remove('indie-wiki-banner-disabled');
});
}
// Output "auto redirect" link
let bannerRedirectLink = document.createElement('div');
bannerRedirectLink.id = 'indie-wiki-banner-redirect';
bannerRedirectLink.classList.add('indie-wiki-banner-redirect');
bannerRedirectLink.classList.add('indie-wiki-banner-link');
bannerRedirectLink.classList.add('indie-wiki-banner-link-small');
bannerRedirectLink.textContent = '↪ Auto redirect this wiki';
@ -175,11 +286,11 @@ function displayRedirectBanner(newUrl, id, destinationName, destinationLanguage,
chrome.storage.sync.set({ 'wikiSettings': response.wikiSettings });
e.target.textContent = '✓ Redirect enabled';
e.target.classList.add('indie-wiki-banner-disabled');
document.getElementById('indie-wiki-banner-disable').textContent = '✕ Disable banner for this wiki';
document.getElementById('indie-wiki-banner-disable').classList.remove('indie-wiki-banner-disabled');
document.getElementById('indie-wiki-banner-restore').textContent = '⎌ Restore banner';
document.getElementById('indie-wiki-banner-restore').classList.remove('indie-wiki-banner-hidden');
document.getElementById('indie-wiki-banner-restore').classList.remove('indie-wiki-banner-disabled');
bannerRedirectLink.querySelector('.indie-wiki-banner-disable').textContent = '✕ Disable banner for this wiki';
bannerRedirectLink.querySelector('.indie-wiki-banner-disable').classList.remove('indie-wiki-banner-disabled');
bannerRedirectLink.querySelector('.indie-wiki-banner-restore').textContent = '⎌ Restore banner';
bannerRedirectLink.querySelector('.indie-wiki-banner-restore').classList.remove('indie-wiki-banner-hidden');
bannerRedirectLink.querySelector('.indie-wiki-banner-restore').classList.remove('indie-wiki-banner-disabled');
});
}
@ -187,7 +298,7 @@ function displayRedirectBanner(newUrl, id, destinationName, destinationLanguage,
let bannerText = document.createElement('span');
bannerText.classList.add('indie-wiki-banner-big-text');
banner.appendChild(bannerText);
// Build descriptor
let descriptor = 'an independent';
if (tags.includes('wiki.gg')) {
@ -212,9 +323,11 @@ function displayRedirectBanner(newUrl, id, destinationName, destinationLanguage,
function addBannerToDOM() {
// Check if document is in a ready state
if (document.readyState === 'interactive' || document.readyState === 'complete') {
// Add banner container if not already in doc
outputBannerContainer();
// Ensure banner isn't already outputted
if (!document.querySelector(':root > #indie-wiki-banner')) {
document.body.insertAdjacentElement('beforeBegin', banner);
if (!document.querySelector(':root > #indie-wiki-banner-redirect')) {
document.getElementById('indie-wiki-banner-container').appendChild(banner);
// Increment banner count
if (storage.breezewiki === 'on') {
if (currentURL.hostname.match(breezewikiRegex) || (storage.breezewikiHost === 'CUSTOM' && storage.breezewikiCustomHost?.includes(currentURL.hostname))) {
@ -250,7 +363,10 @@ function main() {
if ((storage.power ?? 'on') === 'on') {
// Check if there is a pathname, to ensure we're looking at an article
if (currentURL.pathname.length > 1) {
processBreezeWikiBanner(storage);
let origin = currentURL;
// If on a BreezeWiki site, convert to Fandom link to match with our list of wikis:
if (currentURL.hostname.match(breezewikiRegex) || (storage.breezewikiHost === 'CUSTOM' && storage.breezewikiCustomHost?.includes(currentURL.hostname))) {
origin = String(currentURL.pathname).split('/')[1] + '.fandom.com/wiki/';
@ -260,6 +376,7 @@ function main() {
origin = origin + currentURL.pathname.split('/')[3];
}
}
getData().then(sites => {
let crossLanguageSetting = storage.crossLanguage || 'off';
// Check if site is in our list of wikis:

35
popup.html
View File

@ -184,9 +184,15 @@
.radioGroup {
display: flex;
}
.radioGroup.horizontal {
flex-direction: row;
gap: 1em;
line-height: 1.5rem;
gap: 1em;
}
.radioGroup.vertical {
flex-direction: column;
gap: .5em;
}
#breezewikiHost {
@ -289,7 +295,7 @@
updates)</legend>
<div role="radiogroup" aria-labelledby="defaultWikiActionLabel">
<span id="defaultWikiActionLabel">When visiting Fandom/Fextralife wikis:</span>
<div class="radioGroup">
<div class="radioGroup horizontal">
<label>
<input id="defaultWikiActionDisabledRadio" type="radio" name="defaultWikiAction" value="disabled" />
<img src="images/toggle-disabled.png" height="12" alt="" />
@ -309,7 +315,7 @@
</div>
<div role="radiogroup" aria-labelledby="defaultSearchActionLabel">
<span id="defaultSearchActionLabel">On search engines, when you see non-indie results with indie alternatives:</span>
<div class="radioGroup">
<div class="radioGroup horizontal">
<label>
<input id="defaultSearchActionDisabledRadio" type="radio" name="defaultSearchAction" value="disabled" />
<img src="images/toggle-disabled.png" height="12" alt="" />
@ -372,11 +378,24 @@
<span aria-hidden="true">༄</span> BreezeWiki settings (<a href="https://breezewiki.com/"
target="_blank">learn&nbsp;more</a>)
</legend>
<div class="settingToggle">
<label>
<input id="breezewikiCheckbox" type="checkbox" />
Use BreezeWiki alternative frontend on Fandom (English only)
</label>
<div role="radiogroup">
<div class="radioGroup vertical">
<label>
<input id="breeezwikiSettingDisabledRadio" type="radio" name="breezewikiSetting" value="off" />
<img src="images/toggle-disabled.png" height="12" alt="" />
BreezeWiki off
</label>
<label>
<input id="breezewikiSettingBannerRadio" type="radio" name="breezewikiSetting" value="banner" />
<img src="images/toggle-alert.png" height="12" alt="" />
Insert banner link to take you to BreezeWiki
</label>
<label>
<input id="breezewikiSettingRedirectRadio" type="radio" name="breezewikiSetting" value="redirect" />
<img src="images/toggle-redirect.png" height="12" alt="" />
Automatically redirect Fandom to BreezeWiki
</label>
</div>
</div>
<div id="breezewikiHost" class="settingToggle">
<label>

40
popup.js
View File

@ -304,16 +304,22 @@ chrome.storage.sync.get(['defaultSearchAction'], (item) => {
// Set BreezeWiki settings
function setBreezeWiki(setting, storeSetting = true) {
// Account for legacy BreezeWiki sestting ('on' is now 'redirect')
if (setting === 'on') {
setting = 'redirect';
}
// Store BreezeWiki setting
if (storeSetting) {
chrome.storage.sync.set({ 'breezewiki': setting });
}
if (setting === 'on') {
document.getElementById('breezewikiCheckbox').checked = true;
} else {
document.getElementById('breezewikiCheckbox').checked = false;
}
// Set BreezeWiki value on radio group
document.options.breezewikiSetting.value = setting;
// Toggle/update host display
const breezewikiHost = document.getElementById('breezewikiHost');
if (setting === 'on') {
if (setting !== 'off') {
breezewikiHost.style.display = 'block';
chrome.storage.sync.get({ 'breezewikiHost': null }, (host) => {
if (!host.breezewikiHost) {
@ -407,10 +413,15 @@ document.addEventListener('DOMContentLoaded', () => {
setOpenChangelog(item.openChangelog, false);
});
chrome.storage.sync.get({ 'breezewiki': 'off' }, (item) => {
setBreezeWiki(item.breezewiki, false);
// Account for legacy 'on' setting for BreezeWiki
if (item.breezewiki === 'on') {
setBreezeWiki('redirect');
} else {
setBreezeWiki(item.breezewiki, false);
}
// Load BreezeWiki options if BreezeWiki is enabled
if (item.breezewiki === 'on') {
if (item.breezewiki !== 'off') {
loadBreezewikiOptions();
}
});
@ -462,13 +473,12 @@ document.addEventListener('DOMContentLoaded', () => {
});
});
// Add event listeners for BreezeWiki settings
document.getElementById('breezewikiCheckbox').addEventListener('change', () => {
chrome.storage.sync.get({ 'breezewiki': 'off' }, (item) => {
if (item.breezewiki === 'on') {
setBreezeWiki('off');
} else {
setBreezeWiki('on');
document.querySelectorAll('[name="breezewikiSetting"]').forEach((el) => {
el.addEventListener('change', async () => {
const settingValue = document.options.breezewikiSetting.value;
chrome.storage.sync.set({ 'breezewiki': settingValue });
setBreezeWiki(settingValue);
if (settingValue !== 'off') {
loadBreezewikiOptions();
}
});

36
settings.html
View File

@ -192,6 +192,19 @@
display: inline-block;
}
.radioGroup {
display: flex;
}
.radioGroup.horizontal {
flex-direction: row;
line-height: 1.5rem;
gap: 1em;
}
.radioGroup.vertical {
flex-direction: column;
gap: .5em;
}
.settingToggle {
width: fit-content;
}
@ -577,11 +590,24 @@
<span aria-hidden="true">༄</span> BreezeWiki settings (<a href="https://breezewiki.com/"
target="_blank">learn&nbsp;more</a>)
</legend>
<div class="settingToggle">
<label>
<input id="breezewikiCheckbox" type="checkbox" />
Use BreezeWiki alternative frontend on Fandom (English only)
</label>
<div role="radiogroup">
<div class="radioGroup vertical">
<label>
<input id="breeezwikiSettingDisabledRadio" type="radio" name="breezewikiSetting" value="off" />
<img src="images/toggle-disabled.png" height="12" alt="" />
BreezeWiki off
</label>
<label>
<input id="breezewikiSettingBannerRadio" type="radio" name="breezewikiSetting" value="banner" />
<img src="images/toggle-alert.png" height="12" alt="" />
Insert banner link to take you to BreezeWiki
</label>
<label>
<input id="breezewikiSettingRedirectRadio" type="radio" name="breezewikiSetting" value="redirect" />
<img src="images/toggle-redirect.png" height="12" alt="" />
Automatically redirect Fandom to BreezeWiki
</label>
</div>
</div>
<div id="breezewikiHost" class="settingToggle">
<label>

40
settings.js
View File

@ -585,16 +585,22 @@ function setOpenChangelog(setting, storeSetting = true) {
// Set BreezeWiki settings
function setBreezeWiki(setting, storeSetting = true) {
// Account for legacy BreezeWiki sestting ('on' is now 'redirect')
if (setting === 'on') {
setting = 'redirect';
}
// Store BreezeWiki setting
if (storeSetting) {
chrome.storage.sync.set({ 'breezewiki': setting });
}
if (setting === 'on') {
document.getElementById('breezewikiCheckbox').checked = true;
} else {
document.getElementById('breezewikiCheckbox').checked = false;
}
// Set BreezeWiki value on radio group
document.options.breezewikiSetting.value = setting;
// Toggle/update host display
const breezewikiHost = document.getElementById('breezewikiHost');
if (setting === 'on') {
if (setting !== 'off') {
breezewikiHost.style.display = 'block';
chrome.storage.sync.get({ 'breezewikiHost': null }, (host) => {
if (!host.breezewikiHost) {
@ -795,10 +801,15 @@ document.addEventListener('DOMContentLoaded', () => {
setOpenChangelog(item.openChangelog, false);
});
chrome.storage.sync.get({ 'breezewiki': 'off' }, (item) => {
setBreezeWiki(item.breezewiki, false);
// Account for legacy 'on' setting for BreezeWiki
if (item.breezewiki === 'on') {
setBreezeWiki('redirect');
} else {
setBreezeWiki(item.breezewiki, false);
}
// Load BreezeWiki options if BreezeWiki is enabled
if (item.breezewiki === 'on') {
if (item.breezewiki !== 'off') {
loadBreezewikiOptions();
}
});
@ -850,13 +861,12 @@ document.addEventListener('DOMContentLoaded', () => {
});
});
// Add event listeners for BreezeWiki settings
document.getElementById('breezewikiCheckbox').addEventListener('change', () => {
chrome.storage.sync.get({ 'breezewiki': 'off' }, (item) => {
if (item.breezewiki === 'on') {
setBreezeWiki('off');
} else {
setBreezeWiki('on');
document.querySelectorAll('[name="breezewikiSetting"]').forEach((el) => {
el.addEventListener('change', async () => {
const settingValue = document.options.breezewikiSetting.value;
chrome.storage.sync.set({ 'breezewiki': settingValue });
setBreezeWiki(settingValue);
if (settingValue !== 'off') {
loadBreezewikiOptions();
}
});