Help us understand the problem. What is going on with this article?

任意のサイトで任意のJavaScriptを自動実行させるChrome拡張

More than 3 years have passed since last update.

任意のサイトで任意のJavaScriptを自動実行させる拡張機能の紹介です。

nakajmg/ScriptAutoRunner

使い道

  • スニペットを実行させておきたいときに
  • jQueryなどのライブラリを挿入しておきたいときに
  • デバッグに

devtools-snippets/にあるconsoleを拡張するスニペットなど、スニペットをあらかじめ実行しておく必要があるものなどに使えます。

ブックマークレットなどで挿入していたjQueryなども自動で挿入することができます。

ホスト名でフィルタリングできるので、デバッグにも使えると思います。

使い方

まず実行させたいスクリプトを追加します。スクリプトの追加は拡張のオプションページから行います。

オプションページ

オプションページは次の3つの方法で開くことができます。

  • 拡張機能のアイコンを押して歯車アイコンをクリック
  • 拡張機能のアイコンを右クリックして"オプション"を選択
  • 拡張機能の管理から"オプション"を選択

スクリプトはオプションページで管理します。

スクリプトの追加

オプションページの上部にあるアイコンをクリックすると新規のスクリプトが追加されます。

SS 2015-09-23 11.28.48.png

コードアイコンをクリックすると自由にコードが書けるスニペット形式のスクリプトが追加されます。リンクアイコンをクリックするとURLでJavaScriptファイルを指定する形式のスクリプトが追加されます。

SS 2015-09-23 11.41.24.png

入力項目

入力項目は次の3つです。

  • スクリプトの名前
  • コード/ファイルのURL
  • 自動実行させたいホスト名

スクリプトの名前は拡張のポップアップにも表示されるので、わかりやすい名前をつけておきましょう。

コードはページのbodyの閉じタグの直前にscript要素として挿入されます。ファイルのURLの場合、script要素のsrc属性にURLがセットされ、同じようにページに挿入されます。

ホスト名は、スクリプトを実行させたいページを管理するために使います。例えばQiitaでだけ実行させたい場合にはqiita.comを指定すれば、そのスクリプトはhostnameqiita.comが含まれているページでだけ自動実行されます。

SS 2015-09-23 11.49.21.png

SS 2015-09-23 11.27.14.png

ホスト名が空欄もしくはanyが設定されている場合、そのスクリプトはすべてのページで自動実行されます。

スクリプトの有効/無効の切り替え

スクリプトの自動実行の有効/無効の切り替えはオプションページとポップアップの両方から行うことができます。

オプションページからはスクリプトから出ているプラグのような部分をクリックすることで有効/無効を切り替えることができます。

2015-09-23 11_59_15.gif

プラグが刺さって明るくなっている場合が有効、プラグが抜かれていて暗い場合が無効な状態です。

拡張のポップアップからも、プラグのアイコンをクリックすることで切り替えることができます。

SS 2015-09-23 11.28.05.png

全てのスクリプトの有効/無効の切り替え

一時的に全てのスクリプトを無効にしたい場合があるかと思います。そういったときには、雷のアイコンをクリックすることで、すべてのスクリプトを無効にすることができます。

2015-09-23 12_05_28.gif

この有効/無効は、個別のスクリプトの有効/無効の状態より優先されます。

ポップアップからも、同じように雷のアイコンをクリックすることで有効/無効を切り替えることができます。

2015-09-23 12_10_57.gif

特定のホストで自動実行を全て無効にする

いくつかのサイトで、scriptの挿入によるブロッキングかなにがが原因で、もとのページの表示処理がうまくいかない場合がありました。

特定のホストでスクリプトの自動実行を全て無効にする場合には、オプションページの右上の歯車からオプションを開き、External hostnameを設定します。

SS 2015-09-23 19.36.37.png

External hostnameに指定されたホストでは、全てのスクリプトが実行されなくなります。

この設定は、スクリプトの自動実行させたいホストの設定より優先されます。

おすすめの使い方

GitHubにスニペット用のリポジトリを作って、rawgitを使ってCDN経由でスクリプトを読み込むようにしておくと使いまわせて便利です。

おわりに

こちらからインストールできるので使ってみてください。

バグの報告や機能の要望などあればGitHubでおねがいします。 https://github.com/nakajmg/ScriptAutoRunner/issues

nakajmg
フロントの人。JavaScript/CSS/HTML
http://nakajmg.github.io/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした