Detect internal users and add an extra section to settings for them.

shared/js/background/background.js

@@ -21,6 +21,7 @@ import TabTracker from './components/tab-tracking'
 import MV3ContentScriptInjection from './components/mv3-content-script-injection'
 import EmailAutofill from './components/email-autofill'
 import OmniboxSearch from './components/omnibox-search'
+import InternalUserDetector from './components/internal-user-detector'
 import initDebugBuild from './devbuild'
 import initReloader from './devbuild-reloader'
 import tabManager from './tab-manager'
@@ -44,7 +45,8 @@ settings.ready().then(() => {
 const components = {
     tabTracking: new TabTracker({ tabManager }),
     autofill: new EmailAutofill({ settings }),
-    omnibox: new OmniboxSearch()
+    omnibox: new OmniboxSearch(),
+    internalUser: new InternalUserDetector({ settings })
 }
 
 // Chrome-only components

shared/js/background/components/internal-user-detector.js

@@ -0,0 +1,36 @@
+import browser from 'webextension-polyfill'
+import { registerMessageHandler } from '../message-handlers'
+
+const VERIFICATION_HOST = 'use-login.duckduckgo.com'
+const SETTINGS_KEY = 'isInternalUser'
+
+/**
+ * Is the user a DDG employee
+ * @param {import('../settings.js')} settings
+ */
+export function isInternalUser (settings) {
+    return settings.getSetting(SETTINGS_KEY) || false
+}
+
+export default class InternalUserDetector {
+    /**
+     * @param {{
+    *  settings: import('../settings.js');
+    * }} options
+    */
+    constructor ({ settings }) {
+        this.settings = settings
+        browser.webRequest.onCompleted.addListener((details) => {
+            if (details.statusCode === 200) {
+                settings.updateSetting(SETTINGS_KEY, true)
+            }
+        }, {
+            urls: [`https://${VERIFICATION_HOST}/*`]
+        })
+        registerMessageHandler('isInternalUser', this.isInternalUser.bind(this))
+    }
+
+    isInternalUser () {
+        return isInternalUser(this.settings)
+    }
+}

shared/js/ui/pages/options.js

@@ -11,6 +11,7 @@ const UserDataModel = require('./../models/user-data.js')
 const userDataTemplate = require('./../templates/user-data.js')
 const BackgroundMessageModel = require('./../models/background-message.js')
 const browserUIWrapper = require('./../base/ui-wrapper.js')
+const InternalOptionsView = require('./../views/internal-options.js').default
 const t = window.DDG.base.i18n.t
 
 function Options (ops) {
@@ -56,6 +57,11 @@ Options.prototype = window.$.extend({},
                 template: userDataTemplate
             })
 
+            this.views.internal = new InternalOptionsView({
+                pageView: this,
+                appendTo: $parent
+            })
+
             this.views.allowlist = new AllowlistView({
                 pageView: this,
                 model: new AllowlistModel({}),

shared/js/ui/views/internal-options.js

@@ -0,0 +1,46 @@
+import bel from 'nanohtml'
+const ModelParent = window.DDG.base.Model
+const ViewParent = window.DDG.base.View
+
+class Model extends ModelParent {
+    constructor () {
+        super({
+            modelName: 'internalOptions'
+        })
+        this.isInternalUser = false
+    }
+
+    async getState () {
+        this.isInternalUser = await this.sendMessage('isInternalUser')
+    }
+}
+
+function template () {
+    if (this.model.isInternalUser) {
+        return bel`<section class="options-content__allowlist divider-bottom">
+            <h2 class="menu-title">Internal settings</h2>
+            <ul class="default-list">
+                <li>
+                    <p class="menu-paragraph">
+                        Internal-only settings for debugging the extension.
+                    </p>
+                </li>
+            </ul>
+        </section>`
+    }
+    return bel`<section class="options-content__allowlist"></section>`
+}
+
+export default function InternalOptionsView (ops) {
+    this.model = ops.model = new Model()
+    this.template = ops.template = template
+    this.pageView = ops.pageView
+    ViewParent.call(this, ops)
+    this.model.getState().then(() => {
+        this._rerender()
+    })
+}
+
+InternalOptionsView.prototype = window.$.extend({}, ViewParent.prototype, {
+
+})