fenrir とは HTML 構造が違うことなどが原因でそのコードだとダメですね
javascript
1$(function(){
2 $("h3.r a").each(function(){
3 var domain = this.host;
4 var favget = "//www.google.com/s2/favicons?domain="+domain;
5 var favgethtml = "<img src='"+favget+"' class='favi'/>";
6 $(this).parent().prepend(favgethtml);
7 });
8});
こちらをどうぞ
一応動作確認しています
また h3.r a
というセレクタで検索結果のタイトルを取得していますが、ここは Google の気分で将来的にかわるかもしれません
追記
Google の検索結果の画面で再検索した場合はリロードせず検索結果だけを更新しています
上のコードだとロードしたときに一回だけファビコンをつけるので再検索したあとはつきません
次のようにしてみてください
javascript
1$(function(){
2 function attachFavicon(){
3 $("h3.r a").each(function(){
4 var domain = this.host;
5 var favget = "//www.google.com/s2/favicons?domain="+domain;
6 var favgethtml = "<img src='"+favget+"' class='favi'/>";
7 $(this).parent().prepend(favgethtml);
8 });
9 }
10
11 const mo = new MutationObserver(_ => {
12 attachFavicon()
13 })
14 mo.observe($("#search").get(0), {childList: true})
15
16 attachFavicon()
17})
検索結果の更新を監視して変化があったら再度ファビコンをつける処理を行います
追記2
エラーは最初の DOM 構築したときに #sample がないことが原因で起きているようです
リロードしたとき、Chrome の Omnibox(URLいれるとこ)からの検索、Google 検索結果の再検索等で細かい動きが違うので動く場合と動かない場合、2つアイコンが出る場合が発生しているようです
ちょっと無理矢理感もありますけど修正しました
javascript
1$(function(){
2 function attachFavicon(){
3 if($("img.favi").length) return
4
5 $("h3.r a").each(function(){
6 var domain = this.host;
7 var favget = "//www.google.com/s2/favicons?domain="+domain;
8 var favgethtml = "<img src='"+favget+"' class='favi'/>";
9 $(this).parent().prepend(favgethtml);
10 });
11 }
12
13 const mo1 = new MutationObserver(_ => {
14 if($("#search").length === 0) return
15
16 mo2.observe($("#search").get(0), {childList: true})
17
18 mo1.disconnect()
19 })
20 const mo2 = new MutationObserver(_ => {
21 attachFavicon()
22 })
23
24 mo1.observe(document.body, {childList: true, subtree: true})
25
26 attachFavicon()
27})
ふたつアイコンが表示されないようにすでに favicon が存在するときは何もしない分岐と #search が作られてから再検索監視を始めるようにしました