Chrome拡張でスクショツールを作ってみる

開発経緯

Chromeでスクショ取るのに毎度devtoolsからコマンド打つのが億劫に感じたので、今回はワンクリックでスクリーンショットを取る拡張機能を作ってみました。

リポジトリ

コード

manifest.jsonに名前や権限、iconの配置場所を書いておきます。

manifest.json

{
	"manifest_version": 3,
	"name": "Simple-screenshot",
	"version": "1.0",
	"permissions": [
		"activeTab",
		"tabs",	
		"downloads"
	],
	"background": {
	  "service_worker": "background.js"
	},
	"action": {
	},
	"icons": {
		"16": "icons/icon16.png",
		"48": "icons/icon48.png",
		"128": "icons/icon128.png"
	}
}

アクションボタン(ツールバーに固定した拡張機能のアイコン)をクリックしたら現在のタブのキャプチャのURLを取得し、それをダウンロードしています。

background.js

// 拡張機能のアクションボタンがクリックされたとき
chrome.action.onClicked.addListener((tab) => {
	// 現在のタブのスクリーンショットを取得
	chrome.tabs.captureVisibleTab(tab.windowId, { format: 'png' }, (dataUrl) => {
		// エラーチェック
		if (chrome.runtime.lastError) {
		  console.error(chrome.runtime.lastError.message);
		} else {
			// 現在の日付と時刻を取得
			var now = new Date();
			var formattedDate = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate() + "-" + now.getHours() + now.getMinutes() + now.getSeconds();
			var filename = "Capture-" + formattedDate + ".png";

			// ダウンロード処理
			chrome.downloads.download({
				url: dataUrl,
				filename: filename,
				saveAs: false
			});
		}
	});
});

ハマったこと

当初はアクションボタンを押すとポップアップが出て、そこのボタンを押してダウンロードを始まるようにしていたため、createElementで作って.Click()でURLを踏むという手法を取っていたが、htmlを経由しない場合はcreateElementが使えず、右往左往した。
いろいろ調べた結果、downloads APIのdownload()を使うとダウンロードできた。

おわり

QoLが少し上がって、javascriptと少し仲良くなれた気がした。機会があれば、選択範囲のスクショもチャレンジしてみたい。

余談

以前から憧れがあったので、READMEとLICENSEを書いてみました。LICENSEがGithub上からポチポチするだけで作成できてびっくりしました。

README.md

# Simple-screenshot
Simple-screenshot is a simple chrome extension for taking screenshots.

## Installation
1. Clone this repository.
2. Go to [chrome://extensions/](chrome://extensions/) and turn on developer mode.
3. Select the cloned repository and package the extension.
4. Drag and drop the created .crx file into chrome://extensions/ and install it.
5. (Optional) Pin the extension to the toolbar.

## Usage

1. Open the web page you want to capture.
2. Click the icon on the toolbar.
3. The download will begin.

## License

MIT License

Copyright (c) 2024 syamasaw

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

参考文献