アイコンクリックでスクリーンショット撮影【自作chome拡張機能】

アイコンクリックでスクリーンショット撮影　【自作chome拡張機能】

ChromeAddon

2023.07.222023.07.23

概要
コード
1. manifest.json
2. background.js
基本の使い方
参考

概要

自作chrome拡張機能を使えば、簡単に表示しているサイトのスクリーンショットを撮影することが可能です。

撮影のみであれば数行のコードで実装できますので試してみましょう。

コード

manifest.json

{
  "name": "スクショ",
  "version": "1.0",
  "description": "スクショを撮影します",
  "manifest_version": 3,
  "permissions": [
    "activeTab"
  ],
  "action": {},
  "background": {
    "service_worker": "background.js"
  }
}

background.js

//アイコンクリックで実行
chrome.action.onClicked.addListener(function (tab) {
  //ブラウザのアクティブなタブに表示している画面をスクショに撮る。　
  chrome.tabs.captureVisibleTab(null, { format: 'png' }, function (imageData) {
    //データ表示（バイナリ形式）
    console.log(imageData);
  });
});