Add custom user agent option

ext/src/ui/options/Options.svelte

@@ -10,14 +10,20 @@
     import options, { Options } from "../../lib/options";
     import defaultOptions from "../../defaultOptions";
 
+    import { getChromeUserAgent } from "../../lib/userAgents";
+
     const _ = browser.i18n.getMessage;
 
     let formElement: HTMLFormElement;
     let isFormValid = true;
     let showSavedIndicator = false;
 
+    let platform: string;
+
     let opts: Options | undefined;
     onMount(async () => {
+        platform = (await browser.runtime.getPlatformInfo()).os;
+
         opts = await options.getAll();
         options.addEventListener("changed", async () => {
             opts = await options.getAll();
@@ -277,6 +283,23 @@
                 </div>
             </div>
 
+            <div class="option">
+                <label class="option__label" for="siteWhitelistCustomUserAgent">
+                    {_("optionsSiteWhitelistCustomUserAgent")}
+                </label>
+                <div class="option__control">
+                    <input
+                        type="text"
+                        class="user-agent-string-custom"
+                        bind:value={opts.siteWhitelistCustomUserAgent}
+                        placeholder={getChromeUserAgent(platform)}
+                    />
+                    <div class="option__description">
+                        {_("optionsSiteWhitelistCustomUserAgentDescription")}
+                    </div>
+                </div>
+            </div>
+
             <div class="option">
                 <div class="option__label">
                     {_("optionsSiteWhitelistContent")}

ext/src/ui/options/styles/index.css

@@ -20,10 +20,15 @@ body {
     font-size: 13px;
 }
 
-a              { color: var(--blue-40); }
-a:hover        { color: var(--blue-50); }
-a:hover:active { color: var(--blue-60); }
-
+a {
+    color: var(--blue-40);
+}
+a:hover {
+    color: var(--blue-50);
+}
+a:hover:active {
+    color: var(--blue-60);
+}
 
 button.ghost {
     width: 24px !important;
@@ -38,7 +43,6 @@ button.ghost:not(:hover) {
     background-color: initial;
 }
 
-
 #form {
     display: flex;
     flex-direction: column;
@@ -209,7 +213,6 @@ button.ghost:not(:hover) {
     width: 75px;
 }
 
-
 .category {
     border: initial;
     display: grid;
@@ -228,7 +231,6 @@ button.ghost:not(:hover) {
     border-bottom: 1px solid var(--border-color);
 }
 
-
 .category > hr {
     border: initial;
     border-top: 1px solid var(--border-color);
@@ -258,7 +260,6 @@ button.ghost:not(:hover) {
     grid-column: span 2;
 }
 
-
 .option {
     display: contents;
 }
@@ -316,7 +317,6 @@ button.ghost:not(:hover) {
     margin-inline-start: initial;
 }
 
-
 .whitelist {
     background-color: var(--box-background);
     border: 1px solid var(--border-color);
@@ -389,7 +389,6 @@ button.ghost:not(:hover) {
     margin-inline-end: auto;
 }
 
-
 .translator__tag {
     color: #0a84ff;
     display: inline-block;
@@ -400,6 +399,9 @@ button.ghost:not(:hover) {
     vertical-align: text-top;
 }
 
+.user-agent-string-custom {
+    width: -moz-available;
+}
 
 @media (prefers-color-scheme: dark) {
     .whitelist__item:nth-child(even) {