[PM-5560] Implement Autofill Settings state provider (#7767)

* Begin migration of autofill settings Co-authored-by: Cesar Gonzalez <cagonzalezcs@users.noreply.github.com> Co-authored-by: Thomas Avery <Thomas-Avery@users.noreply.github.com> Co-authored-by: Jonathan Prusik <jprusik@users.noreply.github.com> Co-authored-by: Colton Hurst <coltonhurst@users.noreply.github.com> * add browser dependency for AutofillSettingsService Co-authored-by: Matt Gibson <mgibson@bitwarden.com> * update autofill settings service * replace usages of stateService get/set autofillOnPageLoad with autofillSettingsService * replace usages of stateService get/set autofillOnPageLoadDefault with autofillSettingsService * replace usages of stateService get/set autoCopyTotp with autofillSettingsService * replace usages of stateService get/set autoFillOnPageLoadCalloutIsDismissed with autofillSettingsService * replace usages of stateService get/set activateAutoFillOnPageLoadFromPolicy with autofillSettingsService * replace usages of get/set autoFillOverlayVisibility with autofillSettingsService * inlineMenuVisibility should use global state * add the AutofillSettingsService to background scripts * fix typing * replace additional usages of get/set autoFillOverlayVisibility and disableAutoTotpCopy with autofillSettingsService equivalents * replace additional usages of get/set autofillOnPageLoadDefault with autofillSettingsService equivalent * replace additional usages of get/set activateAutoFillOnPageLoadFromPolicy with autofillSettingsService equivalent * remove additional deprecated and unused state service calls * improve naming conventions and consistency * fix missing mock for policy service test * replace missing overlay background tests * cleanup * fix double inversion * fix reference to wrong setter * move handleActivateAutofillPolicy out of BrowserPolicyService * create state migration script * resolve linting issues * remove migrated setting properties * add AutofillSettingsSErvice to jslib-services * handle conditional content script loading via autofillOnPageLoad check * add deprecated note to getFromLocalStorage * add jsdoc decorators to new autofill service methods * handle undefined globalState * move autofill settings out of BrowserPolicyService * Move autofill settings code out of policyService * fix tests * fix typo in state definition --------- Co-authored-by: Matt Gibson <mgibson@bitwarden.com> Co-authored-by: Cesar Gonzalez <cagonzalezcs@users.noreply.github.com> Co-authored-by: Thomas Avery <Thomas-Avery@users.noreply.github.com> Co-authored-by: Colton Hurst <coltonhurst@users.noreply.github.com> Co-authored-by: Thomas Rittson <trittson@bitwarden.com>
2025-12-13 23:03:32 +00:00 · 2024-02-12 17:11:04 -05:00
parent bf16682f42
commit c65e92f769
34 changed files with 975 additions and 306 deletions
--- a/apps/browser/src/admin-console/services/browser-policy.service.ts
+++ b/apps/browser/src/admin-console/services/browser-policy.service.ts
@@ -1,11 +1,8 @@
-import { BehaviorSubject, filter, map, Observable, switchMap, tap } from "rxjs";
+import { BehaviorSubject } from "rxjs";
 import { Jsonify } from "type-fest";

-import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
-import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { Policy } from "@bitwarden/common/admin-console/models/domain/policy";
 import { PolicyService } from "@bitwarden/common/admin-console/services/policy/policy.service";
-import { StateService } from "@bitwarden/common/platform/abstractions/state.service";

 import { browserSession, sessionSync } from "../../platform/decorators/session-sync-observable";

@@ -16,31 +13,4 @@ export class BrowserPolicyService extends PolicyService {
    initializeAs: "array",
  })
  protected _policies: BehaviorSubject<Policy[]>;
-
-  constructor(stateService: StateService, organizationService: OrganizationService) {
-    super(stateService, organizationService);
-    this._policies.pipe(this.handleActivateAutofillPolicy.bind(this)).subscribe();
-  }
-
-  /**
-   * If the ActivateAutofill policy is enabled, save a flag indicating if we need to
-   * enable Autofill on page load.
-   */
-  private handleActivateAutofillPolicy(policies$: Observable<Policy[]>) {
-    return policies$.pipe(
-      map((policies) => policies.find((p) => p.type == PolicyType.ActivateAutofill && p.enabled)),
-      filter((p) => p != null),
-      switchMap(async (_) => [
-        await this.stateService.getActivateAutoFillOnPageLoadFromPolicy(),
-        await this.stateService.getEnableAutoFillOnPageLoad(),
-      ]),
-      tap(([activated, autofillEnabled]) => {
-        if (activated === undefined) {
-          // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-          // eslint-disable-next-line @typescript-eslint/no-floating-promises
-          this.stateService.setActivateAutoFillOnPageLoadFromPolicy(!autofillEnabled);
-        }
-      }),
-    );
-  }
 }
--- a/apps/browser/src/autofill/background/overlay.background.spec.ts
+++ b/apps/browser/src/autofill/background/overlay.background.spec.ts
@@ -2,6 +2,7 @@ import { mock, mockReset } from "jest-mock-extended";

 import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
 import { AuthService } from "@bitwarden/common/auth/services/auth.service";
+import { AutofillSettingsService } from "@bitwarden/common/autofill/services/autofill-settings.service";
 import { ThemeType } from "@bitwarden/common/platform/enums";
 import { EnvironmentService } from "@bitwarden/common/platform/services/environment.service";
 import { I18nService } from "@bitwarden/common/platform/services/i18n.service";
@@ -47,21 +48,18 @@ describe("OverlayBackground", () => {
  });
  const settingsService = mock<SettingsService>();
  const stateService = mock<BrowserStateService>();
+  const autofillSettingsService = mock<AutofillSettingsService>();
  const i18nService = mock<I18nService>();
  const platformUtilsService = mock<BrowserPlatformUtilsService>();
