BETA

Google Chromeでのカスタム検索エンジン機能の謎挙動

投稿日:2018-12-17
最終更新:2019-05-06

はじめに

Google Chromeで、カスタム検索エンジン機能を用いたブックマークレットの開発中、おかしな挙動に出会ったので記録を残しておきます。

経緯

Firefoxでのカスタム検索エンジン機能の実現という記事で、Firefoxでは、検索語句を%sに置換したURIをブックマークするという形でカスタム検索エンジン機能を実装していることについてまとめました。

また、Google Chromeでのブックマークのニックネーム機能の実現という記事で、Google Chromeにおいて、ブックマークのURIを検索エンジンとして登録すると、ブックマークのニックネーム機能を再現できることについてまとめました。

そして、ブックマーク機能とカスタム検索エンジン機能を融合できるのではないかと考え、ブックマークレットxカスタム検索エンジンという記事で、javascript:(()=>{ alert('%s') })()というようなURIが機能することをまとめました。

それを用いたブックマークレットを作成中に、Google Chromeの謎挙動に出会ったので、記録を残しておきます。

Google Chromeで変な挙動をするブックマークレット

そもそものGoogle Chromeにおける検索エンジン機能は、アドレスバー(オムニバー)に以下のように入力して呼び出します。

<検索エンジンのキーワード> <検索語句>  

例えば、keyというキーワードを与えたブックマークレットを、hoge hugaという引数付きで呼び出す場合、以下のように入力します。

key hoge huga  

そして、ブックマークレット内では%sを用いて引数を受け取ります。

javascript:(()=>{console.log('%s')})()  

このとき、期待されるコンソールへの出力は、hoge hugaであり、実際、そのとおりに出力されます。

では、このように書いてみます。

javascript:(()=>{  
    const foo = '?';  
    console.log('%s');  
})()  
// 実際は一行  

const hoge = '?';を足しただけで、出力は前回と同じhoge hugaとなる用に思えます。

が、出力は、hoge+hugaとなります。
スペースが+に置換されたのです(半角・全角両方試したが、どちらも置換されました)。

そして、すこし試してみたところ、以下のようになりました。

// 『+』に置換される。  
javascript:(()=>{'?';console.log('%s');})()  
javascript:(()=>{true?undefined:undefined;console.log('%s');})()  

// 『+』に置換されず、スペースを維持する。  
javascript:(()=>{'';console.log('%s');})() // 疑問符をなくす  
javascript:(()=>{'!';console.log('%s');})() // 疑問符を感嘆符に変える  
javascript:(()=>{'#';console.log('%s');})() // 疑問符をハッシュに変える  
javascript:(()=>{console.log('%s');'?';})() // 疑問符を%sのあとに置く  
javascript:(()=>{'%s?';console.log('%s');})() // 疑問符の前に%sを置く  
javascript:(()=>{console.log('%s');'?';console.log('%s');})() // 疑問符の前でもconsole.logする  

なお、Mozilla Firefoxでは、どの場合でも、スペースで区切られた出力を得ました。

考察

URL内で用いられる?といえば、クエリ。
クエリとして渡された文字列内に含まれるスペースを+に置き換えた、ということだと考えられます。

しかし、%sの前に?がある場合のみ置き換えているとみられるこの動作は、あまりにも予想外すぎます。

ちなみに、検索用URLに?を含まないニコニコ動画(https://www.nicovieo.jp/search/%s)では、検索語句に含まれる空白が%20にエスケープされました。

おわりに

実際、%sの動作はただでさえ恐ろしい…(javascript:(()=>{%s})())。
用いるべきではないですかねぇ。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

おかゆりぞっとのさほど技術的ではないブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう