Add clickable web browser settings links (#1481)

ext/js/pages/permissions-main.js

@@ -20,6 +20,7 @@
  * PermissionsToggleController
  * PersistentStorageController
  * SettingsController
+ * SettingsDisplayController
  */
 
 async function setupEnvironmentInfo() {
@@ -69,6 +70,13 @@ function setupPermissionsToggles() {
             node.textContent = chrome.runtime.getURL('/');
         }
 
+        const extensionId = chrome.runtime.id;
+        const idPattern = /\{id\}/g;
+        for (const node of document.querySelectorAll('.extension-settings-link[data-special-url]')) {
+            const {specialUrl} = node.dataset;
+            node.dataset.specialUrl = `${specialUrl}`.replace(idPattern, extensionId);
+        }
+
         await yomichan.prepare();
 
         setupEnvironmentInfo();
@@ -99,6 +107,9 @@ function setupPermissionsToggles() {
         await promiseTimeout(100);
 
         document.documentElement.dataset.loaded = 'true';
+
+        const settingsDisplayController = new SettingsDisplayController(settingsController, null);
+        settingsDisplayController.prepare();
     } catch (e) {
         log.error(e);
     }

ext/permissions.html

@@ -129,7 +129,7 @@
                         When enabled, Yomichan is able to scan text and show definitions in private/incognito web browser windows.
                     </p>
                     <p>
-                        This option can be configured from the web browser's extension settings pages.
+                        This option can be configured from the web browser's <a class="extension-settings-link" data-special-url="chrome://extensions/?id={id}">extension settings pages</a>.
                     </p>
                 </div>
             </div>
@@ -145,7 +145,7 @@
                         When enabled, Yomichan is able to scan text and show definitions on local HTML files located using the <code>file://*</code> scheme.
                     </p>
                     <p data-show-for-browser="chrome edge">
-                        This option can be configured from the web browser's extension settings pages.
+                        This option can be configured from the web browser's <a class="extension-settings-link" data-special-url="chrome://extensions/?id={id}">extension settings pages</a>.
                     </p>
                 </div>
             </div>
@@ -193,9 +193,11 @@
 <script src="/js/data/permissions-util.js"></script>
 <script src="/js/dom/document-focus-controller.js"></script>
 <script src="/js/dom/html-template-collection.js"></script>
+<script src="/js/dom/selector-observer.js"></script>
 <script src="/js/pages/settings/permissions-toggle-controller.js"></script>
 <script src="/js/pages/settings/persistent-storage-controller.js"></script>
 <script src="/js/pages/settings/settings-controller.js"></script>
+<script src="/js/pages/settings/settings-display-controller.js"></script>
 
 <script src="/js/pages/permissions-main.js"></script>