Switch popup UI to Bootstrap, update notification

js/background.js

@@ -16,12 +16,12 @@ themeAudio.loop = true
 // Get stored settings
 chrome.storage.local.get({
     music: 'wii-shop-theme'
-  }, function (data) {
+}, function (data) {
-      currentMusic = chrome.extension.getURL('music/' + data.music + '.ogg')
+    currentMusic = chrome.extension.getURL('music/' + data.music + '.ogg')
 })
 
 // Change music after settings change
-chrome.storage.onChanged.addListener(function(changes, area) {
+chrome.storage.onChanged.addListener(function (changes, area) {
     if (changes.music) {
         currentMusic = chrome.extension.getURL('music/' + changes.music.newValue + '.ogg')
         themeAudio.src = chrome.extension.getURL('music/' + changes.music.newValue + '.ogg')
@@ -59,34 +59,51 @@ chrome.tabs.onActivated.addListener(function (activeInfo) {
 
 // Show notification on extension install
 chrome.runtime.onInstalled.addListener(function () {
-    // Firefox doesn't support buttons in notifications
+    // Set most options
+    var data = {
+        'type': 'basic',
+        'iconUrl': chrome.extension.getURL('img/icon128.png'),
+        'title': 'Wii Shop Music extension installed!',
+    }
+    // Set message and handlers for notification
     if (navigator.userAgent.includes("Firefox")) {
-        chrome.notifications.create({
+        // Firefox supports does not support buttons in notifications
-            'type': 'basic',
+        data.message = 'The Wii Shop theme will now play when you visit shopping websites. Click the toolbar button to change settings, or click this notification.'
-            'iconUrl': chrome.extension.getURL('img/icon128.png'),
+        handleNotif = function (id) {
-            'title': 'Wii Shop Music extension installed!',
+            chrome.notifications.onClicked.addListener(function (id) {
-            'message': 'The Wii Shop theme will now play when you visit shopping websites, and you can use the toolbar button to change settings. Click here to join the Discord server.'
+                chrome.windows.create({
-        }, function (id) {
+                    'url': chrome.extension.getURL('popup.html'),
-            browser.notifications.onClicked.addListener(function(id) {
+                    'width': 300,
-                chrome.tabs.create({ url: 'https://discord.com/invite/59wfy5cNHw' })
+                    'height': 500,
+                    'type': 'popup'
+                })
             })
-        })
+        }
     } else {
-        // Chromium browsers support buttons in notifications
+        // Chromium browsers don't support openPopup(), but do support a button
-        chrome.notifications.create({
+        data.message = 'The Wii Shop theme will now play when you visit shopping websites. Click the toolbar button to change settings at any time.'
-            'type': 'basic',
+        data.buttons = [{
-            'iconUrl': chrome.extension.getURL('img/icon128.png'),
+            title: 'Open settings'
-            'title': 'Wii Shop Music extension installed!',
+        },
-            'message': 'The Wii Shop theme will now play when you visit shopping websites, and you can use the toolbar button to change settings.',
+        {
-            buttons: [{
+            title: 'Join Discord'
-                title: 'Join Discord server'
+        }
-            }]
+        ]
-        }, function (id) {
+        handleNotif = function (id) {
-            chrome.notifications.onButtonClicked.addListener(function (id, btnIdx) {
+            chrome.notifications.onButtonClicked.addListener(function (id, i) {
-                if (btnIdx === 0) {
+                if (i === 0) {
+                    chrome.windows.create({
+                        'url': chrome.extension.getURL('popup.html'),
+                        'width': 300,
+                        'height': 500,
+                        'type': 'popup'
+                    })
+                } else if (i === 1) {
                     chrome.tabs.create({ url: 'https://discord.com/invite/59wfy5cNHw' })
                 }
             })
-        })
+        }
     }
+    // Display the notification
+    chrome.notifications.create(data, handleNotif)
 })

js/site-list.js

@@ -117,5 +117,4 @@ const siteList = [
     'u-mall.com.tw',
     'tw.bid.yahoo.com',
     'tw.mail.yahoo.com'
-    
 ]

popup.html

@@ -5,65 +5,41 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="css/bootstrap.min.css" rel="stylesheet">
     <style>
-        html, body {
+        html,
+        body {
             width: 300px;
         }
-
+        select {
-        body {
-            margin: 0;
-            padding: 5px;
-        }
-
-        body, input, select, button {
-            font-family: Arial, Helvetica, sans-serif;
-            font-size: 18px;
-        }
-
-        .picker {
-            width: calc(100% - 10px);
             overflow: auto;
-            border: 5px solid #34bfed;
-            /* background: linear-gradient(to bottom, #afe7f6 0%, #b0e4f9 1%, #b9e8f8 14%, #dbf3fd 43%, #e8f7fe 53%, #f7ffff 71%, #f2fdff 88%, #f0fbff 89%, #ebf7fa 90%, #e5f3f6 92%, #e5f2fa 94%, #e0f1f5 95%, #dff1f3 96%, #e4eff3 97%, #e1f0f3 98%, #e0edf6 99%, #ddeff2 100%); */
-            outline: none;
         }
-
+        .btn-wii {
-        .picker option:active {
-            color: red;
-        }
-
-        button {
-            margin-top: 10px;
-            height: 40px;
-            width: calc(100% - 10px);
-            border: 1px solid #34bfed;
-            border-radius: 10px;
             background: linear-gradient(to bottom, #f5fafe 0%,#fdfdfe 7%,#f2fdff 81%,#e8f3f8 86%,#e7f2f6 89%,#e4f0f3 93%,#ddeff0 100%);
+            border: 1px solid #34bfed;
         }
-
+        .btn-wii:active {
-        button:active {
             background: linear-gradient(to top, #f5fafe 0%,#fdfdfe 7%,#f2fdff 81%,#e8f3f8 86%,#e7f2f6 89%,#e4f0f3 93%,#ddeff0 100%);
         }
-
-        header {
-            font-weight: bold;
-            margin-bottom: 5px;
-        }
     </style>
 </head>
+
 <body>
-    <header>Music Picker</header>
+    <div class="container-fluid">
-    <select id="music-picker" multiple size="5" class="picker">
+        <label for="music-picker" class="mt-2 form-label">Music Picker</label>
-        <option value="wii-shop-theme">Wii Shop Channel</option>
+        <select id="music-picker" multiple size="6" class="form-select w-100" multiple>
-        <option value="wii-shop-banner-theme">Wii Shop Channel (Menu)</option>
+            <option value="wii-shop-theme">Wii Shop Channel</option>
-        <option value="wii-u-eshop-theme">Wii U eShop</option>
+            <option value="wii-shop-banner-theme">Wii Shop Channel (Menu)</option>
-        <option value="3ds-eshop-theme">3DS eShop</option>
+            <option value="wii-u-eshop-theme">Wii U eShop</option>
-        <option value="dsi-shop-theme">DSi Shop</option>
+            <option value="3ds-eshop-theme">3DS eShop</option>
-        <option value="coconut-mall">Coconut Mall</option>
+            <option value="dsi-shop-theme">DSi Shop</option>
-    </select>
+            <option value="coconut-mall">Coconut Mall</option>
-
+        </select>
-    <button data-link="https://discord.com/invite/59wfy5cNHw">Join Discord server</button>
 
+        <button class="btn btn-sm btn-wii mt-2 mb-2 w-100" data-link="https://discord.com/invite/59wfy5cNHw">Join Discord server</button>
+    </div>
+    <script src="js/bootstrap.min.js"></script>
     <script src="js/popup.js"></script>
 </body>
+
 </html>