Googleカレンダーの予定名を隠した状態のスクリーンショットを撮影してダウンロードするブックマークレットをGoogle Chromeの拡張機能に移植する 📅

追記

公開しました！

chrome.google.com

📅 📅 📅

以前作成した、こちらのブックマークレット。

blog.kimizuka.org

いまでも愛用しています。
先日、Goolge Chromeの拡張機能の作り方を調べたところ、非常に簡単だったので移植してみることにしました。さらには勉強のために公開までやり切ってみようと思います。

blog.kimizuka.org

リポジトリ

github.com

ソースコードはこちらにまるまるアップしています。

ソースコード

manifest.json

{
  "name": "google-calendar-screenshot",
  "version": "1.0",
  "manifest_version": 3,
  "description": "Googleカレンダーの予定名を隠してからスクリーンショットを撮影します",
  "icons": {
    "16": "icon/16.png",
    "48": "icon/48.png",
    "128": "icon/128.png"
  },
  "permissions": ["activeTab", "scripting"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_title": "google-calendar-screenshot",
    "default_icon": "icon/16.png"
  }
}

今回は、申請までしてみようと思ったので、description、iconsを追加しました。

background.js

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ['html2canvas.min.js', 'main.js'],
  });
});

filesが複数ファイルになりました。

main.js

(() => {
  if (/https:\/\/calendar.google.com\/calendar/.test(location.href)) {
    [].slice.call(document.querySelectorAll('[role="button"] [aria-hidden="true"] > :first-child')).forEach((elm) => { elm.innerHTML = '予定あり' });
    html2canvas(document.querySelector('[data-view-heading]')).then((canvas) => {
      downloadImage(canvas.toDataURL());
    });
    
    function downloadImage(dataUrl) {
      const name = 'calendar.png';
      const a = document.createElement('a');

      a.href = dataUrl;
      a.download = name;
      a.click();
    }
  } else {
    window.open('https://calendar.google.com/calendar/');
  }
})();