MENU

JavaScriptChrome拡張機能

自作Chrome拡張機能をテストする方法

更新日:2021/03/12

 

Chromeの拡張機能は、JavaScriptでプログラミングできれば比較的容易に作成できます。

 

しかし作成した拡張機能を実際にChrome上で動作させてテストするのには、ある程度の知識が必要です。

 

そこで今回は、自作したChrome拡張機能をテスト目的でChromeにインストールする方法をお伝えします。

 

 

参考:自作Firefox拡張機能をテストする方法

■お願い
去年ECMAScript2020を頑張って日本語訳しましたが、誰も見てくれません・・・
誰かみて!!
【JavaScript】 学習のためECMAScript2020を日本語訳してみました

自作chrome拡張機能のインストール方法

 

右上の…をクリックしてメニューを開き、「その他のツール」 → 「拡張機能」 を選択。

 

chrome その他ツール 拡張機能

 

拡張機能のデベロッパモードをONし、「パッケージ化されていない拡張機能を読み込む」を選択。

 

デベロッパモード ON

 

拡張機能が保存されているフォルダを選択する。
(圧縮などは必要なし)

 

インストールするディレクトリを選択

 

選択後自動で読み込まれます。

エラーが表示されたら

 

拡張機能を動作したとき何らかのエラーが出ると、下図のようにエラーボタンが表示されることがあります。

 

拡張機能 エラー

 

エラーボタンを押してエラー内容を表示します。

 

エラー内容

 

エラーを修正し保存したら、再読み込みボタンを押します。

 

再読み込みボタン

 

※再読み込み時エラーがなくても、エラーボタンは消えません!!

 

古いエラー情報を必ず削除しましょう。

 

エラー内容 削除

 

僕は、再読み込みすれば以前のエラーが消えると思っていました。
しかし何度修正してもエラーボタンが消えず、2時間くらい悩みました。

 

とてもとても悲しい事件でした。

コンテンツスクリプトのデバッグ

 

Chromeのデベロッパツールを開く、「Sorces」タブを選択します。

 

「≫」から、「Content script」を選択します。

 

Chrome 拡張 コンテンツスクリプト デバッグ

 

表示されたリストからスクリプトを選択します。

 

ブレイクポイントを設置し、デバッグします。

バックグラウンドページのデバッグ

 

拡張機能画面上の、「バックグラウンドページ」リンクをクリックします。

 

バックグラウンドページ リンク

 

デベロッパツールが表示されるので、「Page」タブからバックグラウンドページスクリプトを選択します。

 

バックグラウンドページ デバッグ

 

ブレイクポイントを設置し、デバッグします。

記事の内容について

 

こんにちはけーちゃんです。
説明するのって難しいですね。


「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。

そんなときは、ご意見もらえたら嬉しいです。

ご意見はこちら。
https://note.affi-sapo-sv.com/info.php

【お願い】

お願い

■このページのURL


■このページのタイトル


■リンクタグ