More than 5 years have passed since last update.

初めてのChrome拡張機能としてGitHubでStarをつけたリポジトリをタグで管理できる機能を作った

Posted at 2018-11-26

まえがき

Chrome拡張機能の作り方を説明している記事ではありません。

初めてChrome拡張機能を作ろうとした人が、
何を参照し、どこにつまづいたか、どんな手順で開発したのかを体験記と思って読んでください。（あとOSSの宣伝です...）

作ったものはGitHubにあります。
よければChromeウェブストアからダウンロードして利用してみてください。

作ってみての感想

JavaScript、HTML、CSSが書ければ簡単に作ることができた
テストが簡単
アイコンやらstoreでの表示など画像がやたらと必要で面倒くさかった
公開するには$5かかった

動機

GitHubでせっかくStarをつけたリポジトリをタグなどで管理しようとしましたが、イマイチ使い勝手が悪く...¹
ならつくってみるか！！と始めてみました。

作る前に

必要な実装は以下の3つと考えて、調査をしました。

DOMを注入する
注入したDOMでボタンとかが動く
タグのデータをどっかに保管する

そもそもChrome拡張機能が何でできているかさえ知らなかったので、こちらの記事を読みました。

Chrome拡張の開発方法まとめ　その1：概念編

なんとなく、以下のことを理解しました。

JavaScript、HTML、CSSが書ければいけそう
マニフェストファイル：どのウェブサイトで実行されるのか、どんなファイルがあるのかなどを説明するファイル
Content Scripts：プログラムの本体
Background Script：Content Scriptでできない処理をやらせるプログラム（必須ではない）
popup.html：ブラウザの右上にできるアイコンをクリックしたらでるページ

ファイルを用意する

必要そうなファイルを作成し、動かしてみればわかるだろうというゴリ押しスタイルで開発をはじめました。
とりあえず、必要なファイルを用意しました。

manifest.json（マニフェストファイル）
js/main.js
js/background.js
css/style.css
popup.html

実装のTIPS

マニフェストファイル

この記事を見ながら書きました。

Chrome 拡張機能のマニフェストファイルの書き方

とりあえずコンソールにログを出すだけなら、あまり難しいことはないです。
DOMを追加する、データを読み書きするための追加は後述します。

Content Scripts

以下の記事を見ながら書きました。

データの読み書き

タグのデータを保存するため、Chrome拡張機能で提供されている機能を使います。
公式が一番わかりやすかったです。

Storage APIs

重要なことはmanifest.jsonに以下のことを書き込むことです。

manifest.json

"permissions": [
    "storage"
]

DOMの注入

jQueryを利用しました。
普段はCDNを利用しているのですが、URLが含まれたDOMはセキュリティポリシーに違反するため、注入したりなどができません。

jQueryをダウンロードし、js/lib/jquery-3.3.1.min.jsとして配置しました。
さらに、Content Scriptsとして利用するファイルであることを宣言するため、マニフェストファイルを編集します。
これでmain.jsでjQueryが使えます。

manifest.json

"content_scripts": [
    {
        "matches": [
            // 略
        ],
        "css": ["css/style.css"],
        "js": [
           "js/lib/jquery-3.3.1.min.js", // これを追加する
            "js/main.js"
        ]
    }
],

CSS

GitHubのheadタグにlinkタグでスタイルシートを入れましたが、そのhrefにはひと手間加える必要があります。

普通にパスを書いてしまうと、GitHubのパスを指定することになります。
拡張機能のファイルを探してもらうためには、chrome.extension.getURL('<Your file path>')といったようにし、manifest.jsonにそれらのファイルへのアクセスを宣言することが必要です。

js/main.js

$('head').append($('<link>', {
    rel: 'stylesheet',
    href: chrome.extension.getURL('css/style.css'),
}));

manifest.json

"web_accessible_resources": [
    "*.css"
],

FontAwesome

アイコンなどの利用するため、FontAwesomeを利用しました。
こちらもCDNは利用できません。
ダウンロードして必要なファイルを配置、manifest.jsonへ書き込みます。

css/all.min.css
webfonts: ディレクトリごと配置します

webfonts以下に存在したファイルの拡張子を全部書きました。²

manifest.json

"web_accessible_resources": [
    "*.css",
    "*.eot",
    "*.svg",
    "*.woff",
    "*.woff2",
    "*.ttf"
],

popup.html

フィードバックなどが欲しかったので、GitHubへのリンクを書いただけでした...

background.js

なにか処理させようとしましたが何もなかったので、
ファイルだけ作成して中身は1文字も書きませんでした...

テストする

とりあえずの段階でも、ローカルの環境で拡張機能をテストしました。

Chromeを開き、URLにchrome://extensions/を入力します。
右上のデベロッパーモードをONにします。
「パッケージ化されていない拡張機能を読み込む」をクリック、拡張機能を作成しているディレクトリを選択します。

不足している項目がある、セキュリティポリシーで利用できない機能についてはエラーや警告として表示されるのでわかりやすいです。
また、ブラウザの違いを考えない（Chromeだけに対応するなら）ため、楽ちんでした。

公開する

アップロード準備

マニフェストファイル、Content Scripts以外に、いくつかのサイズのアイコンが必要なので用意しましょう。上記の記事に必要な画像は説明されています。
アップロードするには、これらをすべて含めたzipにする必要があります。
Lhaplusでもなんでもお好きにzipに圧縮してください。
ChromeのデベロッパーツールONで出てきた「拡張機能をパッケージ化」ではないので注意。

アップロード

chromeウェブストアに行き、歯車をクリック、「デベロッパーダッシュボード」をクリックします。

「新しいアイテムを追加する」をクリック、指示にしたがってファイルのアップロード、入力をおこないます。

特に面倒なのがストアに表示するための画像などが必要になることです。

お金をはらう

諸々入力し、最後になると登録手数料が求められます。これは一回きり、他の拡張機能や現在の機能を更新しても再度払う必要はありません。

おわりに

繰り返しになりますが、この記事は拡張機能をつくったという体験記にすぎません。

Chrome拡張機能を一度でも作成した方にとっての新規な内容は無いと思います。
これから初めて挑む人が参考にして、一つでも不安やひっかかる点が解消されればと思い、書きました。

よい日々を。

https://github.com/artisologic/github-stars-tagger , https://github.com/gabrielgodoy/github-stars-manager など ↩
正規表現でwebfonts以下のファイルという指定のほうがよかったと思う。 ↩

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up