ざきの学習帳(旧 zackey推し )

日々の学びを書きます

【Chrome拡張開発】コンテキストメニューに項目を追加する

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

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

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

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

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

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

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

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

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

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

本編

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

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

開発環境

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

// 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の作成

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

を見ると、記述する内容が多いため、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拡張を仕込むためには、permissionscontextMenusを記載(コンテキストメニューを拡張する許可を)する必要があります。

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

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

// 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
      })
    )
  }
})

自作Chrome拡張をインストール

Chromeの方は chrome://extensions
Vivaldiの方は vivaldi://extensionsをURLに打ち込みます。

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

パッケージ化されていない拡張機能を読み込むをクリックし、

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

manifest.jsonが格納されているディレクトリを選択します。

すると、以下のような形でインストールが完了します。

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

動作確認

実際に動作確認します。

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

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

コンテキストメニューAlertSampleが表示、アラートが表示されたことまで確認できました。

次はクリックしたDOMの解析〜取得〜保存あたりをやってみようと思います。

おわり

ほんとは爆速開発できそうなテンプレートがあったのですが...

上記は、Chrome拡張がある程度理解できたら、使ってみたいと思います。

気になる点等ありましたら、FBいただけると助かります。🙏

参考記事