7 files changed, 61 insertions, 22 deletions
diff --git a/src/content/index.ts b/src/content/index.ts
index 5252338..20dbbcc 100644
--- a/src/content/index.ts
+++ b/src/content/index.ts
@@ -3,15 +3,10 @@ import "reflect-metadata";
 import Application from "./Application";
 import Bootstrap from "./Bootstrap";
 import consoleFrameStyle from "./site-style";
-import { ConsoleFramePresenterImpl } from "./presenters/ConsoleFramePresenter";
 import { container } from "tsyringe";
 import "./di";
 
 const initDom = () => {
-  if (window.self === window.top) {
-    new ConsoleFramePresenterImpl().initialize();
-  }
-
   try {
     const app = container.resolve(Application);
     app.run();
diff --git a/src/content/operators/impls/AddonOperatorFactoryChain.ts b/src/content/operators/impls/AddonOperatorFactoryChain.ts
index 54880c4..5e464e8 100644
--- a/src/content/operators/impls/AddonOperatorFactoryChain.ts
+++ b/src/content/operators/impls/AddonOperatorFactoryChain.ts
@@ -7,6 +7,7 @@ import Operator from "../Operator";
 import EnableAddonOperator from "./EnableAddonOperator";
 import DisableAddonOperator from "./DisableAddonOperator";
 import ToggleAddonOperator from "./ToggleAddonOperator";
+import ConsoleFramePresenter from "../../presenters/ConsoleFramePresenter";
 
 @injectable()
 export default class AddonOperatorFactoryChain implements OperatorFactoryChain {
@@ -14,7 +15,9 @@ export default class AddonOperatorFactoryChain implements OperatorFactoryChain {
     @inject("AddonIndicatorClient")
     private readonly addonIndicatorClient: AddonIndicatorClient,
     @inject("AddonEnabledRepository")
-    private readonly addonEnabledRepository: AddonEnabledRepository
+    private readonly addonEnabledRepository: AddonEnabledRepository,
+    @inject("ConsoleFramePresenter")
+    private readonly consoleFramePresenter: ConsoleFramePresenter
   ) {}
 
   create(op: operations.Operation, _repeat: number): Operator | null {
@@ -22,17 +25,20 @@ export default class AddonOperatorFactoryChain implements OperatorFactoryChain {
       case operations.ADDON_ENABLE:
         return new EnableAddonOperator(
           this.addonIndicatorClient,
-          this.addonEnabledRepository
+          this.addonEnabledRepository,
+          this.consoleFramePresenter
         );
       case operations.ADDON_DISABLE:
         return new DisableAddonOperator(
           this.addonIndicatorClient,
-          this.addonEnabledRepository
+          this.addonEnabledRepository,
+          this.consoleFramePresenter
         );
       case operations.ADDON_TOGGLE_ENABLED:
         return new ToggleAddonOperator(
           this.addonIndicatorClient,
-          this.addonEnabledRepository
+          this.addonEnabledRepository,
+          this.consoleFramePresenter
         );
     }
     return null;
diff --git a/src/content/operators/impls/DisableAddonOperator.ts b/src/content/operators/impls/DisableAddonOperator.ts
index 28811fe..a92e04b 100644
--- a/src/content/operators/impls/DisableAddonOperator.ts
+++ b/src/content/operators/impls/DisableAddonOperator.ts
@@ -1,15 +1,18 @@
 import Operator from "../Operator";
 import AddonIndicatorClient from "../../client/AddonIndicatorClient";
 import AddonEnabledRepository from "../../repositories/AddonEnabledRepository";
+import ConsoleFramePresenter from "../../presenters/ConsoleFramePresenter";
 
 export default class DisableAddonOperator implements Operator {
   constructor(
     private readonly indicator: AddonIndicatorClient,
-    private readonly repository: AddonEnabledRepository
+    private readonly repository: AddonEnabledRepository,
+    private readonly consoleFramePresenter: ConsoleFramePresenter
   ) {}
 
   async run(): Promise<void> {
     this.repository.set(false);
+    this.consoleFramePresenter.detach();
     await this.indicator.setEnabled(false);
   }
 }
diff --git a/src/content/operators/impls/EnableAddonOperator.ts b/src/content/operators/impls/EnableAddonOperator.ts
index b5b1d79..fe2b771 100644
--- a/src/content/operators/impls/EnableAddonOperator.ts
+++ b/src/content/operators/impls/EnableAddonOperator.ts
@@ -1,15 +1,18 @@
 import Operator from "../Operator";
 import AddonIndicatorClient from "../../client/AddonIndicatorClient";
 import AddonEnabledRepository from "../../repositories/AddonEnabledRepository";
+import ConsoleFramePresenter from "../../presenters/ConsoleFramePresenter";
 
 export default class EnableAddonOperator implements Operator {
   constructor(
     private readonly indicator: AddonIndicatorClient,
-    private readonly repository: AddonEnabledRepository
+    private readonly repository: AddonEnabledRepository,
+    private readonly consoleFramePresenter: ConsoleFramePresenter
   ) {}
 
   async run(): Promise<void> {
     this.repository.set(true);
+    this.consoleFramePresenter.attach();
     await this.indicator.setEnabled(true);
   }
 }
diff --git a/src/content/operators/impls/ToggleAddonOperator.ts b/src/content/operators/impls/ToggleAddonOperator.ts
index 2a249d6..1019b8b 100644
--- a/src/content/operators/impls/ToggleAddonOperator.ts
+++ b/src/content/operators/impls/ToggleAddonOperator.ts
@@ -1,16 +1,23 @@
 import Operator from "../Operator";
 import AddonIndicatorClient from "../../client/AddonIndicatorClient";
 import AddonEnabledRepository from "../../repositories/AddonEnabledRepository";
+import ConsoleFramePresenter from "../../presenters/ConsoleFramePresenter";
 
 export default class ToggleAddonOperator implements Operator {
   constructor(
     private readonly indicator: AddonIndicatorClient,
-    private readonly repository: AddonEnabledRepository
+    private readonly repository: AddonEnabledRepository,
+    private readonly consoleFramePresenter: ConsoleFramePresenter
   ) {}
 
   async run(): Promise<void> {
-    const current = this.repository.get();
-    this.repository.set(!current);
-    await this.indicator.setEnabled(!current);
+    const enabled = !this.repository.get();
+    this.repository.set(enabled);
+    if (enabled) {
+      this.consoleFramePresenter.attach();
+    } else {
+      this.consoleFramePresenter.detach();
+    }
+    await this.indicator.setEnabled(enabled);
   }
 }
diff --git a/src/content/presenters/ConsoleFramePresenter.ts b/src/content/presenters/ConsoleFramePresenter.ts
index ccc196b..9c4b3f1 100644
--- a/src/content/presenters/ConsoleFramePresenter.ts
+++ b/src/content/presenters/ConsoleFramePresenter.ts
@@ -1,5 +1,7 @@
 export default interface ConsoleFramePresenter {
-  initialize(): void;
+  attach(): void;
+
+  detach(): void;
 
   blur(): void;
 
@@ -7,18 +9,33 @@ export default interface ConsoleFramePresenter {
 }
 
 export class ConsoleFramePresenterImpl implements ConsoleFramePresenter {
-  initialize(): void {
+  private static readonly IframeId = "vimvixen-console-frame" as const;
+
+  attach(): void {
+    const ele = document.getElementById("vimvixen-console-frame");
+    if (ele) {
+      return;
+    }
+
     const iframe = document.createElement("iframe");
     iframe.src = browser.runtime.getURL("build/console.html");
-    iframe.id = "vimvixen-console-frame";
+    iframe.id = ConsoleFramePresenterImpl.IframeId;
     iframe.className = "vimvixen-console-frame";
     document.body.append(iframe);
   }
 
+  detach(): void {
+    const ele = document.getElementById(ConsoleFramePresenterImpl.IframeId);
+    if (!ele) {
+      return;
+    }
+    ele.remove();
+  }
+
   blur(): void {
     const ele = document.getElementById("vimvixen-console-frame");
     if (!ele) {
-      throw new Error("console frame not created");
+      return;
     }
     ele.blur();
   }
diff --git a/src/content/usecases/AddonEnabledUseCase.ts b/src/content/usecases/AddonEnabledUseCase.ts
index f7e78c5..b45c47f 100644
--- a/src/content/usecases/AddonEnabledUseCase.ts
+++ b/src/content/usecases/AddonEnabledUseCase.ts
@@ -1,15 +1,17 @@
 import { injectable, inject } from "tsyringe";
 import AddonIndicatorClient from "../client/AddonIndicatorClient";
 import AddonEnabledRepository from "../repositories/AddonEnabledRepository";
+import ConsoleFramePresenter from "../presenters/ConsoleFramePresenter";
 
 @injectable()
 export default class AddonEnabledUseCase {
   constructor(
     @inject("AddonIndicatorClient")
-    private indicator: AddonIndicatorClient,
-
+    private readonly indicator: AddonIndicatorClient,
     @inject("AddonEnabledRepository")
-    private repository: AddonEnabledRepository
+    private readonly repository: AddonEnabledRepository,
+    @inject("ConsoleFramePresenter")
+    private readonly consoleFramePresenter: ConsoleFramePresenter
   ) {}
 
   async enable(): Promise<void> {
@@ -31,6 +33,12 @@ export default class AddonEnabledUseCase {
 
   private async setEnabled(on: boolean): Promise<void> {
     this.repository.set(on);
+
+    if (on) {
+      this.consoleFramePresenter.attach();
+    } else {
+      this.consoleFramePresenter.detach();
+    }
     await this.indicator.setEnabled(on);
   }
 }