f:id:kic-yuuki:20191103143805p:plain

現職では、社内・パートナーさんとの連絡手段としてChatworkを使用していますが、メッセージのピン留機能がないことに困っています。

Chrome Webストアで検索しても、該当するような拡張機能が見当たらなかったため、勉強がてら作成しようと思い、Chrome拡張開発のための勉強を始めました。

この記事では、その勉強した内容を書き残しておきたいと思います。

Chatworkメッセージピン留機能のイメージ

実装機能としては、最低限以下で考えてます。

コンテキストメニューに「Chatworkメッセージピン留」を追加
- Chatwork系の画面が表示されている時のみ表示するようにしたい
ピン留すると...
- 右上に表示されているChrome拡張用ウィンドウにピン留される
  - チャットワークグループ毎にタブが設けてある状態
    - 「ピン留時間、送信者、本文（見切れる部分は省略）」をリスト表示
- クリックすることで、新しいタブでピン留したメッセージに飛べる

標準機能「タスク」で補えるんじゃない？

とも思ったのですが、タスクはチャットワークグループの全員にメッセージ送信されて見えてしまいます。

自分は上記運用でもいいのですが、それを許すと、みんな自由にタスクを作成してしまい、収集つかなくなりそう...と思ったため、自作する方向としました。

本編

では、コンテキストメニューに追加するところまでを書いていきます。

以下で登場するコードは、以下から抜粋しています。

javascript-sandbox/chrome-extension-sample at master · zakizaki-ri9/javascript-sandbox · GitHub

開発環境

参考までに自分の環境を書き出しておきます。

エディタ ... Visual Studio Code
node.js ... v12.13.0

// package.json
{
  "name": "chrome-extension-sample",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "@types/chrome": "0.0.91",
    "eslint": "^6.6.0",
    "eslint-config-prettier": "^6.5.0",
    "eslint-plugin-prettier": "^3.1.1",
    "prettier": "^1.18.2",
    "typescript": "^3.6.4"
  }
}

@types/chromeを入れているのは、chromeのコード補完を効かせるためです。

manifast.jsonの作成

Getting Started Tutorial - Google Chrome

に記載されている通り、manifest.jsonというファイルを作成します。

Manifest File Format - Google Chrome

を見ると、記述する内容が多いため、Requiredと記載された項目と必要な分だけ記述します。

// manifest.json
{
  "manifest_version": 2,
  "name": "zakizaki-ri9 Sample Extension",
  "version": "1.0",
  "description": "Extension Sample",
  "background": {
    "scripts": ["src/background.js"]
  },
  "permissions": ["tabs", "contextMenus"]
}

コンテキストメニューにChrome拡張を仕込むためには、permissionsにcontextMenusを記載（コンテキストメニューを拡張する許可を）する必要があります。

コンテキストメニューを追加するコードを記述する

chrome.contextMenus - Google Chrome

上記を参考に、アラートを表示するコンテキストメニューを追加するコードを記述します。

// src/background.js
chrome.contextMenus.create({
  title: 'AlertSample',
  type: 'normal',
  contexts: ['all'],
  onclick: (info, tab) => {
    alert(
      JSON.stringify({
        message: 'AlertSample Clicked!!',
        info: info,
        tab: tab
      })
    )
  }
})