はじめましての方ははじめまして。エンジニアの今井です。今回からGoogleChromeの拡張機能を作っていこうと思います。具体的な機能はまだ固まっていないのですが、社内で使用しているChatworkを便利にする拡張機能を作ろうと考えています。

今回は、超簡単な拡張機能の作り方を書いていこうと思います。調べればたくさん詳細な説明が出てくるので、この記事では超簡単をテーマにしました。

今回は何を作るのかというと、最近Chatworkのアップデートでこんなのが追加されました。

分かりやすくするためらしいのですが、自分的には余計な部分なので、「返信元」を画面から消す拡張機能を作りながら最小の拡張機能の作り方を説明していきます。

準備

まず、必ず必要とされるファイルがmanifest.jsonです。設定ファイルです。

{
  "name": "reply-description-remover",
  "version": "0.0.1",
  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": ["https://www.chatwork.com/*"],
      "css": ["remove.css"]
    }
  ]
}

説明をすると、name(拡張機能名)、version(拡張機能のバージョン)、manifest_version(おまじないみたいなやつで必ず２)が必須項目です。content_scriptsに書かれているmatchesで拡張機能を有効にしたいサイト(今回はchatwork)を指定し、cssで読み込むcssファイルを指定しています。同じような感じで”js”とすればjsファイルを読む込ませることができます。

下記がremove.cssの中身です。

.chatTimeLineReply__description{
  display: none !important;
}

今回消したい部分に設定されているclass名であるchatTimeLineReply__descriptionのdisplayプロパティを !importantを指定することで、上書きして非表示にしています。

上記で作成したmanifest.jsonとremove.cssの2ファイルを同じフォルダ内に入れておけば準備は完了です。

読み込ませる

下記のような手順で2ファイルが入っているフォルダをGoogleChromeに読み込ませます。

１．GoogleChromeのアドレスバーにchrome://extensions/と入力し、拡張機能の設定画面を開きます。
２．設定画面右上のデベロッパーモードを有効にします。

３．「パッケージ化されていない拡張機能を読み込む」をクリックし、フォルダを選択するか、フォルダを設定画面にドラッグアンドドロップします。

これで拡張機能としての読み込みが完了しました。Chatworkを開くと、「返信元」が削除されています。

今回は導入のような感じでしたが、どうだったでしょうか。
少し書き換えるだけで、よく見るサイトを自分好みにカスタマイズすることができると思います。ぜひ見ている人もやってみてください。