Chrome extension for attendance chat post with https://biz.moneyforward.com/attendance.

マネーフォワードクラウド勤怠 のホーム画面にある出勤・退勤等の打刻のアクションでチャットツールに投稿を行うGoogleChrome拡張機能です。

以下の環境で確認しています。

• [Google Chrome] バージョン: 84.0.4147.105

Chromeウェブストアに公開していないため、手動でインストールを行ってください。

1. 任意のディレクトリにソースコードをcloneまたはzipダウンロード
2. Chrome拡張機能の デベロッパーモード を有効にして パッケージ化されていない拡張機能の読み込み で attendance-ext フォルダを指定

参考

• https://developer.chrome.com/extensions/getstarted
• https://toranoana-lab.hatenablog.com/entry/2020/04/23/174421

• Chrome拡張機能のオプションでチャットツールの設定を行ってください。

• 事前にチャットツール側でIncoming Webhookの設定を行いWebhookのURLを発行しておく必要があります。

  チャットツールは Slack と Mattermost で確認を行っています。

  • Slack Incoming Webhook
  • Mattermost Incoming Webhook

• マネーフォワードクラウド勤怠 のホーム画面で打刻のアクション（クリック）を行うとチャットツールのチャンネルにPOSTされます。

以下の箇所で指定しています。

• background.js ・・・ Chrome拡張機能を動作させるURLの設定

pageUrl: {
  hostEquals: 'attendance.moneyforward.com',
  pathEquals: '/my_page'
},

• manifest.json ・・・ contentScript.js を動作させるURLの設定

"content_scripts": [
  {
    "matches": ["https://attendance.moneyforward.com/my_page"],
    "js": ["contentScript.js"]
  }
],

Chrome拡張機能のオプションページとポップアップページのcssに Bootstrap5 を使っています。

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

バージョンがAlphaなので突然画面が崩れたりするかもしれません。

https://note.com/ppiicckkllees/n/n97674a7bf2a1