「画像を表示」を復活させるブックマークレットを作ってみたらもっといいものが既にあった

あらすじ

• web系開発に触れていないがjavascriptで色々するのが楽しい。
• 流れで最近話題のGoogle画像検索から消えた「画像を表示」を復活（＆改善）させようとブックマークレットを作った。
• ググったら既に拡張機能が作られていたよ。
• 勿体無いのでブックマークレットを記事にメモした。

該当記事

forest.watch.impress.co.jp

私の作ったもの

2018/02/20 版

javascript:(function(){
    function convertHref2Url(href){
        var startTag = "/imgres?imgurl=";
        var endTag   = "&imgrefurl=";
        return decodeURIComponent(href.substring(href.indexOf(startTag) + startTag.length, href.indexOf(endTag)));
    };
    Array.from(document.querySelectorAll("a[jsname='hSRGPd']"),  e => {
        var imageLink = document.createElement("a");
        imageLink.setAttribute("target","_blank");
        imageLink.style ="height:30px;width:80px;" +
            "background-color:rgba(130, 130, 255, 0.8);" +
            "color:rgba(255, 255, 255, 1.0);" +
            "z-index:1;" +
            "border-radius: 10px;" +
            "display: flex;" +
            "flex-direction: column;" +
            "justify-content: center;" + 
            "align-items: center;" +
            "position: absolute;" +
            "text-decoration: none;";
        imageLink.href = convertHref2Url(e.href);
        var linkTitle = document.createElement("div");
        linkTitle.style = "color:black;font-size:5px;";
        linkTitle.innerText = "View image";
        imageLink.appendChild(linkTitle);
        e.parentNode.appendChild(imageLink);
    });
})();

2018/02/21 版

面白そうだったので色々試した

• スクロールした後、リンクのついてない画像が出て来る。 何度も実行することを考慮して重複しないようにした。
• すべての追加される要素にstyle属性を直書きすると文字数がすごいことになる（影響不明）のでstyle要素を追加した。 style要素も重複対応済。

javascript: (function () {
    function convertHref2Url(href) {
        var startTag = "/imgres?imgurl=";
        var endTag = "&imgrefurl=";
        return decodeURIComponent(href.substring(href.indexOf(startTag) + startTag.length, href.indexOf(endTag)));
    };

    var styleId = "gas_view-image_style";
    var labelClass = "gas_view-image_label";
    var linkClass = "gas_view-image_link";
    var s = document.querySelector("#" + styleId);
    if (s === null) {
        var style = document.createElement("style");
        style.setAttribute("id", styleId);
        style.nodeType = "text/css";
        style.appendChild(document.createTextNode(`
        .${labelClass} {
            height:30px;
            width:80px;
            background-color:rgba(130, 130, 255, 0.9);
            color:rgba(255, 255, 255, 1.0);
            z-index:1;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: absolute;
            text-decoration: none;
        }
        .${linkClass}{
            color:black;
            font-size:8px;
        }
        `));
        document.head.appendChild(style);
    }

    Array.from(document.querySelectorAll("a[jsname='hSRGPd']"), e => {
        if (e.parentNode.querySelector("." + labelClass) === null) {
            var imageLink = document.createElement("a");
            imageLink.setAttribute("target", "_blank");
            imageLink.setAttribute("class", labelClass);
            imageLink.href = convertHref2Url(e.href);

            var linkTitle = document.createElement("div");
            linkTitle.innerText = "View image";
            linkTitle.setAttribute("class", linkClass);
            imageLink.appendChild(linkTitle);
            e.parentNode.appendChild(imageLink);
        }
    });
})();

あと記事の問題ですが、コードハイライトが有効になるように修正。 （javascript を js にしていた。）

動作

こんな感じに「View image」のリンクが作られます。

Google 画像検索 動作結果

javascriptどころかweb系全然触れてない（言い訳）のでコードの適当さがあります。

以上！