サイト内のJavascriptのコードを直接編集して実行できるブックマークレット

サイト内で紹介されているJavascriptのサンプルコードなどを編集してconsole.logなどで出力したいことはありませんか?

今回はシンタックスハイライトされたコードを直接編集して実行できるブックマークレットを作成してみました。

ブックマークレットについてと設定方法は以下を参照してください。
どのブラウザ(スマホも)でも使えるGoogleサイト内検索!ブックマークレットが便利!

 

コード編集ブックマークレット


このブックマークレットをクリックするとサイト内に直接文字を書き込めるようになります。サンプルコードなどを直接編集して、編集したコードを選択し再度ブックマークレットをクリックするとJavascriptを実行します。
 
JS編集実行
 

上記をブックマークバーにドラッグするか下記をURLにコピペしてください

javascript:(function(b){var d=document,w=window;if(d.selection){t=d.selection.createRange().text;}else if(w.getSelection){t=w.getSelection().toString();}else if(d.getSelection){t=d.getSelection().toString();}eval(t);b.contentEditable=!b.isContentEditable;})(document.body);

 

コード詳細

javascript:
  (function(b){
    //document、windowオブジェクト設定
    var d=document,w=window;

    //ブラウザ上で選択された文字列を取得。IE、Firefoxで取得方法が異なる
    if(d.selection){
      t=d.selection.createRange().text;
    }else if(w.getSelection){
      t=w.getSelection().toString();
    }else if(d.getSelection){
      t=d.getSelection().toString();
    }

    //選択された文字列をJavasscriptで実行
    eval(t);

    //ブラウザ上で直接編集できるよう設定。クリックする毎にON,OFFを切り替える。常に編集した場合はtrueを設定
    b.contentEditable=!b.isContentEditable;
  })
  (document.body);

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です