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

Chromeの機能拡張は自分で自作することも出来ます。自作した機能拡張は、公開しなくても追加できます。また、配布も可能です。

home HOME about About this site Mail Mail

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

Last update 2019-05-05 13:14

twitter Facebook はてブ LINE pocet

 

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

Sponsored Link

 

目次

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

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

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

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

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

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

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

エラーが起きた場合

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

文字化け

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

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

カンマがないまた、文法エラーがないと怪しい場所を表示してくれます。

アイコンが追加された

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

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

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

拡張機能を管理をクリック追加されたアイコンを右クリックします。

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

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

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

デバッグ

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

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

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

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

自作した拡張機能が消えた!?

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

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

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

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

関連ページ

最終更新日 2019-05-05 13:14

 

twitter Facebook はてブ LINE pocet

Sponsord Link

 

投稿日:2019-05-05 | このページのトップへ | コメントを書く | 管理

カテゴリー

同じカテゴリーの記事