-  const initOverlayElementPorts = (options = { initList: true, initButton: true }) => {
+  const initOverlayElementPorts = async (options = { initList: true, initButton: true }) => {
    const { initList, initButton } = options;
    if (initButton) {
-      // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      overlayBackground["handlePortOnConnect"](createPortSpyMock(AutofillOverlayPort.Button));
+      await overlayBackground["handlePortOnConnect"](createPortSpyMock(AutofillOverlayPort.Button));
      buttonPortSpy = overlayBackground["overlayButtonPort"];
    }

    if (initList) {
-      // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      overlayBackground["handlePortOnConnect"](createPortSpyMock(AutofillOverlayPort.List));
+      await overlayBackground["handlePortOnConnect"](createPortSpyMock(AutofillOverlayPort.List));
      listPortSpy = overlayBackground["overlayListPort"];
    }

@@ -76,12 +74,16 @@ describe("OverlayBackground", () => {
      environmentService,
      settingsService,
      stateService,
+      autofillSettingsService,
      i18nService,
      platformUtilsService,
    );
-    // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    overlayBackground.init();
+
+    jest
+      .spyOn(overlayBackground as any, "getOverlayVisibility")
+      .mockResolvedValue(AutofillOverlayVisibility.OnFieldFocus);
+
+    void overlayBackground.init();
  });

  afterEach(() => {
@@ -570,8 +572,8 @@ describe("OverlayBackground", () => {
      });

      describe("autofillOverlayElementClosed message handler", () => {
-        beforeEach(() => {
-          initOverlayElementPorts();
+        beforeEach(async () => {
+          await initOverlayElementPorts();
        });

        it("disconnects the button element port", () => {
@@ -635,7 +637,7 @@ describe("OverlayBackground", () => {
      describe("getAutofillOverlayVisibility message handler", () => {
        beforeEach(() => {
          jest
-            .spyOn(overlayBackground["settingsService"], "getAutoFillOverlayVisibility")
+            .spyOn(overlayBackground as any, "getOverlayVisibility")
            .mockResolvedValue(AutofillOverlayVisibility.OnFieldFocus);
        });

@@ -643,7 +645,7 @@ describe("OverlayBackground", () => {
          sendExtensionRuntimeMessage({ command: "getAutofillOverlayVisibility" });
          await flushPromises();

-          expect(overlayBackground["overlayVisibility"]).toBe(
+          expect(await overlayBackground["getOverlayVisibility"]()).toBe(
            AutofillOverlayVisibility.OnFieldFocus,
          );
        });
@@ -663,8 +665,8 @@ describe("OverlayBackground", () => {
      });

      describe("checkAutofillOverlayFocused message handler", () => {
-        beforeEach(() => {
-          initOverlayElementPorts();
+        beforeEach(async () => {
+          await initOverlayElementPorts();
        });

        it("will check if the overlay list is focused if the list port is open", () => {
@@ -693,8 +695,8 @@ describe("OverlayBackground", () => {
      });

      describe("focusAutofillOverlayList message handler", () => {
-        it("will send a `focusOverlayList` message to the overlay list port", () => {
-          initOverlayElementPorts({ initList: true, initButton: false });
+        it("will send a `focusOverlayList` message to the overlay list port", async () => {
+          await initOverlayElementPorts({ initList: true, initButton: false });

          sendExtensionRuntimeMessage({ command: "focusAutofillOverlayList" });

@@ -703,14 +705,15 @@ describe("OverlayBackground", () => {
      });

      describe("updateAutofillOverlayPosition message handler", () => {
-        beforeEach(() => {
-          // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-          // eslint-disable-next-line @typescript-eslint/no-floating-promises
-          overlayBackground["handlePortOnConnect"](createPortSpyMock(AutofillOverlayPort.List));
+        beforeEach(async () => {
+          await overlayBackground["handlePortOnConnect"](
+            createPortSpyMock(AutofillOverlayPort.List),
+          );
          listPortSpy = overlayBackground["overlayListPort"];
-          // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-          // eslint-disable-next-line @typescript-eslint/no-floating-promises
-          overlayBackground["handlePortOnConnect"](createPortSpyMock(AutofillOverlayPort.Button));
+
+          await overlayBackground["handlePortOnConnect"](
+            createPortSpyMock(AutofillOverlayPort.Button),
+          );
          buttonPortSpy = overlayBackground["overlayButtonPort"];
        });

@@ -813,8 +816,8 @@ describe("OverlayBackground", () => {
      });

      describe("updateOverlayHidden", () => {
-        beforeEach(() => {
-          initOverlayElementPorts();
+        beforeEach(async () => {
+          await initOverlayElementPorts();
        });

        it("returns early if the display value is not provided", () => {
@@ -984,19 +987,17 @@ describe("OverlayBackground", () => {
      jest.spyOn(overlayBackground as any, "getOverlayCipherData").mockImplementation();
    });

-    it("skips setting up the overlay port if the port connection is not for an overlay element", () => {
+    it("skips setting up the overlay port if the port connection is not for an overlay element", async () => {
      const port = createPortSpyMock("not-an-overlay-element");

-      // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      overlayBackground["handlePortOnConnect"](port);
+      await overlayBackground["handlePortOnConnect"](port);

      expect(port.onMessage.addListener).not.toHaveBeenCalled();
      expect(port.postMessage).not.toHaveBeenCalled();
    });

    it("sets up the overlay list port if the port connection is for the overlay list", async () => {
-      initOverlayElementPorts({ initList: true, initButton: false });
+      await initOverlayElementPorts({ initList: true, initButton: false });
      await flushPromises();

      expect(overlayBackground["overlayButtonPort"]).toBeUndefined();
@@ -1012,7 +1013,7 @@ describe("OverlayBackground", () => {
    });

    it("sets up the overlay button port if the port connection is for the overlay button", async () => {
-      initOverlayElementPorts({ initList: false, initButton: true });
+      await initOverlayElementPorts({ initList: false, initButton: true });
      await flushPromises();

      expect(overlayBackground["overlayListPort"]).toBeUndefined();
@@ -1029,7 +1030,7 @@ describe("OverlayBackground", () => {
    it("gets the system theme", async () => {
      jest.spyOn(overlayBackground["stateService"], "getTheme").mockResolvedValue(ThemeType.System);

-      initOverlayElementPorts({ initList: true, initButton: false });
+      await initOverlayElementPorts({ initList: true, initButton: false });
      await flushPromises();

      expect(listPortSpy.postMessage).toHaveBeenCalledWith(
@@ -1039,8 +1040,8 @@ describe("OverlayBackground", () => {
  });

  describe("handleOverlayElementPortMessage", () => {
-    beforeEach(() => {
-      initOverlayElementPorts();
+    beforeEach(async () => {
+      await initOverlayElementPorts();
      overlayBackground["userAuthStatus"] = AuthenticationStatus.Unlocked;
    });

--- a/apps/browser/src/autofill/background/overlay.background.ts
+++ b/apps/browser/src/autofill/background/overlay.background.ts
@@ -1,6 +1,9 @@
+import { firstValueFrom } from "rxjs";
+
 import { SettingsService } from "@bitwarden/common/abstractions/settings.service";
 import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
 import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
+import { AutofillSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/autofill-settings.service";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
@@ -21,7 +24,11 @@ import {
 } from "../../vault/popup/utils/vault-popout-window";
 import { SHOW_AUTOFILL_BUTTON } from "../constants";
 import { AutofillService, PageDetail } from "../services/abstractions/autofill.service";
-import { AutofillOverlayElement, AutofillOverlayPort } from "../utils/autofill-overlay.enum";
+import {
+  InlineMenuVisibilitySetting,
+  AutofillOverlayElement,
+  AutofillOverlayPort,
+} from "../utils/autofill-overlay.enum";

 import { LockedVaultPendingNotificationsData } from "./abstractions/notification.background";
 import {
@@ -41,7 +48,6 @@ class OverlayBackground implements OverlayBackgroundInterface {
  private readonly openUnlockPopout = openUnlockPopout;
  private readonly openViewVaultItemPopout = openViewVaultItemPopout;
  private readonly openAddEditVaultItemPopout = openAddEditVaultItemPopout;
-  private overlayVisibility: number;
  private overlayLoginCiphers: Map<string, CipherView> = new Map();
  private pageDetailsForTab: Record<number, PageDetail[]> = {};
  private userAuthStatus: AuthenticationStatus = AuthenticationStatus.LoggedOut;
@@ -90,6 +96,7 @@ class OverlayBackground implements OverlayBackgroundInterface {
    private environmentService: EnvironmentService,
    private settingsService: SettingsService,
    private stateService: StateService,
+    private autofillSettingsService: AutofillSettingsServiceAbstraction,
    private i18nService: I18nService,
    private platformUtilsService: PlatformUtilsService,
  ) {
@@ -455,10 +462,8 @@ class OverlayBackground implements OverlayBackgroundInterface {
  /**
   * Gets the overlay's visibility setting from the settings service.
   */
-  private async getOverlayVisibility(): Promise<number> {
-    this.overlayVisibility = await this.settingsService.getAutoFillOverlayVisibility();
-
-    return this.overlayVisibility;
+  private async getOverlayVisibility(): Promise<InlineMenuVisibilitySetting> {
+    return await firstValueFrom(this.autofillSettingsService.inlineMenuVisibility$);
  }

  /**
--- a/apps/browser/src/autofill/background/service_factories/autofill-service.factory.ts
+++ b/apps/browser/src/autofill/background/service_factories/autofill-service.factory.ts
@@ -34,11 +34,17 @@ import {
 import { AutofillService as AbstractAutoFillService } from "../../services/abstractions/autofill.service";
 import AutofillService from "../../services/autofill.service";

+import {
+  AutofillSettingsServiceInitOptions,
+  autofillSettingsServiceFactory,
+} from "./autofill-settings-service.factory";
+
 type AutoFillServiceOptions = FactoryOptions;

 export type AutoFillServiceInitOptions = AutoFillServiceOptions &
  CipherServiceInitOptions &
  StateServiceInitOptions &
+  AutofillSettingsServiceInitOptions &
  TotpServiceInitOptions &
  EventCollectionServiceInitOptions &
  LogServiceInitOptions &
@@ -57,6 +63,7 @@ export function autofillServiceFactory(
      new AutofillService(
        await cipherServiceFactory(cache, opts),
        await stateServiceFactory(cache, opts),
+        await autofillSettingsServiceFactory(cache, opts),
        await totpServiceFactory(cache, opts),
        await eventCollectionServiceFactory(cache, opts),
        await logServiceFactory(cache, opts),
--- a/apps/browser/src/autofill/background/service_factories/autofill-settings-service.factory.ts
+++ b/apps/browser/src/autofill/background/service_factories/autofill-settings-service.factory.ts
@@ -0,0 +1,35 @@
+import { AutofillSettingsService } from "@bitwarden/common/autofill/services/autofill-settings.service";
+
+import {
+  policyServiceFactory,
+  PolicyServiceInitOptions,
+} from "../../../admin-console/background/service-factories/policy-service.factory";
+import {
+  CachedServices,
+  factory,
+  FactoryOptions,
+} from "../../../platform/background/service-factories/factory-options";
+import {
+  stateProviderFactory,
+  StateProviderInitOptions,
+} from "../../../platform/background/service-factories/state-provider.factory";
+
+export type AutofillSettingsServiceInitOptions = FactoryOptions &
+  StateProviderInitOptions &
+  PolicyServiceInitOptions;
+
+export function autofillSettingsServiceFactory(
+  cache: { autofillSettingsService?: AutofillSettingsService } & CachedServices,
+  opts: AutofillSettingsServiceInitOptions,
+): Promise<AutofillSettingsService> {
+  return factory(
+    cache,
+    "autofillSettingsService",
+    opts,
+    async () =>
+      new AutofillSettingsService(
+        await stateProviderFactory(cache, opts),
+        await policyServiceFactory(cache, opts),
+      ),
+  );
+}
--- a/apps/browser/src/autofill/content/autofiller.ts
+++ b/apps/browser/src/autofill/content/autofiller.ts
@@ -1,4 +1,4 @@
-import { getFromLocalStorage, setupExtensionDisconnectAction } from "../utils";
+import { setupExtensionDisconnectAction } from "../utils";

 if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", loadAutofiller);
@@ -22,19 +22,11 @@ function loadAutofiller() {
  };

  setupExtensionEventListeners();
-  // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-  // eslint-disable-next-line @typescript-eslint/no-floating-promises
  triggerUserFillOnLoad();

-  async function triggerUserFillOnLoad() {
-    const activeUserIdKey = "activeUserId";
-    const userKeyStorage = await getFromLocalStorage(activeUserIdKey);
-    const activeUserId = userKeyStorage[activeUserIdKey];
-    const activeUserStorage = await getFromLocalStorage(activeUserId);
-    if (activeUserStorage?.[activeUserId]?.settings?.enableAutoFillOnPageLoad === true) {
-      clearDoFillInterval();
-      doFillInterval = setInterval(() => doFillIfNeeded(), 500);
-    }
+  function triggerUserFillOnLoad() {
+    clearDoFillInterval();
+    doFillInterval = setInterval(() => doFillIfNeeded(), 500);
  }

  function doFillIfNeeded(force = false) {
--- a/apps/browser/src/autofill/popup/settings/autofill.component.ts
+++ b/apps/browser/src/autofill/popup/settings/autofill.component.ts
@@ -1,7 +1,8 @@
 import { Component, OnInit } from "@angular/core";
+import { firstValueFrom } from "rxjs";

 import { SettingsService } from "@bitwarden/common/abstractions/settings.service";
-import { ConfigServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction";
+import { AutofillSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/autofill-settings.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
@@ -11,7 +12,10 @@ import { DialogService } from "@bitwarden/components";
 import { BrowserApi } from "../../../platform/browser/browser-api";
 import { enableAccountSwitching } from "../../../platform/flags";
 import { AutofillService } from "../../services/abstractions/autofill.service";
-import { AutofillOverlayVisibility } from "../../utils/autofill-overlay.enum";
+import {
+  AutofillOverlayVisibility,
+  InlineMenuVisibilitySetting,
+} from "../../utils/autofill-overlay.enum";

@Component({
  selector: "app-autofill",
@@ -20,7 +24,7 @@ import { AutofillOverlayVisibility } from "../../utils/autofill-overlay.enum";
 export class AutofillComponent implements OnInit {
  protected canOverrideBrowserAutofillSetting = false;
  protected defaultBrowserAutofillDisabled = false;
-  protected autoFillOverlayVisibility: number;
+  protected autoFillOverlayVisibility: InlineMenuVisibilitySetting;
  protected autoFillOverlayVisibilityOptions: any[];
  protected disablePasswordManagerLink: string;
  enableAutoFillOnPageLoad = false;
@@ -35,10 +39,10 @@ export class AutofillComponent implements OnInit {
    private stateService: StateService,
    private i18nService: I18nService,
    private platformUtilsService: PlatformUtilsService,
-    private configService: ConfigServiceAbstraction,
    private settingsService: SettingsService,
    private autofillService: AutofillService,
    private dialogService: DialogService,
+    private autofillSettingsService: AutofillSettingsServiceAbstraction,
  ) {
    this.autoFillOverlayVisibilityOptions = [
      {
@@ -80,12 +84,17 @@ export class AutofillComponent implements OnInit {

    this.defaultBrowserAutofillDisabled = await this.browserAutofillSettingCurrentlyOverridden();

-    this.autoFillOverlayVisibility =
-      (await this.settingsService.getAutoFillOverlayVisibility()) || AutofillOverlayVisibility.Off;
+    this.autoFillOverlayVisibility = await firstValueFrom(
+      this.autofillSettingsService.inlineMenuVisibility$,
+    );

-    this.enableAutoFillOnPageLoad = await this.stateService.getEnableAutoFillOnPageLoad();
-    this.autoFillOnPageLoadDefault =
-      (await this.stateService.getAutoFillOnPageLoadDefault()) ?? true;
+    this.enableAutoFillOnPageLoad = await firstValueFrom(
+      this.autofillSettingsService.autofillOnPageLoad$,
+    );
+
+    this.autoFillOnPageLoadDefault = await firstValueFrom(
+      this.autofillSettingsService.autofillOnPageLoadDefault$,
+    );

    const defaultUriMatch = await this.stateService.getDefaultUriMatch();
    this.defaultUriMatch = defaultUriMatch == null ? UriMatchType.Domain : defaultUriMatch;
@@ -95,19 +104,20 @@ export class AutofillComponent implements OnInit {
  }

  async updateAutoFillOverlayVisibility() {
-    const previousAutoFillOverlayVisibility =
-      await this.settingsService.getAutoFillOverlayVisibility();
-    await this.settingsService.setAutoFillOverlayVisibility(this.autoFillOverlayVisibility);
+    const previousAutoFillOverlayVisibility = await firstValueFrom(
+      this.autofillSettingsService.inlineMenuVisibility$,
+    );
+    await this.autofillSettingsService.setInlineMenuVisibility(this.autoFillOverlayVisibility);
    await this.handleUpdatingAutofillOverlayContentScripts(previousAutoFillOverlayVisibility);
    await this.requestPrivacyPermission();
  }

  async updateAutoFillOnPageLoad() {
-    await this.stateService.setEnableAutoFillOnPageLoad(this.enableAutoFillOnPageLoad);
+    await this.autofillSettingsService.setAutofillOnPageLoad(this.enableAutoFillOnPageLoad);
  }

  async updateAutoFillOnPageLoadDefault() {
-    await this.stateService.setAutoFillOnPageLoadDefault(this.autoFillOnPageLoadDefault);
+    await this.autofillSettingsService.setAutofillOnPageLoadDefault(this.autoFillOnPageLoadDefault);
  }

  async saveDefaultUriMatch() {
--- a/apps/browser/src/autofill/services/autofill.service.spec.ts
+++ b/apps/browser/src/autofill/services/autofill.service.spec.ts
@@ -1,6 +1,7 @@
 import { mock, mockReset } from "jest-mock-extended";

 import { UserVerificationService } from "@bitwarden/common/auth/services/user-verification/user-verification.service";
+import { AutofillSettingsService } from "@bitwarden/common/autofill/services/autofill-settings.service";
 import { EventType } from "@bitwarden/common/enums";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { EventCollectionService } from "@bitwarden/common/services/event/event-collection.service";
@@ -50,6 +51,7 @@ describe("AutofillService", () => {
  let autofillService: AutofillService;
  const cipherService = mock<CipherService>();
  const stateService = mock<BrowserStateService>();
+  const autofillSettingsService = mock<AutofillSettingsService>();
  const totpService = mock<TotpService>();
  const eventCollectionService = mock<EventCollectionService>();
  const logService = mock<LogService>();
@@ -60,6 +62,7 @@ describe("AutofillService", () => {
    autofillService = new AutofillService(
      cipherService,
      stateService,
+      autofillSettingsService,
      totpService,
      eventCollectionService,
      logService,
@@ -83,6 +86,10 @@ describe("AutofillService", () => {
      tab2 = createChromeTabMock({ id: 2, url: "http://some-url.com" });
      tab3 = createChromeTabMock({ id: 3, url: "chrome-extension://some-extension-route" });
      jest.spyOn(BrowserApi, "tabsQuery").mockResolvedValueOnce([tab1, tab2]);
+      jest
+        .spyOn(autofillService, "getOverlayVisibility")
+        .mockResolvedValue(AutofillOverlayVisibility.OnFieldFocus);
+      jest.spyOn(autofillService, "getAutofillOnPageLoad").mockResolvedValue(true);
    });

    it("queries all browser tabs and injects the autofill scripts into them", async () => {
@@ -134,6 +141,7 @@ describe("AutofillService", () => {
    it("re-injects the autofill scripts in all tabs", () => {
      autofillService["autofillScriptPortsSet"] = new Set([mock<chrome.runtime.Port>()]);
      jest.spyOn(autofillService as any, "injectAutofillScriptsInAllTabs");
+      jest.spyOn(autofillService, "getAutofillOnPageLoad").mockResolvedValue(true);

      // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
      // eslint-disable-next-line @typescript-eslint/no-floating-promises
@@ -155,9 +163,14 @@ describe("AutofillService", () => {
      tabMock = createChromeTabMock();
      sender = { tab: tabMock, frameId: 1 };
      jest.spyOn(BrowserApi, "executeScriptInTab").mockImplementation();
+      jest
+        .spyOn(autofillService, "getOverlayVisibility")
+        .mockResolvedValue(AutofillOverlayVisibility.OnFieldFocus);
    });

    it("accepts an extension message sender and injects the autofill scripts into the tab of the sender", async () => {
+      jest.spyOn(autofillService, "getAutofillOnPageLoad").mockResolvedValue(true);
+
      await autofillService.injectAutofillScripts(sender.tab, sender.frameId, true);

      [autofillOverlayBootstrapScript, ...defaultAutofillScripts].forEach((scriptName) => {
@@ -169,10 +182,23 @@ describe("AutofillService", () => {
      });
    });

+    it("skips injecting autofiller script when autofill on load setting is disabled", async () => {
+      jest.spyOn(autofillService, "getAutofillOnPageLoad").mockResolvedValue(false);
+
+      await autofillService.injectAutofillScripts(sender.tab, sender.frameId, true);
+
+      expect(BrowserApi.executeScriptInTab).not.toHaveBeenCalledWith(tabMock.id, {
+        file: "content/autofiller.js",
+        frameId: sender.frameId,
+        ...defaultExecuteScriptOptions,
+      });
+    });
+
    it("will inject the bootstrap-autofill-overlay script if the user has the autofill overlay enabled", async () => {
      jest
-        .spyOn(autofillService["settingsService"], "getAutoFillOverlayVisibility")
+        .spyOn(autofillService, "getOverlayVisibility")
        .mockResolvedValue(AutofillOverlayVisibility.OnFieldFocus);
+      jest.spyOn(autofillService, "getAutofillOnPageLoad").mockResolvedValue(true);

      await autofillService.injectAutofillScripts(sender.tab, sender.frameId);

@@ -190,8 +216,9 @@ describe("AutofillService", () => {

    it("will inject the bootstrap-autofill script if the user does not have the autofill overlay enabled", async () => {
      jest
-        .spyOn(autofillService["settingsService"], "getAutoFillOverlayVisibility")
+        .spyOn(autofillService, "getOverlayVisibility")
        .mockResolvedValue(AutofillOverlayVisibility.Off);
+      jest.spyOn(autofillService, "getAutofillOnPageLoad").mockResolvedValue(true);

      await autofillService.injectAutofillScripts(sender.tab, sender.frameId);

@@ -208,6 +235,8 @@ describe("AutofillService", () => {
    });

    it("injects the content-message-handler script if not injecting on page load", async () => {
+      jest.spyOn(autofillService, "getAutofillOnPageLoad").mockResolvedValue(true);
+
      await autofillService.injectAutofillScripts(sender.tab, sender.frameId, false);

      expect(BrowserApi.executeScriptInTab).toHaveBeenCalledWith(tabMock.id, {
@@ -622,12 +651,12 @@ describe("AutofillService", () => {
      const totpCode = "123456";
      autofillOptions.cipher.login.totp = "totp";
      jest.spyOn(stateService, "getCanAccessPremium").mockResolvedValue(true);
-      jest.spyOn(stateService, "getDisableAutoTotpCopy").mockResolvedValue(false);
+      jest.spyOn(autofillService, "getShouldAutoCopyTotp").mockResolvedValue(true);
      jest.spyOn(totpService, "getCode").mockResolvedValue(totpCode);

      const autofillResult = await autofillService.doAutoFill(autofillOptions);

-      expect(stateService.getDisableAutoTotpCopy).toHaveBeenCalled();
+      expect(autofillService.getShouldAutoCopyTotp).toHaveBeenCalled();
      expect(totpService.getCode).toHaveBeenCalledWith(autofillOptions.cipher.login.totp);
      expect(autofillResult).toBe(totpCode);
    });
@@ -635,11 +664,11 @@ describe("AutofillService", () => {
    it("does not return a TOTP value if the user does not have premium features", async () => {
      autofillOptions.cipher.login.totp = "totp";
      jest.spyOn(stateService, "getCanAccessPremium").mockResolvedValue(false);
-      jest.spyOn(stateService, "getDisableAutoTotpCopy").mockResolvedValue(false);
+      jest.spyOn(autofillService, "getShouldAutoCopyTotp").mockResolvedValue(true);

      const autofillResult = await autofillService.doAutoFill(autofillOptions);

-      expect(stateService.getDisableAutoTotpCopy).not.toHaveBeenCalled();
+      expect(autofillService.getShouldAutoCopyTotp).not.toHaveBeenCalled();
      expect(totpService.getCode).not.toHaveBeenCalled();
      expect(autofillResult).toBeNull();
    });
@@ -655,12 +684,12 @@ describe("AutofillService", () => {

    it("returns a null value if the login does not contain a TOTP value", async () => {
      autofillOptions.cipher.login.totp = undefined;
-      jest.spyOn(stateService, "getDisableAutoTotpCopy");
+      jest.spyOn(autofillService, "getShouldAutoCopyTotp");
      jest.spyOn(totpService, "getCode");

      const autofillResult = await autofillService.doAutoFill(autofillOptions);

-      expect(stateService.getDisableAutoTotpCopy).not.toHaveBeenCalled();
+      expect(autofillService.getShouldAutoCopyTotp).not.toHaveBeenCalled();
      expect(totpService.getCode).not.toHaveBeenCalled();
      expect(autofillResult).toBeNull();
    });
@@ -679,13 +708,13 @@ describe("AutofillService", () => {
      autofillOptions.cipher.login.totp = "totp";
      autofillOptions.cipher.organizationUseTotp = true;
      jest.spyOn(stateService, "getCanAccessPremium").mockResolvedValue(true);
-      jest.spyOn(stateService, "getDisableAutoTotpCopy").mockResolvedValue(true);
+      jest.spyOn(autofillService, "getShouldAutoCopyTotp").mockResolvedValue(false);
      jest.spyOn(totpService, "getCode");

      const autofillResult = await autofillService.doAutoFill(autofillOptions);

      expect(stateService.getCanAccessPremium).toHaveBeenCalled();
-      expect(stateService.getDisableAutoTotpCopy).toHaveBeenCalled();
+      expect(autofillService.getShouldAutoCopyTotp).toHaveBeenCalled();
      expect(totpService.getCode).not.toHaveBeenCalled();
      expect(autofillResult).toBeNull();
    });
--- a/apps/browser/src/autofill/services/autofill.service.ts
+++ b/apps/browser/src/autofill/services/autofill.service.ts
@@ -1,6 +1,9 @@
+import { firstValueFrom } from "rxjs";
+
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
 import { SettingsService } from "@bitwarden/common/abstractions/settings.service";
 import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
+import { AutofillSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/autofill-settings.service";
 import { EventType } from "@bitwarden/common/enums";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
@@ -17,7 +20,7 @@ import { AutofillPort } from "../enums/autofill-port.enums";
 import AutofillField from "../models/autofill-field";
 import AutofillPageDetails from "../models/autofill-page-details";
 import AutofillScript from "../models/autofill-script";
-import { AutofillOverlayVisibility } from "../utils/autofill-overlay.enum";
+import { InlineMenuVisibilitySetting } from "../utils/autofill-overlay.enum";

 import {
  AutoFillOptions,
@@ -41,6 +44,7 @@ export default class AutofillService implements AutofillServiceInterface {
  constructor(
    private cipherService: CipherService,
    private stateService: BrowserStateService,
+    private autofillSettingsService: AutofillSettingsServiceAbstraction,
    private totpService: TotpService,
    private eventCollectionService: EventCollectionService,
    private logService: LogService,
@@ -93,15 +97,15 @@ export default class AutofillService implements AutofillServiceInterface {
    frameId = 0,
    triggeringOnPageLoad = true,
  ): Promise<void> {
-    const isUsingAutofillOverlay =
-      (await this.settingsService.getAutoFillOverlayVisibility()) !== AutofillOverlayVisibility.Off;
-    const mainAutofillScript = isUsingAutofillOverlay
+    const mainAutofillScript = (await this.getOverlayVisibility())
      ? "bootstrap-autofill-overlay.js"
      : "bootstrap-autofill.js";

    const injectedScripts = [mainAutofillScript];

-    if (triggeringOnPageLoad) {
+    const autoFillOnPageLoadIsEnabled = await this.getAutofillOnPageLoad();
+
+    if (triggeringOnPageLoad && autoFillOnPageLoadIsEnabled) {
      injectedScripts.push("autofiller.js");
    } else {
      await BrowserApi.executeScriptInTab(tab.id, {
@@ -190,6 +194,27 @@ export default class AutofillService implements AutofillServiceInterface {
    return formData;
  }

+  /**
+   * Gets the overlay's visibility setting from the autofill settings service.
+   */
+  async getOverlayVisibility(): Promise<InlineMenuVisibilitySetting> {
+    return await firstValueFrom(this.autofillSettingsService.inlineMenuVisibility$);
+  }
+
+  /**
+   * Gets the setting for automatically copying TOTP upon autofill from the autofill settings service.
+   */
+  async getShouldAutoCopyTotp(): Promise<boolean> {
+    return await firstValueFrom(this.autofillSettingsService.autoCopyTotp$);
+  }
+
+  /**
+   * Gets the autofill on page load setting from the autofill settings service.
+   */
+  async getAutofillOnPageLoad(): Promise<boolean> {
+    return await firstValueFrom(this.autofillSettingsService.autofillOnPageLoad$);
+  }
+
  /**
   * Autofill a given tab with a given login item
   * @param {AutoFillOptions} options Instructions about the autofill operation, including tab and login item
@@ -275,12 +300,11 @@ export default class AutofillService implements AutofillServiceInterface {
          return;
        }

-        totp = await this.stateService.getDisableAutoTotpCopy().then((disabled) => {
-          if (!disabled) {
-            return this.totpService.getCode(options.cipher.login.totp);
-          }
-          return null;
-        });
+        const shouldAutoCopyTotp = await this.getShouldAutoCopyTotp();
+
+        totp = shouldAutoCopyTotp
+          ? await this.totpService.getCode(options.cipher.login.totp)
+          : null;
      }),
    );

--- a/apps/browser/src/autofill/utils/autofill-overlay.enum.ts
+++ b/apps/browser/src/autofill/utils/autofill-overlay.enum.ts
@@ -20,9 +20,13 @@ const AutofillOverlayVisibility = {
  OnFieldFocus: 2,
 } as const;

+type InlineMenuVisibilitySetting =
+  (typeof AutofillOverlayVisibility)[keyof typeof AutofillOverlayVisibility];
+
 export {
  AutofillOverlayElement,
  AutofillOverlayPort,
  RedirectFocusDirection,
  AutofillOverlayVisibility,
+  InlineMenuVisibilitySetting,
 };
--- a/apps/browser/src/autofill/utils/index.ts
+++ b/apps/browser/src/autofill/utils/index.ts
@@ -109,6 +109,7 @@ function setElementStyles(
 * Get data from local storage based on the keys provided.
 *
 * @param keys - String or array of strings of keys to get from local storage
+ * @deprecated Do not call this, use state-relevant services instead
 */
 async function getFromLocalStorage(keys: string | string[]): Promise<Record<string, any>> {
  return new Promise((resolve) => {
--- a/apps/browser/src/background/main.background.ts
+++ b/apps/browser/src/background/main.background.ts
@@ -43,6 +43,10 @@ import { TokenService } from "@bitwarden/common/auth/services/token.service";
 import { TwoFactorService } from "@bitwarden/common/auth/services/two-factor.service";
 import { UserVerificationApiService } from "@bitwarden/common/auth/services/user-verification/user-verification-api.service";
 import { UserVerificationService } from "@bitwarden/common/auth/services/user-verification/user-verification.service";
+import {
+  AutofillSettingsServiceAbstraction,
+  AutofillSettingsService,
+} from "@bitwarden/common/autofill/services/autofill-settings.service";
 import { AppIdService as AppIdServiceAbstraction } from "@bitwarden/common/platform/abstractions/app-id.service";
 import { ConfigApiServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config-api.service.abstraction";
 import { CryptoFunctionService as CryptoFunctionServiceAbstraction } from "@bitwarden/common/platform/abstractions/crypto-function.service";
@@ -228,6 +232,7 @@ export default class MainBackground {
  searchService: SearchServiceAbstraction;
  notificationsService: NotificationsServiceAbstraction;
  stateService: StateServiceAbstraction;
+  autofillSettingsService: AutofillSettingsServiceAbstraction;
  systemService: SystemServiceAbstraction;
  eventCollectionService: EventCollectionServiceAbstraction;
  eventUploadService: EventUploadServiceAbstraction;
@@ -447,6 +452,10 @@ export default class MainBackground {
      this.stateProvider,
    );
    this.policyService = new BrowserPolicyService(this.stateService, this.organizationService);
+    this.autofillSettingsService = new AutofillSettingsService(
+      this.stateProvider,
+      this.policyService,
+    );
    this.policyApiService = new PolicyApiService(
      this.policyService,
      this.apiService,
@@ -548,6 +557,7 @@ export default class MainBackground {
      this.i18nService,
      this.searchService,
      this.stateService,
+      this.autofillSettingsService,
      this.encryptService,
      this.cipherFileUploadService,
      this.configService,
@@ -661,6 +671,7 @@ export default class MainBackground {
    this.autofillService = new AutofillService(
      this.cipherService,
      this.stateService,
+      this.autofillSettingsService,
      this.totpService,
      this.eventCollectionService,
      this.logService,
@@ -759,13 +770,13 @@ export default class MainBackground {
      this.i18nService,
      this.notificationsService,
      this.stateService,
+      this.autofillSettingsService,
      this.systemService,
      this.environmentService,
      this.messagingService,
      this.logService,
      this.configService,
      this.fido2Service,
-      this.settingsService,
    );
    this.nativeMessagingBackground = new NativeMessagingBackground(
      this.cryptoService,
@@ -802,6 +813,7 @@ export default class MainBackground {
      this.environmentService,
      this.settingsService,
      this.stateService,
+      this.autofillSettingsService,
      this.i18nService,
      this.platformUtilsService,
    );
@@ -1030,6 +1042,7 @@ export default class MainBackground {
      this.vaultTimeoutSettingsService.clear(userId),
      this.keyConnectorService.clear(),
      this.vaultFilterService.clear(),
+      // We intentionally do not clear the autofillSettingsService
    ]);

    //Needs to be checked before state is cleaned
--- a/apps/browser/src/background/runtime.background.ts
+++ b/apps/browser/src/background/runtime.background.ts
@@ -1,5 +1,5 @@
 import { NotificationsService } from "@bitwarden/common/abstractions/notifications.service";
-import { SettingsService } from "@bitwarden/common/abstractions/settings.service";
+import { AutofillSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/autofill-settings.service";
 import { ConfigServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
@@ -39,13 +39,13 @@ export default class RuntimeBackground {
    private i18nService: I18nService,
    private notificationsService: NotificationsService,
    private stateService: BrowserStateService,
+    private autofillSettingsService: AutofillSettingsServiceAbstraction,
    private systemService: SystemService,
    private environmentService: BrowserEnvironmentService,
    private messagingService: MessagingService,
    private logService: LogService,
    private configService: ConfigServiceAbstraction,
    private fido2Service: Fido2Service,
-    private settingsService: SettingsService,
  ) {
    // onInstalled listener must be wired up before anything else, so we do it in the ctor
    chrome.runtime.onInstalled.addListener((details: any) => {
@@ -338,7 +338,7 @@ export default class RuntimeBackground {
          // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
          // eslint-disable-next-line @typescript-eslint/no-floating-promises
          BrowserApi.createNewTab("https://bitwarden.com/browser-start/");
-          await this.settingsService.setAutoFillOverlayVisibility(
+          await this.autofillSettingsService.setInlineMenuVisibility(
            AutofillOverlayVisibility.OnFieldFocus,
          );

--- a/apps/browser/src/popup/services/services.module.ts
+++ b/apps/browser/src/popup/services/services.module.ts
@@ -40,6 +40,10 @@ import { TwoFactorService } from "@bitwarden/common/auth/abstractions/two-factor
 import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
 import { AuthService } from "@bitwarden/common/auth/services/auth.service";
 import { LoginService } from "@bitwarden/common/auth/services/login.service";
+import {
+  AutofillSettingsService,
+  AutofillSettingsServiceAbstraction,
+} from "@bitwarden/common/autofill/services/autofill-settings.service";
 import { AppIdService } from "@bitwarden/common/platform/abstractions/app-id.service";
 import { ConfigApiServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config-api.service.abstraction";
 import { CryptoFunctionService } from "@bitwarden/common/platform/abstractions/crypto-function.service";
@@ -556,6 +560,11 @@ function getBgService<T>(service: keyof MainBackground) {
      useClass: ForegroundDerivedStateProvider,
      deps: [OBSERVABLE_MEMORY_STORAGE, NgZone],
    },
+    {
+      provide: AutofillSettingsServiceAbstraction,
+      useClass: AutofillSettingsService,
+      deps: [StateProvider, PolicyService],
+    },
  ],
 })
 export class ServicesModule {}
--- a/apps/browser/src/popup/settings/options.component.ts
+++ b/apps/browser/src/popup/settings/options.component.ts
@@ -3,11 +3,11 @@ import { firstValueFrom } from "rxjs";

 import { AbstractThemingService } from "@bitwarden/angular/platform/services/theming/theming.service.abstraction";
 import { SettingsService } from "@bitwarden/common/abstractions/settings.service";
+import { AutofillSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/autofill-settings.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { ThemeType } from "@bitwarden/common/platform/enums";
-import { TotpService } from "@bitwarden/common/vault/abstractions/totp.service";
 import { VaultSettingsService } from "@bitwarden/common/vault/abstractions/vault-settings/vault-settings.service";
 import { UriMatchType } from "@bitwarden/common/vault/enums";

@@ -45,7 +45,7 @@ export class OptionsComponent implements OnInit {
  constructor(
    private messagingService: MessagingService,
    private stateService: StateService,
-    private totpService: TotpService,
+    private autofillSettingsService: AutofillSettingsServiceAbstraction,
    i18nService: I18nService,
    private themingService: AbstractThemingService,
    private settingsService: SettingsService,
@@ -84,10 +84,13 @@ export class OptionsComponent implements OnInit {
  }

  async ngOnInit() {
-    this.enableAutoFillOnPageLoad = await this.stateService.getEnableAutoFillOnPageLoad();
+    this.enableAutoFillOnPageLoad = await firstValueFrom(
+      this.autofillSettingsService.autofillOnPageLoad$,
+    );

-    this.autoFillOnPageLoadDefault =
-      (await this.stateService.getAutoFillOnPageLoadDefault()) ?? true;
+    this.autoFillOnPageLoadDefault = await firstValueFrom(
+      this.autofillSettingsService.autofillOnPageLoadDefault$,
+    );

    this.enableAddLoginNotification = !(await this.stateService.getDisableAddLoginNotification());

@@ -99,7 +102,7 @@ export class OptionsComponent implements OnInit {
    this.showCardsCurrentTab = !(await this.stateService.getDontShowCardsCurrentTab());
    this.showIdentitiesCurrentTab = !(await this.stateService.getDontShowIdentitiesCurrentTab());

-    this.enableAutoTotpCopy = !(await this.stateService.getDisableAutoTotpCopy());
+    this.enableAutoTotpCopy = await firstValueFrom(this.autofillSettingsService.autoCopyTotp$);

    this.enableFavicon = !this.settingsService.getDisableFavicon();

@@ -135,15 +138,15 @@ export class OptionsComponent implements OnInit {
  }

  async updateAutoTotpCopy() {
-    await this.stateService.setDisableAutoTotpCopy(!this.enableAutoTotpCopy);
+    await this.autofillSettingsService.setAutoCopyTotp(this.enableAutoTotpCopy);
  }

  async updateAutoFillOnPageLoad() {
-    await this.stateService.setEnableAutoFillOnPageLoad(this.enableAutoFillOnPageLoad);
+    await this.autofillSettingsService.setAutofillOnPageLoad(this.enableAutoFillOnPageLoad);
  }

  async updateAutoFillOnPageLoadDefault() {
-    await this.stateService.setAutoFillOnPageLoadDefault(this.autoFillOnPageLoadDefault);
+    await this.autofillSettingsService.setAutofillOnPageLoadDefault(this.autoFillOnPageLoadDefault);
  }

  async updateFavicon() {
--- a/apps/browser/src/vault/background/service_factories/cipher-service.factory.ts
+++ b/apps/browser/src/vault/background/service_factories/cipher-service.factory.ts
@@ -1,6 +1,10 @@
 import { CipherService as AbstractCipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherService } from "@bitwarden/common/vault/services/cipher.service";

+import {
+  AutofillSettingsServiceInitOptions,
+  autofillSettingsServiceFactory,
+} from "../../../autofill/background/service_factories/autofill-settings-service.factory";
 import {
  CipherFileUploadServiceInitOptions,
  cipherFileUploadServiceFactory,
@@ -53,6 +57,7 @@ export type CipherServiceInitOptions = CipherServiceFactoryOptions &
  I18nServiceInitOptions &
  SearchServiceInitOptions &
  StateServiceInitOptions &
+  AutofillSettingsServiceInitOptions &
  EncryptServiceInitOptions &
  ConfigServiceInitOptions;

@@ -72,6 +77,7 @@ export function cipherServiceFactory(
        await i18nServiceFactory(cache, opts),
        await searchServiceFactory(cache, opts),
        await stateServiceFactory(cache, opts),
+        await autofillSettingsServiceFactory(cache, opts),
        await encryptServiceFactory(cache, opts),
        await cipherFileUploadServiceFactory(cache, opts),
        await configServiceFactory(cache, opts),
--- a/apps/browser/src/vault/popup/components/vault/add-edit.component.ts
+++ b/apps/browser/src/vault/popup/components/vault/add-edit.component.ts
@@ -10,6 +10,7 @@ import { AuditService } from "@bitwarden/common/abstractions/audit.service";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
+import { AutofillSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/autofill-settings.service";
 import { ConfigServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
@@ -53,6 +54,7 @@ export class AddEditComponent extends BaseAddEditComponent {
    platformUtilsService: PlatformUtilsService,
    auditService: AuditService,
    stateService: StateService,
+    private autofillSettingsService: AutofillSettingsServiceAbstraction,
    collectionService: CollectionService,
    messagingService: MessagingService,
    private route: ActivatedRoute,
@@ -160,7 +162,7 @@ export class AddEditComponent extends BaseAddEditComponent {
    await super.load();
    this.showAutoFillOnPageLoadOptions =
      this.cipher.type === CipherType.Login &&
-      (await this.stateService.getEnableAutoFillOnPageLoad());
+      (await firstValueFrom(this.autofillSettingsService.autofillOnPageLoad$));
  }

  async submit(): Promise<boolean> {
--- a/apps/browser/src/vault/popup/components/vault/current-tab.component.ts
+++ b/apps/browser/src/vault/popup/components/vault/current-tab.component.ts
@@ -1,10 +1,11 @@
 import { ChangeDetectorRef, Component, NgZone, OnDestroy, OnInit } from "@angular/core";
 import { Router } from "@angular/router";
-import { Subject } from "rxjs";
+import { Subject, firstValueFrom } from "rxjs";
 import { debounceTime, takeUntil } from "rxjs/operators";

 import { SearchService } from "@bitwarden/common/abstractions/search.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+import { AutofillSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/autofill-settings.service";
 import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
@@ -65,6 +66,7 @@ export class CurrentTabComponent implements OnInit, OnDestroy {
    private syncService: SyncService,
    private searchService: SearchService,
    private stateService: StateService,
+    private autofillSettingsService: AutofillSettingsServiceAbstraction,
    private passwordRepromptService: PasswordRepromptService,
    private organizationService: OrganizationService,
    private vaultFilterService: VaultFilterService,
@@ -122,9 +124,9 @@ export class CurrentTabComponent implements OnInit, OnDestroy {
      .subscribe(() => this.searchVault());

    // activate autofill on page load if policy is set
-    if (await this.stateService.getActivateAutoFillOnPageLoadFromPolicy()) {
-      await this.stateService.setEnableAutoFillOnPageLoad(true);
-      await this.stateService.setActivateAutoFillOnPageLoadFromPolicy(false);
+    if (await this.getActivateAutofillOnPageLoadFromPolicy()) {
+      await this.autofillSettingsService.setAutofillOnPageLoad(true);
+      await this.autofillSettingsService.setActivateAutofillOnPageLoadFromPolicy(false);
      this.platformUtilsService.showToast(
        "info",
        null,
@@ -301,17 +303,25 @@ export class CurrentTabComponent implements OnInit, OnDestroy {
    this.router.navigate(["autofill"]);
  }

+  private async getActivateAutofillOnPageLoadFromPolicy(): Promise<boolean> {
+    return await firstValueFrom(this.autofillSettingsService.activateAutofillOnPageLoadFromPolicy$);
+  }
+
  async dismissCallout() {
-    await this.stateService.setDismissedAutofillCallout(true);
+    await this.autofillSettingsService.setAutofillOnPageLoadCalloutIsDismissed(true);
    this.showHowToAutofill = false;
  }

  private async setCallout() {
+    const inlineMenuVisibilityIsOff =
+      (await firstValueFrom(this.autofillSettingsService.inlineMenuVisibility$)) ===
+      AutofillOverlayVisibility.Off;
+
    this.showHowToAutofill =
      this.loginCiphers.length > 0 &&
-      (await this.stateService.getAutoFillOverlayVisibility()) === AutofillOverlayVisibility.Off &&
-      !(await this.stateService.getEnableAutoFillOnPageLoad()) &&
-      !(await this.stateService.getDismissedAutofillCallout());
+      inlineMenuVisibilityIsOff &&
+      !(await firstValueFrom(this.autofillSettingsService.autofillOnPageLoad$)) &&
+      !(await firstValueFrom(this.autofillSettingsService.autofillOnPageLoadCalloutIsDismissed$));

    if (this.showHowToAutofill) {
      const autofillCommand = await this.platformUtilsService.getAutofillKeyboardShortcut();
--- a/apps/cli/src/bw.ts
+++ b/apps/cli/src/bw.ts
@@ -35,6 +35,7 @@ import { TokenService } from "@bitwarden/common/auth/services/token.service";
 import { TwoFactorService } from "@bitwarden/common/auth/services/two-factor.service";
 import { UserVerificationApiService } from "@bitwarden/common/auth/services/user-verification/user-verification-api.service";
 import { UserVerificationService } from "@bitwarden/common/auth/services/user-verification/user-verification.service";
+import { AutofillSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/autofill-settings.service";
 import { ClientType } from "@bitwarden/common/enums";
 import { ConfigApiServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config-api.service.abstraction";
 import { KeySuffixOptions, LogLevelType } from "@bitwarden/common/platform/enums";
@@ -176,6 +177,7 @@ export class Main {
  userVerificationService: UserVerificationService;
  pinCryptoService: PinCryptoServiceAbstraction;
  stateService: StateService;
+  autofillSettingsService: AutofillSettingsServiceAbstraction;
  organizationService: OrganizationService;
  providerService: ProviderService;
  twoFactorService: TwoFactorService;
@@ -444,6 +446,7 @@ export class Main {
      this.i18nService,
      this.searchService,
      this.stateService,
+      this.autofillSettingsService,
      this.encryptService,
      this.cipherFileUploadService,
      this.configService,