ダッシュボードでスクショボタンを設置

Fix #1743

src/page/components/dashboard/ActionsView.tsx

@@ -2,6 +2,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useMemo } from "react";
 import { Launcher } from "../../../services/Launcher";
 import { useRevalidator } from "react-router-dom";
+import { DownloadService } from "../../../services/DownloadService";
 
 function MuteControlButton({ tab, launcher, refresh }: { tab?: chrome.tabs.Tab, launcher: Launcher, refresh: () => void }) {
   if (!tab) return null;
@@ -14,11 +15,16 @@ function MuteControlButton({ tab, launcher, refresh }: { tab?: chrome.tabs.Tab,
   )
 }
 
-function CaptureControlButton({tab}: { tab?: chrome.tabs.Tab }) {
+function CaptureControlButton({ tab, launcher }: { tab?: chrome.tabs.Tab, launcher: Launcher }) {
   if (!tab) return null;
   return (
-    <div onClick={() => {
-      window.alert("capture!");
+    <div onClick={async () => {
+      const s = new DownloadService();
+      const format = "jpeg";
+      const uri = await launcher.capture(tab.windowId, { format });
+      const dir = "艦これ";
+      /* const downloadId = */ await s.download(uri, DownloadService.filename.screenshot({ dir, format }));
+      // await s.show(downloadId);
     }} className="cursor-pointer text-slate-400 hover:text-slate-600">
       <FontAwesomeIcon icon="camera" className="w-8 h-8"/>
     </div>
@@ -40,7 +46,7 @@ export function ActionsView({tab}: { tab?: chrome.tabs.Tab }) {
   return (
     <div className="flex-1 flex items-center justify-end space-x-4">
       <LaunchControlButton />
-      <CaptureControlButton tab={tab} />
+      <CaptureControlButton tab={tab} launcher={launcher} />
       <MuteControlButton tab={tab} launcher={launcher} refresh={refresh} />
     </div>
   )

src/public/manifest.json

@@ -6,6 +6,7 @@
   "permissions": [
     "activeTab",
     "alarms",
+    "downloads",
     "notifications",
     "scripting",
     "storage",

src/services/DownloadService.ts

@@ -0,0 +1,24 @@
+
+export class DownloadService {
+  constructor(
+    private readonly mod = chrome.downloads,
+  ) { }
+
+  public static filename = {
+    screenshot: (opt: { dir?: string, format: "jpeg" | "png" }) => {
+      const datetime =  new Date().toISOString().replace(/[-:]/g, "").replace("T", "_").replace("Z", "").replace(/\..+/, "");
+      return opt.dir ? `${opt.dir}/${datetime}.${opt.format}` : `艦これ_${datetime}.${opt.format}`;
+    },
+  }
+  public async download(url: string, filename: string): Promise<number> {
+    return new Promise((resolve, reject) => {
+      this.mod.download({ url, filename }, (id) => {
+        if (chrome.runtime.lastError) return reject(chrome.runtime.lastError);
+        resolve(id);
+      });
+    });
+  }
+  public async show(downloadId: number) {
+    return this.mod.show(downloadId);
+  }
+}

src/services/Launcher.ts

@@ -71,4 +71,11 @@ export class Launcher {
   public async mute(tabId: number, muted: boolean = true) {
     return this.tabs.update(tabId, { muted });
   }
+
+  public async capture(tabId: number, options: chrome.tabs.CaptureVisibleTabOptions = {
+    format: "jpeg",
+    quality: 100,
+  }): Promise<string> {
+    return this.tabs.capture(tabId, options);
+  }
 }

src/services/TabService.ts

@@ -23,4 +23,13 @@ export class TabService {
   public async update(tabId: number, props: chrome.tabs.UpdateProperties) {
     return await this.mod.update(tabId, props);
   }
+
+  // TODO: 各所で chrome.tabs.captureVisibleTab を使っているので、ここに集約させたい
+  public async capture(windowId: number, options: chrome.tabs.CaptureVisibleTabOptions) {
+    return await new Promise<string>((resolve) => {
+      this.mod.captureVisibleTab(windowId, options, (dataUrl) => {
+        resolve(dataUrl);
+      });
+    });
+  }
 }