Slackの絵文字が見にくかったのでChrome拡張の作り方を勉強した

4570 ワード
chrome-extension Chrome emoji 絵文字 Slack Chrome テキストリンク

はじまり

エンジニアを褒めるネコ の画像をSlackで絵文字に登録してみたのですが、ちょっと小さくて見にくい・・・

せや！絵文字大きくしたろ！！（似非関西弁）

ということでSlackの絵文字を大きく表示するChrome拡張を作ってみました。

Chrome拡張の作り方

拡張機能というのは結局zipファイルです。
中には manifest.json という色々情報を記載するファイルと、機能を実現するためのスクリプトやCSSや画像などが入ります。

今回は絵文字を大きくしたいわけですが、そのために必要なものはCSSファイル1つだけ。
Chrome上で拡張機能のアイコンとなる画像ファイルも用意して、これで一式。

manifest.json には拡張機能の情報を書きます。こんな感じ。
公式の解説

{
  "name": "Slack-emoji-enlarger",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "enlarge emoji on Slack",
  "icons": {
    "16": "images/icon16.png",
    "128": "images/icon128.png"
  },
  "permissions": [
    "tabs",
    "http://*/*",
    "https://*/*"
  ],
  "content_scripts": [
    {
      "matches": [
        "https://*.slack.com/messages/*"
      ],
      "css": [
        "styles.css"
      ],
      "run_at": "document_end"
    }
  ]
}

つまり https://*.slack.com/messages/* なURLのときは最後に styles.css を読み込んでね！ということが書いてあります。

ディレクトリ構造はこうなります。

slack-emoji-enlarger
 |- manifest.json
 |- styles.css
 |- images
     |- icon16.png
     |- icon128.png

あとはこれをブラウザで読み込めば(ここのステップ2)このとおり。

これから

Chrome拡張なのでChromium系ブラウザでしか意味ないのがつらいですが、絵文字関係のその他の機能も入れていきたいですね。