Adding ability to redirect non-EN Fandom wikis to EN / Quick fix for pre-rendered webRequests

background.js

@@ -1,9 +1,11 @@
 // Capture web requests
 chrome.webRequest.onBeforeSendHeaders.addListener(
   function (event) {
-    main(event);
+    if (event.documentLifecycle !== 'prerender') {
+      main(event);
+    }
   },
-  { urls: ['*://*.fandom.com/*', '*://*.wiki.fextralife.com/*'], types: ['main_frame'] }
+  { urls: ['*://*.fandom.com/*', '*://*.wiki.fextralife.com/*'], types: ['main_frame', 'sub_frame'] }
 );
 
 // Listen for user turning extension on or off, to update icon
@@ -324,98 +326,104 @@ async function getData() {
 
 async function main(eventInfo) {
   // Store tab URL and remove any search parameters and section anchors
-  const url = new URL(eventInfo.url.replace(/(\?|#).*/i, ''));
+  let url = '';
-
+  if (eventInfo.type === 'main_frame') {
-  // Check for Fandom or Fextralife in hostname and quit early if not
+    url = new URL(eventInfo.url.replace(/(\?|#).*/i, ''));
-  if (eventInfo.documentLifecycle !== 'prerender') {
+  } else {
-    // Create object prototypes for getting and setting attributes
+    url = new URL(eventInfo.initiator);
-    Object.prototype.get = function (prop) {
-      this[prop] = this[prop] || {};
-      return this[prop];
-    };
-    Object.prototype.set = function (prop, value) {
-      this[prop] = value;
-    }
-
-    // Check if tab is actually available
-    // This is mainly to prevent background processes from triggering an event
-    let sites = [];
-
-    sites = await getData();
-
-    chrome.storage.local.get(function (localStorage) {
-      chrome.storage.sync.get(function (syncStorage) {
-        const storage = { ...syncStorage, ...localStorage };
-        if ((storage.power ?? 'on') === 'on') {
-          // Check if site is in our list of wikis:
-          let matchingSites = sites.filter(el => url.href.replace(/^https?:\/\//, '').startsWith(el.origin_base_url));
-          if (matchingSites.length > 0) {
-            // Select match with longest base URL 
-            let closestMatch = "";
-            matchingSites.forEach(site => {
-              if (site.origin_base_url.length > closestMatch.length) {
-                closestMatch = site.origin_base_url;
-              }
-            });
-            let site = matchingSites.find(site => site.origin_base_url === closestMatch);
-            if (site) {
-              // Get user's settings for the wiki
-              let settings = storage.wikiSettings || {};
-              let id = site['id'];
-              let siteSetting = settings[id] || storage.defaultWikiAction || 'alert';
-              // Check if redirects are enabled for the site
-              if (siteSetting === 'redirect') {
-                // Get article name from the end of the URL;
-                // We can't just take the last part of the path due to subpages;
-                // Instead, we take everything after the wiki's base URL + content path
-                let article = url.href.split(site['origin_base_url'] + site['origin_content_path'])[1];
-                // Set up URL to redirect user to based on wiki platform
-                if (article || (!article && !url.href.split(site['origin_base_url'] + '/')[1])) {
-                  let newURL = '';
-                  if (article) {
-                    let searchParams = '';
-                    switch (site['destination_platform']) {
-                      case 'mediawiki':
-                        searchParams = 'Special:Search/' + site['destination_content_prefix'] + article;
-                        break;
-                      case 'doku':
-                        searchParams = 'start?do=search&q=' + article;
-                        break;
-                    }
-                    newURL = 'https://' + site["destination_base_url"] + site["destination_content_path"] + searchParams;
-                  } else {
-                    newURL = 'https://' + site["destination_base_url"];
-                  }
-
-                  // Perform redirect
-                  chrome.tabs.update(eventInfo.tabId, { url: newURL });
-
-                  // Increase redirect count
-                  chrome.storage.sync.set({ 'countRedirects': (storage.countRedirects ?? 0) + 1 });
-
-                  // Notify if enabled
-                  if ((storage.notifications ?? 'on') === 'on') {
-                    // Notify that user is being redirected
-                    let notifID = 'independent-wiki-redirector-notification-' + Math.floor(Math.random() * 1E16);
-                    chrome.notifications.create(notifID, {
-                      "type": "basic",
-                      "iconUrl": 'images/logo-48.png',
-                      "title": "You've been redirected!",
-                      "message": "Indie Wiki Buddy has sent you from " + site['origin'] + " to " + site['destination']
-                    });
-                    // Self-clear notification after 6 seconds
-                    setTimeout(function () { chrome.notifications.clear(notifID); }, 6000);
-                  }
-                }
-              } else if ((storage.breezewiki ?? 'off') === 'on') {
-                redirectToBreezeWiki(storage, eventInfo, url);
-              }
-            }
-          } else if ((storage.breezewiki ?? 'off') === 'on') {
-            redirectToBreezeWiki(storage, eventInfo, url);
-          }
-        }
-      });
-    });
   }
+
+  // Create object prototypes for getting and setting attributes
+  Object.prototype.get = function (prop) {
+    this[prop] = this[prop] || {};
+    return this[prop];
+  };
+  Object.prototype.set = function (prop, value) {
+    this[prop] = value;
+  }
+
+  // Check if tab is actually available
+  // This is mainly to prevent background processes from triggering an event
+  let sites = [];
+
+  sites = await getData();
+
+  chrome.storage.local.get(function (localStorage) {
+    chrome.storage.sync.get(function (syncStorage) {
+      const storage = { ...syncStorage, ...localStorage };
+      if ((storage.power ?? 'on') === 'on') {
+        let crossLanguageSetting = storage.crossLanguage || 'off';
+        // Check if site is in our list of wikis:
+        let matchingSites = [];
+        if (crossLanguageSetting === 'on') {
+          matchingSites = sites.filter(el => url.href.replace(/^https?:\/\//, '').startsWith(el.origin_base_url));
+        } else {
+          matchingSites = sites.filter(el => url.href.replace(/^https?:\/\//, '').startsWith(el.origin_base_url + el.origin_content_path));
+        }
+        if (matchingSites.length > 0) {
+          // Select match with longest base URL 
+          let closestMatch = "";
+          matchingSites.forEach(site => {
+            if (site.origin_base_url.length > closestMatch.length) {
+              closestMatch = site.origin_base_url;
+            }
+          });
+          let site = matchingSites.find(site => site.origin_base_url === closestMatch);
+          if (site) {
+            // Get user's settings for the wiki
+            let settings = storage.wikiSettings || {};
+            let id = site['id'];
+            let siteSetting = settings[id] || storage.defaultWikiAction || 'alert';
+            // Check if redirects are enabled for the site
+            if (siteSetting === 'redirect') {
+              // Get article name from the end of the URL;
+              // We can't just take the last part of the path due to subpages;
+              // Instead, we take everything after the wiki's base URL + content path
+              let article = url.href.split(site['origin_base_url'] + site['origin_content_path'])[1];
+              // Set up URL to redirect user to based on wiki platform
+              let newURL = '';
+              if (article) {
+                let searchParams = '';
+                switch (site['destination_platform']) {
+                  case 'mediawiki':
+                    searchParams = 'Special:Search/' + site['destination_content_prefix'] + article;
+                    break;
+                  case 'doku':
+                    searchParams = 'start?do=search&q=' + article;
+                    break;
+                }
+                newURL = 'https://' + site["destination_base_url"] + site["destination_content_path"] + searchParams;
+              } else {
+                newURL = 'https://' + site["destination_base_url"];
+              }
+
+              // Perform redirect
+              chrome.tabs.update(eventInfo.tabId, { url: newURL });
+
+              // Increase redirect count
+              chrome.storage.sync.set({ 'countRedirects': (storage.countRedirects ?? 0) + 1 });
+
+              // Notify if enabled
+              if ((storage.notifications ?? 'on') === 'on') {
+                // Notify that user is being redirected
+                let notifID = 'independent-wiki-redirector-notification-' + Math.floor(Math.random() * 1E16);
+                chrome.notifications.create(notifID, {
+                  "type": "basic",
+                  "iconUrl": 'images/logo-48.png',
+                  "title": "You've been redirected!",
+                  "message": "Indie Wiki Buddy has sent you from " + site['origin'] + " to " + site['destination']
+                });
+                // Self-clear notification after 6 seconds
+                setTimeout(function () { chrome.notifications.clear(notifID); }, 6000);
+              }
+            } else if ((storage.breezewiki ?? 'off') === 'on') {
+              redirectToBreezeWiki(storage, eventInfo, url);
+            }
+          }
+        } else if ((storage.breezewiki ?? 'off') === 'on') {
+          redirectToBreezeWiki(storage, eventInfo, url);
+        }
+      }
+    });
+  });
 }

content-banners.js

@@ -42,7 +42,7 @@ async function getData() {
   return sites;
 }
 
-function displayRedirectBanner(url, id, destination, storage) {
+function displayRedirectBanner(origin, newUrl, id, destinationName, destinationLanguage, storage) {
   // Output CSS
   styleString = `
     #indie-wiki-banner {
@@ -184,12 +184,16 @@ function displayRedirectBanner(url, id, destination, storage) {
   var bannerText = document.createElement('span');
   bannerText.classList.add('indie-wiki-banner-big-text');
   banner.appendChild(bannerText);
-  bannerText.textContent = 'There is an independent wiki covering this topic!';
+  if (destinationLanguage === 'EN' && origin.href.match(/fandom\.com\/[a-z]{2}\/wiki\//)) {
+    bannerText.textContent = 'There is an independent wiki covering this topic in English!';
+  } else {
+    bannerText.textContent = 'There is an independent wiki covering this topic!';
+  }
   var bannerWikiLink = document.createElement('a');
   bannerWikiLink.classList.add('indie-wiki-banner-link');
   bannerText.appendChild(bannerWikiLink);
-  bannerWikiLink.href = url;
+  bannerWikiLink.href = newUrl;
-  bannerWikiLink.textContent = 'Visit ' + destination + ' →';
+  bannerWikiLink.textContent = 'Visit ' + destinationName + ' →';
 
   // Function to insert banner into DOM before body element
   function addBannerToDOM() {
@@ -237,11 +241,18 @@ function main() {
             }
           }
           getData().then(sites => {
+            let crossLanguageSetting = storage.crossLanguage || 'off';
             // Check if site is in our list of wikis:
-            let matchingSites = sites.filter(el => String(origin).replace(/^https?:\/\//, '').startsWith(el.origin_base_url));
+            // let matchingSites = sites.filter(el => String(origin).replace(/^https?:\/\//, '').startsWith(el.origin_base_url));
+            let matchingSites = [];
+            if (crossLanguageSetting === 'on') {
+              matchingSites = sites.filter(el => String(origin).replace(/^https?:\/\//, '').startsWith(el.origin_base_url));
+            } else {
+              matchingSites = sites.filter(el => String(origin).replace(/^https?:\/\//, '').startsWith(el.origin_base_url + el.origin_content_path));
+            }
             if (matchingSites.length > 0) {
               // Select match with longest base URL 
-              let closestMatch = "";
+              let closestMatch = '';
               matchingSites.forEach(site => {
                 if (site.origin_base_url.length > closestMatch.length) {
                   closestMatch = site.origin_base_url;
@@ -250,46 +261,44 @@ function main() {
               let site = matchingSites.find(site => site.origin_base_url === closestMatch);
               if (site) {
                 // Get user's settings for the wiki
-                let settings = storage.wikiSettings || {};
                 let id = site['id'];
+                let settings = storage.wikiSettings || {};
                 let siteSetting = settings[id] || storage.defaultWikiAction || 'alert';
                 // Notify if enabled for the wiki:
                 if (siteSetting === 'alert') {
                   // Get article name from the end of the URL;
                   // We can't just take the last part of the path due to subpages;
                   // Instead, we take everything after the wiki's base URL + content path:
-                  let article = String(origin).split(site['origin_base_url'] + site['origin_content_path'])[1];
+                  let article = String(origin).split(site['origin_content_path'])[1];
                   // Set up URL to redirect user to based on wiki platform:
-                  if (article || (!article && !url.href.split(site['origin_base_url'] + '/')[1])) {
+                  let newURL = '';
-                    let newURL = '';
+                  if (article) {
-                    if (article) {
+                    let searchParams = '';
-                      let searchParams = '';
+                    switch (site['destination_platform']) {
-                      switch (site['destination_platform']) {
+                      case 'mediawiki':
-                        case 'mediawiki':
+                        searchParams = 'Special:Search/' + site['destination_content_prefix'] + article;
-                          searchParams = 'Special:Search/' + site['destination_content_prefix'] + article;
+                        break;
-                          break;
+                      case 'doku':
-                        case 'doku':
+                        searchParams = 'start?do=search&q=' + article;
-                          searchParams = 'start?do=search&q=' + article;
+                        break;
-                          break;
-                      }
-                      newURL = 'https://' + site["destination_base_url"] + site["destination_content_path"] + searchParams.replaceAll('+', '_');
-                      // We replace plus signs with underscores since Fextralife uses pluses instead of spaces/underscores
-                    } else {
-                      newURL = 'https://' + site["destination_base_url"];
                     }
-                    // When head elem is loaded, notify that another wiki is available
+                    newURL = 'https://' + site["destination_base_url"] + site["destination_content_path"] + searchParams.replaceAll('+', '_');
-                    const docObserver = new MutationObserver(function (mutations, mutationInstance) {
+                    // We replace plus signs with underscores since Fextralife uses pluses instead of spaces/underscores
-                      const headElement = document.querySelector('head');
+                  } else {
-                      if (headElement) {
+                    newURL = 'https://' + site["destination_base_url"];
-                        displayRedirectBanner(newURL, site['id'], site['destination'], storage);
-                        mutationInstance.disconnect();
-                      }
-                    });
-                    docObserver.observe(document, {
-                      childList: true,
-                      subtree: true
-                    });
                   }
+                  // When head elem is loaded, notify that another wiki is available
+                  const docObserver = new MutationObserver(function (mutations, mutationInstance) {
+                    const headElement = document.querySelector('head');
+                    if (headElement) {
+                      displayRedirectBanner(origin, newURL, site['id'], site['destination'], site['lang'], storage);
+                      mutationInstance.disconnect();
+                    }
+                  });
+                  docObserver.observe(document, {
+                    childList: true,
+                    subtree: true
+                  });
                 }
               }
             }

popup.html

@@ -1,273 +1,280 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta charset="UTF-8" />
-    <title>Indie Wiki Buddy</title>
-    <style>
-      /* ELEMENTS */
-      html {
-        max-width: 600px;
-      }
-      body {
-        width: max-content;
-        max-width: min(100%, 600px);
-        background-color: #005799;
-        margin: 0px;
-        font-family: Helvetica, Sans-Serif;
-        font-size: .9em;
-      }
 
-      a {
+<head>
-        text-decoration-style: dotted;
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
-        text-decoration-thickness: 1px;
+  <meta charset="UTF-8" />
-        color: #005799;
+  <title>Indie Wiki Buddy</title>
-      }
+  <style>
-      a:visited {
+    /* ELEMENTS */
-        color: #005799;
+    html {
-      }
+      max-width: 600px;
+    }
 
-      h1 {
+    body {
-        font-size: 1.3rem;
+      width: max-content;
-        margin: 8px 0;
+      max-width: min(100%, 600px);
-      }
+      background-color: #005799;
+      margin: 0px;
+      font-family: Helvetica, Sans-Serif;
+      font-size: .9em;
+    }
 
-      hr {
+    a {
-        height: 1px;
+      text-decoration-style: dotted;
-        border: none;
+      text-decoration-thickness: 1px;
-        color: #005799;
+      color: #005799;
-        background-color: #005799;
+    }
-        margin: 1em 0;
-      }
 
-      #openSettingsContainer {
+    a:visited {
-        width: 100%;
+      color: #005799;
-        text-align: center;
+    }
-      }
-      #openSettings {
-        background: #3174f1;
-        border: 1px solid #333333;
-        color: #fff;
-        border-radius: 5px;
-        padding: .5em;
-        margin: 0 .5em .5em .5em;
-        font-size: 1.3em;
-      }
-      #openSettings:hover {
-        cursor: pointer;
-        background: #ffffff;
-        border: 1px solid#3174f1;
-        color: #3174f1;
-      }
 
-      /* HEADER */
+    h1 {
-      #header {
+      font-size: 1.3rem;
-        line-height: 1.5em;
+      margin: 8px 0;
-        padding: .5em 1em;
+    }
-        box-sizing: border-box; 
-        background-color: #005799;
-        color: #fff;
-        width: 100%;
-      }
-      #header .settingToggle label {
-        background-color: #fff;
-        border-radius: 20px;
-        height: fit-content;
-        width: fit-content;
-      }
 
-      /* NOTIFICATIONS */
+    hr {
-      #notificationBannerContainer {
+      height: 1px;
-        background-color: #f8f3d6;
+      border: none;
-        font-size: .9em;
+      color: #005799;
-        line-height: 1.3em;
+      background-color: #005799;
-      }
+      margin: 1em 0;
-      #notificationBannerContainer span {
+    }
-        padding: 1em;
-        display: none;
-      }
-      #notificationBannerContainer span ~ span[style] {
-        border-top: 1px solid #005799;
-      }
 
-      /* POWER TOGGLE */
+    #openSettingsContainer {
-      #power {
+      width: 100%;
-        cursor: pointer;
+      text-align: center;
-        width: fit-content;
+    }
-        vertical-align: middle;
-        float: right;
-        padding-top: .2em;
-      }
-      #power > label {
-        display: inline-block;
-        cursor: pointer;
-        background-color: #fff;
-        border-radius: 20px;
-        width: 30px;
-        height: 30px;
-        text-align: center;
-      }
-      #power > input {
-        height: 0;
-        width: 0;
-        margin: 0;
-        border: none;
-        appearance: none;
-      }
-      #power img {
-        position: relative;
-        top: 50%;
-        transform: translateY(-50%);
-      }
 
-      /* CONTENT */
+    #openSettings {
-      #content {
+      background: #3174f1;
-        padding: 1em;
+      border: 1px solid #333333;
-        background-color: #e5f4ff;
+      color: #fff;
-        box-sizing: border-box;
+      border-radius: 5px;
-      }
+      padding: .5em;
+      margin: 0 .5em .5em .5em;
+      font-size: 1.3em;
+    }
 
-      #links {
+    #openSettings:hover {
-        text-align: center;
+      cursor: pointer;
-        margin-bottom: .5em;
+      background: #ffffff;
-      }
+      border: 1px solid#3174f1;
+      color: #3174f1;
+    }
 
-      /* GLOBAL SETTINGS SECTION */
+    /* HEADER */
-      .options {
+    #header {
-        box-sizing: border-box;
+      line-height: 1.5em;
-        margin-bottom: 10px;
+      padding: .5em 1em;
-        user-select: none;
+      box-sizing: border-box;
-        width: 100%;
+      background-color: #005799;
-      }
+      color: #fff;
-      .options .settingToggleContainer {
+      width: 100%;
-        padding-bottom: 1em;
+    }
-      }
-      .options .settingToggleContainer:last-child {
-        padding-bottom: 0;
-      }
-      .options .settingToggleContainer > div {
-        line-height: 1.5rem;
-      }
 
-      /* GLOBAL SETTING TOGGLES */
+    #header .settingToggle label {
-      .settingToggle {
+      background-color: #fff;
-        cursor: pointer;
+      border-radius: 20px;
-        width: fit-content;
+      height: fit-content;
-        vertical-align: middle;
+      width: fit-content;
-        display: inline-block;
+    }
-      }
-      .settingToggle + div {
-        display: inline-block;
-      }
-      .settingToggle input,
-      .settingToggle label {
-        cursor: pointer;
-      }
 
-      #breezewikiHost {
+    /* NOTIFICATIONS */
-        display: none;
+    #notificationBannerContainer {
-        padding-left: 3em;
+      background-color: #f8f3d6;
-        padding-top: 0.8em;
+      font-size: .9em;
-      }
+      line-height: 1.3em;
-    </style>
+    }
-  </head>
 
-  <body>
+    #notificationBannerContainer span {
-    <div id="header">
+      padding: 1em;
-      <div id="power">
+      display: none;
-        <input id="powerCheckbox" type="checkbox" />
+    }
-        <label for="powerCheckbox">
+
-          <img id="powerImage" src="" alt="" width="20" />
+    #notificationBannerContainer span~span[style] {
-        </label>
+      border-top: 1px solid #005799;
-      </div>
+    }
-      <h1>Indie Wiki Buddy</h1>
+
+    /* POWER TOGGLE */
+    #power {
+      cursor: pointer;
+      width: fit-content;
+      vertical-align: middle;
+      float: right;
+      padding-top: .2em;
+    }
+
+    #power>label {
+      display: inline-block;
+      cursor: pointer;
+      background-color: #fff;
+      border-radius: 20px;
+      width: 30px;
+      height: 30px;
+      text-align: center;
+    }
+
+    #power>input {
+      height: 0;
+      width: 0;
+      margin: 0;
+      border: none;
+      appearance: none;
+    }
+
+    #power img {
+      position: relative;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    /* CONTENT */
+    #content {
+      padding: 1em;
+      background-color: #e5f4ff;
+      box-sizing: border-box;
+    }
+
+    #links {
+      text-align: center;
+      margin-bottom: .5em;
+    }
+
+    /* GLOBAL SETTINGS SECTION */
+    .options {
+      box-sizing: border-box;
+      margin-bottom: 10px;
+      user-select: none;
+      width: 100%;
+    }
+
+    .options .settingToggleContainer {
+      padding-bottom: 1em;
+    }
+
+    .options .settingToggleContainer:last-child {
+      padding-bottom: 0;
+    }
+
+    .options .settingToggleContainer>div {
+      line-height: 1.5rem;
+    }
+
+    /* GLOBAL SETTING TOGGLES */
+    .settingToggle {
+      cursor: pointer;
+      width: fit-content;
+      vertical-align: middle;
+      display: inline-block;
+    }
+
+    .settingToggle+div {
+      display: inline-block;
+    }
+
+    .settingToggle input,
+    .settingToggle label {
+      cursor: pointer;
+    }
+
+    #breezewikiHost {
+      display: none;
+      padding-left: 3em;
+      padding-top: 0.8em;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="header">
+    <div id="power">
+      <input id="powerCheckbox" type="checkbox" />
+      <label for="powerCheckbox">
+        <img id="powerImage" src="" alt="" width="20" />
+      </label>
     </div>
-    <div id="content">
+    <h1>Indie Wiki Buddy</h1>
-      <div class="options">
+  </div>
-        <div class="settingToggleContainer">
+  <div id="content">
-          <div id="notifications" class="settingToggle">
+    <div class="options">
+      <div class="settingToggleContainer">
+        <div class="settingToggle">
+          <label>
             <input id="notificationsCheckbox" type="checkbox" />
-            <label for="notificationsCheckbox">
+            <span id="notificationsIcon" aria-hidden="true"></span>
-              <span id="notificationsText"><span id="notificationsIcon" aria-hidden="true"></span>
+            Desktop notifications for
-              Desktop notifications for redirections</span>
+              redirections
-            </label>
+          </label>
-          </div>
+        </div>
+      </div>
+      <div class="settingToggleContainer">
+        <div class="settingToggle">
+          <label>
+            <input id="crossLanguageCheckbox" type="checkbox" />
+            <span id="crossLanguageIcon" aria-hidden="true"></span>
+            Redirect non-English Fandom/Fextralife wikis to
+              English indie wikis when no same-language wiki exists
+          </label>
+        </div>
+      </div>
+      <div class="settingToggleContainer">
+        <div class="settingToggle">
+          <label>
+            <input id="breezewikiCheckbox" type="checkbox" />
+            🌬️ Use BreezeWiki on Fandom (English only)
+          </label>
+        </div>
+        <div>
+          &nbsp;&nbsp;(<a href="https://breezewiki.com/" target="_blank">learn more</a>)
         </div>
         <div class="settingToggleContainer">
-          <div id="breezewiki" class="settingToggle">
+          <div id="breezewikiHost" class="settingToggle">
-            <input id="breezewikiCheckbox" type="checkbox" />
+            <label for="breezewikiHostSelect">BreezeWiki host:&nbsp;</label>
-            <label for="breezewikiCheckbox">
+            <select name="breezewikiHost" id="breezewikiHostSelect"></select>
-              <span id="breezewikiText">🌬️ Use BreezeWiki on Fandom (English only)</span>
-            </label>
-          </div>
-          <div>
-              &nbsp;&nbsp;(<a href="https://breezewiki.com/" target="_blank"
-                >learn more</a
-              >)
-          </div>
-          <div class="settingToggleContainer">
-            <div id="breezewikiHost" class="settingToggle">
-              <label for="breezewikiHostSelect">BreezeWiki host:&nbsp;</label>
-              <select name="breezewikiHost" id="breezewikiHostSelect"></select>
-            </div>
           </div>
         </div>
       </div>
-      <hr/>
-      <div id="openSettingsContainer">
-        <button id="openSettings">
-          View All Settings
-        </button>
-        <br />
-        View all settings to configure your options per-wiki.
-      </div>
-      <hr />
-      <div id="links">
-        <a
-          href="guide.html"
-          target="_blank"
-          >Guide</a
-        >
-        &nbsp;&nbsp;&nbsp;
-        <a
-          href="https://getindie.wiki/#guide"
-          target="_blank"
-          >Website</a
-        >
-        &nbsp;&nbsp;&nbsp;
-        <a
-          href="https://getindie.wiki/changelog/"
-          target="_blank"
-          >Changelog</a
-        >
-        &nbsp;&nbsp;&nbsp;
-        <a
-          href="https://getindie.wiki/#submit"
-          target="_blank"
-          >Submit a Wiki</a
-        >
-        &nbsp;&nbsp;&nbsp;
-        <a
-          href="https://github.com/KevinPayravi/indie-wiki-buddy"
-          target="_blank"
-          >Source Code</a
-        >
-      </div>
     </div>
-    <div id="notificationBannerContainer">
+    <hr />
-      <span id="notificationBannerChromeBug">
+    <div id="openSettingsContainer">
-        Chromium users: Due to a <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1271154" target="_blank">browser bug</a>,
+      <button id="openSettings">
-        this extension may stop working after an update. If this happens, try turning the extension off
+        View All Settings
-        and on via your browser's extension settings (chrome://extensions/).
+      </button>
-        <a id="chromeBugHideLink" href="#">Hide this message</a>
+      <br />
-      </span>
+      View all settings to configure your options per-wiki.
-      <span id="notificationBannerOpera">
-        Opera users: By default, Opera will block extensions from running on search engines.
-        Search engine access can be enabled per-extension by going to "about:extensions"
-        and selecting the "Allow access to search page results" option under Indie Wiki Buddy.
-        <a id="operaPermsHideLink" href="#">Hide this message</a>
-      </span>
     </div>
-  </body>
+    <hr />
-  <script type="text/javascript" src="popup.js"></script>
+    <div id="links">
-</html>
+      <a href="guide.html" target="_blank">Guide</a>
+      &nbsp;&nbsp;&nbsp;
+      <a href="https://getindie.wiki/#guide" target="_blank">Website</a>
+      &nbsp;&nbsp;&nbsp;
+      <a href="https://getindie.wiki/changelog/" target="_blank">Changelog</a>
+      &nbsp;&nbsp;&nbsp;
+      <a href="https://getindie.wiki/#submit" target="_blank">Submit a Wiki</a>
+      &nbsp;&nbsp;&nbsp;
+      <a href="https://github.com/KevinPayravi/indie-wiki-buddy" target="_blank">Source Code</a>
+    </div>
+  </div>
+  <div id="notificationBannerContainer">
+    <span id="notificationBannerChromeBug">
+      Chromium users: Due to a <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1271154"
+        target="_blank">browser bug</a>,
+      this extension may stop working after an update. If this happens, try turning the extension off
+      and on via your browser's extension settings (chrome://extensions/).
+      <a id="chromeBugHideLink" href="#">Hide this message</a>
+    </span>
+    <span id="notificationBannerOpera">
+      Opera users: By default, Opera will block extensions from running on search engines.
+      Search engine access can be enabled per-extension by going to "about:extensions"
+      and selecting the "Allow access to search page results" option under Indie Wiki Buddy.
+      <a id="operaPermsHideLink" href="#">Hide this message</a>
+    </span>
+  </div>
+</body>
+<script type="text/javascript" src="popup.js"></script>
+
+</html>

popup.js

@@ -30,7 +30,7 @@ async function loadBreezeWikiOptions() {
         }).then((breezewikiHosts) => {
           breezewikiHosts = breezewikiHosts.filter(host =>
             chrome.runtime.getManifest().version.localeCompare(host.iwb_version,
-              undefined, 
+              undefined,
               { numeric: true, sensitivity: 'base' }
             ) >= 0
           );
@@ -59,7 +59,7 @@ async function loadBreezeWikiOptions() {
             let option = document.createElement('option');
             option.value = breezewikiHosts[i].instance;
             let textContent = breezewikiHosts[i].instance.replace('https://', '');
-            const numberOfPeriods = (textContent.match(/\./g)||[]).length;
+            const numberOfPeriods = (textContent.match(/\./g) || []).length;
             if (numberOfPeriods > 1) {
               textContent = textContent.substring(textContent.indexOf('.') + 1);
             }
@@ -78,7 +78,7 @@ async function loadBreezeWikiOptions() {
 
           // If fetch fails and no host is set, default to breezewiki.com:
           if (!host) {
-            chrome.storage.sync.set({ 'breezewikiHost': 'https://breezewiki.com'});
+            chrome.storage.sync.set({ 'breezewikiHost': 'https://breezewiki.com' });
           }
         });
     } else {
@@ -96,7 +96,7 @@ async function loadBreezeWikiOptions() {
         let option = document.createElement('option');
         option.value = hostOptions[i].instance;
         let textContent = hostOptions[i].instance.replace('https://', '');
-        const numberOfPeriods = (textContent.match(/\./g)||[]).length;
+        const numberOfPeriods = (textContent.match(/\./g) || []).length;
         if (numberOfPeriods > 1) {
           textContent = textContent.substring(textContent.indexOf('.') + 1);
         }
@@ -148,6 +148,22 @@ function setNotifications(setting, storeSetting = true) {
   }
 }
 
+// Set cross-language setting
+function setCrossLanguage(setting, storeSetting = true) {
+  if (storeSetting) {
+    chrome.storage.sync.set({ 'crossLanguage': setting });
+  }
+
+  const crossLanguageIcon = document.getElementById('crossLanguageIcon');
+  if (setting === 'on') {
+    document.getElementById('crossLanguageCheckbox').checked = true;
+    crossLanguageIcon.innerText = '🌐';
+  } else {
+    document.getElementById('crossLanguageCheckbox').checked = false;
+    crossLanguageIcon.innerText = '⚪️';
+  }
+}
+
 // Set BreezeWiki settings
 function setBreezeWiki(setting, storeSetting = true) {
   if (storeSetting) {
@@ -172,7 +188,7 @@ function setBreezeWiki(setting, storeSetting = true) {
           }).then((breezewikiHosts) => {
             breezewikiHosts = breezewikiHosts.filter(host =>
               chrome.runtime.getManifest().version.localeCompare(host.iwb_version,
-                undefined, 
+                undefined,
                 { numeric: true, sensitivity: 'base' }
               ) >= 0
             );
@@ -197,7 +213,7 @@ function setBreezeWiki(setting, storeSetting = true) {
 
             // If fetch fails and no host is set, default to breezewiki.com:
             if (!host) {
-              chrome.storage.sync.set({ 'breezewikiHost': 'https://breezewiki.com'});
+              chrome.storage.sync.set({ 'breezewikiHost': 'https://breezewiki.com' });
             }
           });
       } else {
@@ -210,7 +226,7 @@ function setBreezeWiki(setting, storeSetting = true) {
 }
 
 // Main function that runs on-load
-document.addEventListener('DOMContentLoaded', function () {  
+document.addEventListener('DOMContentLoaded', function () {
   // If running Chromium, show warning about service worker bug
   if (navigator.userAgent.match(/Chrom[e|ium]/)) {
     const notificationBannerChromeBug = document.getElementById('notificationBannerChromeBug');
@@ -245,7 +261,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
   // Listener for settings page in new tab:
   document.getElementById('openSettings').addEventListener('click', function () {
-    chrome.tabs.create({'url': chrome.runtime.getURL('settings.html')});
+    chrome.tabs.create({ 'url': chrome.runtime.getURL('settings.html') });
     window.close();
   });
 
@@ -256,11 +272,14 @@ document.addEventListener('DOMContentLoaded', function () {
   chrome.storage.sync.get({ 'notifications': 'on' }, function (item) {
     setNotifications(item.notifications, false);
   });
+  chrome.storage.sync.get({ 'crossLanguage': 'off' }, function (item) {
+    setCrossLanguage(item.crossLanguage, false);
+  });
   chrome.storage.sync.get({ 'breezewiki': 'off' }, function (item) {
     setBreezeWiki(item.breezewiki, false);
 
     // Load BreezeWiki options if BreezeWiki is enabled
-    if(item.breezewiki === 'on') {
+    if (item.breezewiki === 'on') {
       loadBreezeWikiOptions();
     }
   });
@@ -284,7 +303,15 @@ document.addEventListener('DOMContentLoaded', function () {
       }
     });
   });
-
+  document.getElementById('crossLanguageCheckbox').addEventListener('change', function () {
+    chrome.storage.sync.get({ 'crossLanguage': 'off' }, function (item) {
+      if (item.crossLanguage === 'on') {
+        setCrossLanguage('off');
+      } else {
+        setCrossLanguage('on');
+      }
+    });
+  });
   document.getElementById('breezewikiCheckbox').addEventListener('change', function () {
     chrome.storage.sync.get({ 'breezewiki': 'off' }, function (item) {
       if (item.breezewiki === 'on') {

settings.html

@@ -492,8 +492,16 @@
             <label>
               <input id="notificationsCheckbox" type="checkbox" />
               <span id="notificationsIcon" aria-hidden="true"></span>
-              <span id="notificationsText">Desktop notifications for
+              Desktop notifications for
-                redirections</span>
+                redirections
+            </label>
+          </div>
+          <div class="settingToggle">
+            <label>
+              <input id="crossLanguageCheckbox" type="checkbox" />
+              <span id="crossLanguageIcon" aria-hidden="true"></span>
+              Redirect non-English Fandom/Fextralife wikis to
+                English wikis when no same-language wiki exists
             </label>
           </div>
         </fieldset>
@@ -505,7 +513,7 @@
           <div class="settingToggle">
             <label>
               <input id="breezewikiCheckbox" type="checkbox" />
-              <span id="breezewikiText">Use BreezeWiki alternative frontend on Fandom (English only)</span>
+              Use BreezeWiki alternative frontend on Fandom (English only)
             </label>
           </div>
           <div id="breezewikiHost" class="settingToggle">
@@ -524,7 +532,7 @@
             <img src="images/toggle-disabled.png" width="18" height="18" alt="" /> Do nothing
           </div>
           <div>
-            <img src="images/toggle-alert.png" width="18" height="18" alt="" /> Display a banner
+            <img src="images/toggle-alert.png" width="18" height="18" alt="" /> Display banner
             linking to indie wiki
           </div>
           <div>
@@ -619,7 +627,7 @@
               </div>
               <div>
                 <input id="defaultWikiActionAlertRadio" type="radio" name="defaultWikiAction" value="alert"
-                  title="Display a banner linking to indie wiki" />
+                  title="Display banner linking to indie wiki" />
                 <label data-title="Show banner when indie wiki is available" for="defaultWikiActionAlertRadio"></label>
               </div>
               <div>

settings.js

@@ -525,6 +525,22 @@ function setNotifications(setting, storeSetting = true) {
   }
 }
 
+// Set cross-language setting
+function setCrossLanguage(setting, storeSetting = true) {
+  if (storeSetting) {
+    chrome.storage.sync.set({ 'crossLanguage': setting });
+  }
+
+  const crossLanguageIcon = document.getElementById('crossLanguageIcon');
+  if (setting === 'on') {
+    document.getElementById('crossLanguageCheckbox').checked = true;
+    crossLanguageIcon.innerText = '🌐';
+  } else {
+    document.getElementById('crossLanguageCheckbox').checked = false;
+    crossLanguageIcon.innerText = '⚪️';
+  }
+}
+
 // Set BreezeWiki settings
 function setBreezeWiki(setting, storeSetting = true) {
   if (storeSetting) {
@@ -744,6 +760,9 @@ document.addEventListener('DOMContentLoaded', function () {
   chrome.storage.sync.get({ 'notifications': 'on' }, function (item) {
     setNotifications(item.notifications, false);
   });
+  chrome.storage.sync.get({ 'crossLanguage': 'off' }, function (item) {
+    setCrossLanguage(item.crossLanguage, false);
+  });
   chrome.storage.sync.get({ 'breezewiki': 'off' }, function (item) {
     setBreezeWiki(item.breezewiki, false);
   });
@@ -767,6 +786,15 @@ document.addEventListener('DOMContentLoaded', function () {
       }
     });
   });
+  document.getElementById('crossLanguageCheckbox').addEventListener('change', function () {
+    chrome.storage.sync.get({ 'crossLanguage': 'off' }, function (item) {
+      if (item.crossLanguage === 'on') {
+        setCrossLanguage('off');
+      } else {
+        setCrossLanguage('on');
+      }
+    });
+  });
 
   // Add event listeners for BreezeWiki settings
   document.getElementById('breezewikiCheckbox').addEventListener('change', function () {