koryovip · February 23, 2024 05:41
diff --git a/manifest.json b/manifest.json
 {
  "manifest_version": 3,
  "name": "ScreenCapture Test",
  "version": "1.0",
  "description": "ScreenCapture Test",
  "permissions": ["activeTab", "debugger"],
  "action": {
    "default_popup": "popup.html"
  }
 }
diff --git a/popup.html b/popup.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="UTF-8">
 </head>
 <body style="margin: 0px; width: 100px;">
  <div style="padding: 10px; background: lemonchiffon;">
    <div>
      <button id="btn">画像保存</button>
    </div>
  </div>
  <script src="/popup.js"></script>
 </html>
diff --git a/popup.js b/popup.js
 document.getElementById('btn').addEventListener('click', async () => {
  // タブ情報取得
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

  // デバッガアタッチ
  chrome.debugger.attach({ tabId: tab.id }, '1.3', async () => {
    console.log('attach - ok');

    // デバッガ起動待機
    await new Promise((resolve) => setTimeout(resolve, 500));

    // レイアウト情報取得
    chrome.debugger.sendCommand({ tabId: tab.id }, 'Page.getLayoutMetrics', {}, (metrics) => {
      // スクリーンショットパラメータ作成
      const params = {
        format: 'png',
        quality: 50,
        clip: {
          x: 0,
          y: 0,
          width:  metrics.cssContentSize.width,
          height: metrics.cssContentSize.height,
          scale: 1
        },
        captureBeyondViewport: true
      }

      // スクリーンショット撮影
      chrome.debugger.sendCommand({ tabId: tab.id }, 'Page.captureScreenshot', params, (result) => {
        // 画像保存
        const downloadEle = document.createElement('a');
        downloadEle.href = 'data:image/png;base64,' + result.data;
        downloadEle.download = 'screenshot.png';
        downloadEle.click()

        // デバッガでタッチ
        chrome.debugger.detach({ tabId: tab.id }, () => {
          console.log('detach ok')
        });
      });
    });
  });
 });
	{
	"manifest_version": 3,
	"name": "ScreenCapture Test",
	"version": "1.0",
	"description": "ScreenCapture Test",
	"permissions": ["activeTab", "debugger"],
	"action": {
	"default_popup": "popup.html"
	}
	}