<img src="https://storage.googleapis.com/zenn-user-upload/1e8d083c014c-20231107.png" width="300" loading="lazy" class="md-img">
<img src="https://storage.googleapis.com/zenn-user-upload/045e7221e8b0-20231107.png" width="500" loading="lazy" class="md-img">
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">.
├── background.js
├── manifest.json
└── popup
 ├── popup.html
 └── popup.js
</code></pre></div><div class="code-block-container">
<div class="code-block-filename-container">manifest.json</div>
<pre class="language-json"><code class="language-json">{
 "manifest_version": 3,
 "name": "ScreenShot Tab",
 "description": "現在のタブを撮影",
 "version": "1.0.0",
 "permissions": ["tabs", "activeTab"],
 "action": { "default_popup": "popup/popup.html" },
 "background": { "service_worker": "background.js" }
}
</code></pre>
</div><div class="code-block-container">
<div class="code-block-filename-container">popup/popup.html</div>
<pre class="language-html"><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;title&gt;Take Screenshot&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;button id="screenshotButton"&gt;Take Screenshot&lt;/button&gt;
 &lt;script src="popup.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div><div class="code-block-container">
<div class="code-block-filename-container">popup/popup.js</div>
<pre class="language-js"><code class="language-js">document.getElementById("screenshotButton").addEventListener("click", async () =&gt; {
 try {
 const response = await chrome.runtime.sendMessage({ type: "takeScreenshot" });
 if (response.dataUrl) {
 const img = document.createElement("img");
 img.src = response.dataUrl;
 document.body.appendChild(img);
 }
 } catch (error) {
 console.error("Error sending message:", error);
 }
});
</code></pre>
</div><div class="code-block-container">
<div class="code-block-filename-container">background.js</div>
<pre class="language-js"><code class="language-js">chrome.runtime.onMessage.addListener((message, sender, sendResponse) =&gt; {
 if (message.type === "takeScreenshot") {
 const option = { active: true, currentWindow: true } // 現在閲覧しているタブ
 chrome.tabs.query(option, (tabs) =&gt; {
 const activeTab = tabs[0];
 if (!activeTab) {
 sendResponse({ error: "No active tab." });
 return;
 }
 chrome.tabs.captureVisibleTab(activeTab.windowId, { format: "png" }, (dataUrl) =&gt; {
 if (chrome.runtime.lastError) {
 sendResponse({ error: chrome.runtime.lastError.message });
 return;
 }
 sendResponse({ dataUrl: dataUrl }); // スクリーンショットのデータURLを返す
 });
 });
 return true;
 }
});
</code></pre>
</div><ul>
<li>
スクリーンショットは現在アクティブなタブでしか取得できない
</li>
<li>
生成される文字列が、画像ファイルのバイナリデータをBase64でエンコードしたもの。画像データはローカルのどこにも保存おらず、文字列そのものが画像データ。なので保存するときは<code>chrome.storage.*</code>で保存しておく。
</li>
<li>
1秒間にキャプチャできる回数は決まっている。あまりに連続で撮影を続けると<code>Unchecked runtime.lastError: This request exceeds the MAX_CAPTURE_VISIBLE_TAB_CALLS_PER_SECOND quota.</code>というエラーが出る。定期的な撮影をしてる拡張機能では400msにするとエラーが出なくなる<a href="https://twitter.com/takumi091111/status/1437742832089894912" target="_blank" rel="nofollow noopener noreferrer">報告</a>がある。一方、このサンプルアプリはユーザーによるので取りこぼしが発生する可能性もある。そこは仕方がない。
</li>
<li>
新規タブを開いたときに次のようなエラーが出る。特殊なページを開いたときはおそらく撮影できないのでそれのエラーだろう。通常使うように検索したりクリックする状況ではこのエラーは出ないので放置してる。
</li>
</ul>
<div class="code-block-container"><pre><code>Unchecked runtime.lastError: The 'activeTab' permission is not in effect because this extension has not been in invoked.
</code></pre></div>

[tabs.captureVisibleTab] 現在開いてるページのスクリーンショットを撮る

Discussion