自作の拡張機能をChromeに追加するには

最終更新日 2021-02-23 5:51

Chromeの人気が高い理由として、豊富な機能拡張が用意されている点だと思います。が、まだまだ「こういう機能拡張があればいいのにな」と思うこともしばしばあります。
もし、CSSやJavaScriptの知識があれば機能拡張を自作してChromeに読み込ませることが出来ます。
機能拡張を自作するときのデバッグもこのやり方で検証できます。

自作した拡張機能を読み込む

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

自作した機能拡張を用意出来たら、ChromeでChrome://extensionsへアクセスします。

右上にある「デベロッパーモード」をオン(画像のような状態)にします。

左上の方に「パッケージ化されていない拡張機能を読み込む」というボタンがあるので、ここをクリックします。

自作した拡張機能が保存されているフォルダを開きます。

「フォルダーの選択」をクリックします。

エラーが起きた場合

自作の拡張機能に文法エラーや何らかの問題があると、ここで警告が表示されます。

文字化け

このように文字化けが起きる原因は、manifestに日本語を使用していて、UTF-8以外の文字コードで保存している場合などです。

拡張機能で使用するファイルは「UTF-8」で保存してください。(日本語が含まれる場合)

また、文法エラーが合った場合、怪しい場所を表示してくれます。

アイコンが追加された

無事、自作の機能拡張をChromeに追加できると、manifestで指定したアイコンが表示されます。

自作の拡張機能の保存場所を調べる

Chromeに追加する自作の機能拡張は、パソコン内のどこにでも保存していても追加できます。なのでしばらくするとどこに保存していたかわからなくなってしまうこともあるかもと思います。その場合は以下のようにして保存先を調べます。

追加されたアイコンを右クリックします。

「拡張機能を管理」をクリックします。

機能拡張の一覧が表示されます。
もし、アイコンが表示されない拡張機能の場合は、Chromeのメニューの「その他のメニュー」にある「拡張機能」を選択してください。

下の方にスクロールすると、「ロード元」という項目があるので、ここに表示されているパスをクリックすると保存先がエクスプローラーで開きます。

デバッグ

自作した拡張機能を修正した場合、以下のようにして更新できます。

Chromeのメニューをクリックし、②「その他のツール」をクリックします。

「拡張機能」をクリックします。

自作した拡張機能は上の方に表示されています。ここの更新ボタン(画像参照)をクリックすると、修正したり追加したソースが反映されます。

自作した拡張機能が消えた！？

せっかく自分で作った拡張機能をChromeに登録したのに、次回Chromeを立ち上げたら消えてしまった！？という場合。
自作やGoogleウェブストア以外からインストールした拡張機能は、Chromeのデベロッパーモードでないと表示・使うことが出来ません。

デベロッパーモードをオンにした状態でChromeを立ち上げると、このような「デベロッパーモードの拡張機能を無効にする」という警告画面が表示されます。
ここで「無効にする」をクリックしてしまうと、インストールした自作の拡張機能が表示されなくなってしまいます。
この画面が表示されたら、右上のバツ印をクリックして閉じてください。

もし、知らずに無効にしてしまった場合は、Chrome://extensions を開き、

「デベロッパーモード」をオンにしてください。

自作の拡張機能をChromeに追加するには