え？もう普通の人は働いてるって？ ｿｯｽｶ。
今回作ったのはリンクをマウスオーバーしたらＵＲＬをポップアップで表示してくれる機能、仕様感はイマイチ。
似たようなことはタブ操作の拡張機能でやったことあるんですけどね、
マウス操作を使った機能ってＨＴＭＬ要素によって、作動できないものがあるんですよね、確実に作動できない機能は公開しにくい。
とにかく設計としては、
・マウスオーバーでリンクのＵＲＬを取得
・マウスカーソルの近くに固定表示のＤＩＶを埋め込む
・そのＤＩＶにＵＲＬを書き込む、文字数制限アリ
・マウスアウトで表示を消す
こんな感じ、あまり難しくないですね。
ＵＲＬの取得はmouseover(e)で要素を取得して、href情報を抜き出す。
注意が必要なのは、リンクに見せかけてマウスオーバーでゲットできる要素には「href情報」が付いていない場合がある。子ノードや親ノードにhrefが設定されていたりするので、条件分岐でもして狙ったＵＲＬを抜き出さないとダメ。
次、マウスカーソルの近くに固定表示のＤＩＶを埋め込む。
ここが一番苦労しました、だからＨＴＭＬはキライなんだってば。
固定表示という言い方はたぶん正確じゃないと思いますが、ページスクロールに影響されない要素、の意味で書いています。
固定表示のボタンの作り方なんかを参考にして、それをjavascriptでゼロから生成する方法を試したのですが、css情報をjavascript側で書き込むなど、普段しないことが多かったので、ドキドキでした。
マウスカーソルの近くに表示しないといけないので、e.clientXやclientYでマウス座標を取得し、動的に数値を書き込む必要があったし、固定表示のやり方も知らないし、作業時間の大半はここでした。
無事、表示できたので、マウスアウトした時には、.remove()で生成した要素を消去します。作ったものを消すということもあまりしたことなかったですね。
さて、一応これで完成なのですが、イマイチ動作がもっさりしています。
マウスオーバーがうまく作動しない時があるっぽいのと、表示座標がずれる時があります。それにiframeのリンクは取得できない（これはウェブの仕様です）、この辺りが限界ですね。
この様な使用感 ↓
↓ バグの様子。赤丸にカーソルを当てたのに、表示はズレています。
e.clientXなどではないその他の座標情報を使ったら解決するかも？
あとＵＲＬが無駄に長いものも多いので、適当に文字制限を入れています。
見たいのは最初の方だけですもんね。
全く機能が作動しない時もあるし、表示がチラつく時があってちょっと信用できないなぁ、という印象。
この機能と同じようなものは、ブラウザの基本機能として画面左下にひっそりと表示されているのですが、わざわざ画面左下をチラ見するのが面倒でマウスに追随するようにしました。
以上。
追記：
作動にムラがある・表示位置がずれる問題共に、マウスオーバーではなくマウスムーブに変えることで改善しました。発火が不安定なら何度も発火させれば良いじゃない？の精神です。
