任意のサイトで任意のJavaScriptを自動実行させる拡張機能の紹介です。
使い道
- スニペットを実行させておきたいときに
- jQueryなどのライブラリを挿入しておきたいときに
- デバッグに
devtools-snippets/にあるconsoleを拡張するスニペットなど、スニペットをあらかじめ実行しておく必要があるものなどに使えます。
ブックマークレットなどで挿入していたjQueryなども自動で挿入することができます。
ホスト名でフィルタリングできるので、デバッグにも使えると思います。
使い方
まず実行させたいスクリプトを追加します。スクリプトの追加は拡張のオプションページから行います。
オプションページは次の3つの方法で開くことができます。
- 拡張機能のアイコンを押して歯車アイコンをクリック
- 拡張機能のアイコンを右クリックして"オプション"を選択
- 拡張機能の管理から"オプション"を選択
スクリプトはオプションページで管理します。
スクリプトの追加
オプションページの上部にあるアイコンをクリックすると新規のスクリプトが追加されます。
コードアイコンをクリックすると自由にコードが書けるスニペット形式のスクリプトが追加されます。リンクアイコンをクリックするとURLでJavaScriptファイルを指定する形式のスクリプトが追加されます。
入力項目
入力項目は次の3つです。
- スクリプトの名前
- コード/ファイルのURL
- 自動実行させたいホスト名
スクリプトの名前は拡張のポップアップにも表示されるので、わかりやすい名前をつけておきましょう。
コードはページのbodyの閉じタグの直前にscript要素として挿入されます。ファイルのURLの場合、script要素のsrc属性にURLがセットされ、同じようにページに挿入されます。
ホスト名は、スクリプトを実行させたいページを管理するために使います。例えばQiitaでだけ実行させたい場合にはqiita.comを指定すれば、そのスクリプトはhostnameにqiita.comが含まれているページでだけ自動実行されます。
ホスト名が空欄もしくはanyが設定されている場合、そのスクリプトはすべてのページで自動実行されます。
スクリプトの有効/無効の切り替え
スクリプトの自動実行の有効/無効の切り替えはオプションページとポップアップの両方から行うことができます。
オプションページからはスクリプトから出ているプラグのような部分をクリックすることで有効/無効を切り替えることができます。
プラグが刺さって明るくなっている場合が有効、プラグが抜かれていて暗い場合が無効な状態です。
拡張のポップアップからも、プラグのアイコンをクリックすることで切り替えることができます。
全てのスクリプトの有効/無効の切り替え
一時的に全てのスクリプトを無効にしたい場合があるかと思います。そういったときには、雷のアイコンをクリックすることで、すべてのスクリプトを無効にすることができます。
この有効/無効は、個別のスクリプトの有効/無効の状態より優先されます。
ポップアップからも、同じように雷のアイコンをクリックすることで有効/無効を切り替えることができます。
特定のホストで自動実行を全て無効にする
いくつかのサイトで、scriptの挿入によるブロッキングかなにがが原因で、もとのページの表示処理がうまくいかない場合がありました。
特定のホストでスクリプトの自動実行を全て無効にする場合には、オプションページの右上の歯車からオプションを開き、External hostnameを設定します。
External hostnameに指定されたホストでは、全てのスクリプトが実行されなくなります。
この設定は、スクリプトの自動実行させたいホストの設定より優先されます。
おすすめの使い方
GitHubにスニペット用のリポジトリを作って、rawgitを使ってCDN経由でスクリプトを読み込むようにしておくと使いまわせて便利です。
おわりに
こちらからインストールできるので使ってみてください。
バグの報告や機能の要望などあればGitHubでおねがいします。 https://github.com/nakajmg/ScriptAutoRunner/issues