Added instructions for chrome and edge.

site/index.html

@@ -10,7 +10,10 @@
     <meta name="author" content="">    
     <link rel="shortcut icon" href="favicon.ico">  
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
-    <link rel="stylesheet" href="assets/css/bootstrap.min.css">   
+    <link rel="stylesheet"
+	  href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
+	  integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
+	  crossorigin="anonymous">
     <link id="theme-style" rel="stylesheet" href="assets/css/styles.css">
   </head> 
 
@@ -30,7 +33,8 @@
             links mangled by Microsoft Defender for Office 365 Safe
             Links. Install the stable extension using your browser or
             mail reader, or if you're comfortable using the developer
-            mode of your software,get one of the beta versions. <br />
+            mode of your software, get one of the beta versions.
+	    <br />
 	    <span class="small">Most recent build: %VERSION% (%BUILDDATE% UTC)</span>
           </div><!--//tagline-->
         </div><!--//container-->
@@ -78,7 +82,8 @@
 		  Download the Safe Links Cleaner beta version for
 		  the Microsoft Edge Browser.
 		</p>
-                <a class="btn btn-purple" href="safelinks-cleaner-edge-beta.zip">Beta</a>
+		<button type="button" class="btn btn-purple"
+			data-toggle="modal" data-target="#edge-instructions">Beta</button>
               </div><!--//item-inner-->
             </div><!--//item-->
             <div class="item item-blue col-lg-4 col-6">
@@ -89,9 +94,10 @@
                 <h3 class="title">Chrome</h3>
                 <p class="intro">
 		  Download the Safe Links Cleaner beta version for
-		  the Google Chrome Browser.
+		  the Google Chrome on Linux.
 		</p>
-                <a class="btn btn-blue" href="safelinks-cleaner-chrome-beta.crx">Beta</a>
+		<button type="button" class="btn btn-blue"
+			data-toggle="modal" data-target="#chrome-instructions">Beta</button>
               </div><!--//item-inner-->
             </div><!--//item-->
             <div class="item item-primary col-lg-4 col-6">
@@ -132,10 +138,90 @@
     <footer class="footer text-center">
       <div class="container">
         <small class="copyright">Based on a template designed with
-        heart by <a href="https://themes.3rdwavemedia.com/"
-        target="_blank">Xiaoying Riley</a> for developers</small>
+          heart by <a href="https://themes.3rdwavemedia.com/"
+		      target="_blank">Xiaoying Riley</a> for developers</small>
       </div><!--//container-->
     </footer><!--//footer-->
+
+    <div class="modal fade" id="edge-instructions" tabindex="-1" role="dialog"
+	 aria-labelledby="edge-instructions-label" aria-hidden="true">
+      <div class="modal-dialog" role="document">
+	<div class="modal-content">
+	  <div class="modal-header">
+            <h5 class="modal-title" id="edge-instructions-label">Loading the beta in edge</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+	  </div>
+	  <div class="modal-body">
+	    <p>
+	      Edge will not allow you to install this extension
+	      permanently. To test it, follow these steps:
+	    </p>
+	    <ul>
+	      <li>Download the zip fileu sing the button below.</li>
+	      <li>Unzip the file into a directory of your choosing.</li>
+	      <li>Open edge and navigate to <a href="edge://extensions">edge://extensions</a>.</li>
+	      <li>Enable developer mode.</li>
+	      <li>Click "Load unpacked" and browse to the directory containing the extension.</li>
+	      <li>Click "Select Folder"</li>
+	    </ul>
+	    <p>
+	      The extension should now be loaded. You will need to
+	      repeat this every time you restart edge.
+	    </p>
+	    <p class="text-center">
+	      <a class="btn btn-purple" href="safelinks-cleaner-edge-beta.zip"
+		 download>Download beta</a>
+	    </p>
+	  </div>
+	</div>
+      </div>
+    </div>
+
+    <div class="modal fade" id="chrome-instructions" tabindex="-1" role="dialog"
+	 aria-labelledby="chrome-instructions-label" aria-hidden="true">
+      <div class="modal-dialog" role="document">
+	<div class="modal-content">
+	  <div class="modal-header">
+            <h5 class="modal-title" id="chrome-instructions-label">Loading the beta in chrome</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+	  </div>
+	  <div class="modal-body">
+	    <p>
+	      Chrome may not allow you to install this extension
+	      permanently and will refuse to enable it on Windows or
+	      MacOS. If you want to test it on Linux, follow these
+	      steps:
+	    </p>
+	    <ul>
+	      <li>Download the crx file using the button below.</li>
+	      <li>Open chrome and navigate to <a href="chrome://extensions">chrome://extensions</a>.</li>
+	      <li>Enable developer mode.</li>
+	      <li>Locate the crx file in a file browser.</li>
+	      <li>Drag the crx file onto the extensions tab in Chrome.</li>
+	    </ul>
+	    <p>
+	      The extension should now be loaded. You may need to
+	      repeat this every time you restart chrome.
+	    </p>
+	    <p class="text-center">
+	      <a class="btn btn-blue" href="safelinks-cleaner-chrome-beta.zip"
+		 download>Download beta</a>
+	    </p>
+	  </div>
+	</div>
+      </div>
+    </div>
+    
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
+	    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
+	    crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
+	    integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
+	    crossorigin="anonymous"></script>
   </body>
 </html>