ブックマークレット作成の基礎知識

基本フォーマット

ブックマークレットの先頭はjavascript:で始まります。URLになるので全体を1行で記述します

ブックマークレットの基本フォーマット
javascript:(function(){ここにコードを記述する})();

ブックマークレット作成の注意点

ブックマークレットを作成するにあたっての一般的な注意点です

即時関数で囲む

ブックマークレットのコードはグローバル空間で実行されるので、サイトの空間とかぶってしまします。
名前がバッティングしないように即時関数内にコードを記述しましょう

undefined を返す

ブックマークレットのコードは undefined を返しましょう。 仮に true を返すブックマークレットを実行するとページが遷移してしまいます。 ブックマークレットではよく void(0); という記述を見かけますが、これは undefined を明示的に返しています

自作関数では何も返さないと undefined を返します。 return; とした場合も undefined が返ります

DOMを操作する場合は、DOM構築完了まで待つ

ブックマークレットからDOMを操作する場合、DOM構築完了以前にブックマークレットを実行するとバグって動きません。DOMが構築完了まで待つようにしましょう

DOMが構築完了してから関数f()を実行する
(document.readyState=='loading')?document.addEventListener('DOMContentLoaded',f):f();

画像を操作する場合は、画像表示完了まで待つ

ブックマークレットから画像を操作したい時は、ページが完全に表示するまで待つ必要があります

ページが完全に表示されてから関数f()を実行する
(document.readyState!='complete')?window.addEventListener('load',f):f();

コードの空白文字

ブックマークレットのコードに空白が入ってるとブックマークした時に %20 に変換されてしまいます。趣味の話ですが、これはかっこ悪いので阻止したいです。

//変数をローカル宣言すると空白が含まれてしまう
function(){var a;}

//引数で宣言してしまえば空白不要に
function(a){}

同様の問題で "" という文字もブックマークレットでは '' を使用しましょう

ブックマークレット作成の注意点 その2

外部JavaScriptファイルを読み込むタイプのブックマークレットの注意点です

キャッシュ阻止

外部ファイルをブラウザにキャッシュされたくない場合は、読み込むURLに「?現在の時間」を付与します

'外部ファイルのURL'+'?'+Date.now()

https対策

https のサイトから http に設置した JavaScriptファイル を読み込もうとすると、セキュリティの問題で読み込めないことがあります。一番良い対策方法は、ファイル自体を https に置くことです。
「Google Drive」や「rawgit.com」などは https に対応しています

https に設置できない場合は、ブラウザの設定で対処できる場合があります。

IEの場合はインターネットオプションを開き、セキュリティ→ゾーン：インターネット→レベルのカスタマイズ→「混在したコンテンツを表示する」を有効にしてください

コンテンツセキュリティポリシー(CSP)

サイトによっては外部のJavaScriptが動作しないよう、サーバ側で設定してあるサイトもあります
content-security-policyヘッダのことです

この場合は外部JavaScriptを読み込むことができないので、動作させることはできません。