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/');
  }
})();

以前のコードとの違いとしては、

• Googleカレンダー以外で実行した時の挙動を追加 👉 Googleカレンダーを開くようにした
• html2canvas.jsの読み込み方を変更 👉 CDNからではなく、background.jsのfilesから読み込むようにした

の2点です。

移植自体は、まったくもって簡単だったのですが、アイコンを作ったり、スクリーンショットを用意するのにやや時間がかかりました。

一応、現在公開の申請中です。
申請が通ったら、申請方法をまとめようと思います。

📅 📅 📅

追記

まとめました！

blog.kimizuka.org