On install, settings now open with starter guide

background.js

@@ -20,11 +20,17 @@ chrome.runtime.onStartup.addListener(function () {
   });
 });
 
-// Listen for extension installed/updating, to set initial icon state
-chrome.runtime.onInstalled.addListener(function () {
+// Listen for extension installed/updating
+chrome.runtime.onInstalled.addListener(function (detail) {
+  // Set initial icon state
   chrome.storage.local.get({ 'power': 'on' }, function (item) {
     setPowerIcon(item.power);
   });
+
+  // If new install, open settings with starter guide
+  if (detail.reason === 'install') {
+    chrome.tabs.create({ url: 'settings.html?newinstall=true' });
+  }
 });
 
 if (chrome.declarativeNetRequest) {

settings.html

@@ -81,11 +81,16 @@
         padding: .5em 1em;
       }
 
+      #firstInstallInfo {
+        display: none;
+        text-align: center;
+      }
+
       /* CONTENT */
       #content {
         background-color: #fff;
         box-sizing: border-box;
-        padding: 0 .5em;
+        padding: 1em .75em;
       }
 
       /* FOOTER */
@@ -318,6 +323,32 @@
         </span>
       </div>
       <div id="content">
+        <div id="firstInstallInfo">
+          Thanks for installing Indie Wiki Buddy! Let's get you set up.
+          <br /><br />
+          Use the links above to see the full guide, submit new wikis, or contact the developer.
+          <br /><br />
+          In the "global settings" section below, you can toggle features on and off.
+          By default, search engine filtering and notifications when you are redirected are turned on.
+          You can also turn on <a href="https://breezewiki.com/" target="_blank">BreezeWiki</a>, which will render Fandom wikis without ads or bloat.
+          <br /><br />
+          Below that, you can configure what happens when you visit each Fandom and Fextralife wiki that has an independent alternative.
+          This includes whether you want to be
+          <img src="images/toggle-alert.png" width="12" alt="" /> alerted (default)
+          or 
+          <img src="images/toggle-redirect.png" width="12" alt="" />
+          automatically redirected.
+          You can also toggle whether you want to
+          <img src="images/toggle-search-filter.png" width="12" alt="" />
+          filter the non-indie wikis from search engines (on by default).
+          <br /><br />
+          You can access these settings in the future via the extension's icon
+          <img src="./images/logo-32.png" width="15" alt="icon of an arrow pointing to the right" />
+          at the top right of your browser. If you don't see the icon,
+          it may be in the extension dropdown, which can be opened via the jigsaw icon
+          <img src="./images/jigsaw.png" width="15" alt="" /> (also at the top right of your browser).
+          <hr />
+        </div>
         <h2>Global settings</h2>
         <div class="options">
           <div class="settingToggleContainer">

settings.js

@@ -513,9 +513,13 @@ function setBreezeWiki(setting, storeSetting = true) {
 
 // Main function that runs on-load
 document.addEventListener('DOMContentLoaded', function () {
-  
   notificationBanner = document.getElementById('notificationBanner');
   
+  // If newly installed, show initial install guide
+  if (new URLSearchParams(window.location.search).get('newinstall')) {
+    document.getElementById('firstInstallInfo').style.display = 'block';
+  }
+
   // If running Chromium, show warning about service worker bug
   if (navigator.userAgent.match(/Chrom[e|ium]/)) {
     notificationBanner.style.display = 'block';