chrome拡張機能自作手順（作成→公開まで）

6117 ワード
Chrome JavaScript Chatwork Svelte JavaScript テキストリンク

はじめに

社内でChatWorkを使っているのですが、少しでも便利にできたらなと思い、chromeの拡張機能を自作しました。

本記事では以下の３つについて書きます

  • 作成した拡張機能の説明
  • chrome拡張機能の開発環境、開発手順
  • chrome拡張機能のストアへの公開手順

何を作った？

これです。

ChatWork用のchrome拡張機能です。
具体的にはリンク先の概要に書いてありますが、できることを箇条書きで書いてみます。

  • 定型文を設定
  • 定型文をボタン(*1)クリックで呼び出し
  • キーボードショートカットにも登録できる

(*1)テキストエリア上の「TO」とかがある部分

↑ボタン部分をHTMLで設定できるようにしてあるので、見た目の自由度が高くていい感じです！

実装手順

chatWork用の拡張機能はすでにいくつか公開されており、その中でライセンスがMITのものがあったのでそれをもとに作成しました。
https://github.com/YukiAsano/CW_QuickInfoInput

使用技術

  • Chrome-Javascript-API
  • Svelte
  • sass
  • webpack

実装！

chrome拡張機能はすべてmanifest.jsonというファイルから始まります。
このファイルに

  • バージョン
  • 拡張機能の名前、概要
  • アイコン画像の設定（16×16, 48×48, 128×128の3サイズ用意しないといけない、これがめんどくさい！ ）
  • 設定画面のパス
  • いつ、どのタイミングでjsが実行されるか

等設定します。

実際のmanifest.jsonのソースがこちら

manifest.json
{
    "name": "ChatWork Quick Input",
    "version": "0.2",
    "manifest_version": 2,　//最近3が発表されたらしい
    "description": "ChatWorkのテキスト入力をサポートする拡張機能",
    "permissions": ["storage"], //使用するChrome-Javascript-APIによって権限をリクエストする必要がある
    "content_security_policy": "script-src 'self'; object-src 'self'",
    "icons": {
        "16" : "images/icon_16.png",
        "48" : "images/icon_48.png",
        "128": "images/icon_128.png"
    },
    "content_scripts": [{　// chatworkページ上で実行されるjsの設定
        "matches": ["*://*.chatwork.com/*","*://chatwork.com/*","*://kcw.kddi.ne.jp/*"],
        "js": ["scripts/jquery-3.5.1.min.js", "scripts/core.js"],
        "run_at": "document_end",
        "all_frames": true
    }],
    "options_page":"pages/public/index.html"　// 設定画面
}

あとは実装するだけ！

公開手順

公式の公開手順に従って公開しました

大まかに以下の流れで公開します。

  1. 拡張機能のzipファイルを作成
  2. デベロッパーアカウントを作成
  3. zipファイルをアップロード
  4. ストアでの説明を記述
  5. 申請→承認
  6. 公開！

ソース

参考