Как мне сделать новый поиск Google похожим на старый поиск Google, используя CSS или JavaScript?

Question

Итак, я пытаюсь сделать новые результаты поиска Google похожими на старые результаты поиска Google.

В новом дизайне есть ссылка на домен над заголовком страницы, что очень запутанно. Ссылка на домен раньше также была зеленого цвета, что значительно облегчало чтение страницы результатов поиска, но теперь это не так.

Вот как я хочу, чтобы страница результатов поиска Google выглядела так:

Итак, как вы можете видеть, веб-ссылка зеленого цвета и расположена под заголовком для каждого результата. Это то, что я хочу.

Итак, я создал расширение, и до сих пор я изменил цвет ссылки на домен на зеленый (как это было раньше), используя CSS:

.iUh30{
    color:green !important;
}

Однако я хочу, чтобы эта ссылка на домен находилась ниже заголовка поиска (как это было раньше).

Можно ли сделать это, используя CSS или JavaScript в моем расширении?

Здесь существует расширение:

https://chrome.google.com/webstore/detail/bring-classic-back/klnhfpnhipgjannlklfcnhonncppnoae

Но оно не работает должным образом с последним обновлением от Google.

Спасибо, что прочитали.

Обновление: я могу достичь большей части того, что хочу, используя это для моего CSS файла:

.iUh30{
    color:green !important;
}

.NJjxre {
    position: relative !important;
    width: 1000px;
}

, который отлично отображает веб-ссылку. Единственная проблема - выпадающее меню (используется для выбора кэшированных страниц). Как я могу переместить это выпадающее меню справа от зеленой веб-ссылки (или полностью удалить его, не оставляя свободного места, где оно обычно было бы?)

Answer 1

Так что я решил это (на данный момент) с помощью кода расширения, который я опубликую ниже. Код основан на TamperMonkey скрипте, который вы можете увидеть здесь . Поэтому, если вы используете TamperMonkey, вам вообще не нужно создавать расширение, так как скрипт работает в данный момент времени.

Но если вы предпочитаете создать расширение для этого, вот код, который я using.

Обратите внимание, что приведенное ниже работает только с Google.co.uk. Если вы используете другой домен страны Google, измените разделы match и exclude_matches в манифесте. json Соответственно.

стилей. css

.NJjxre {position: relative !important;}
.btrG {word-break: break-all; line-height: 18px;}
.btrG .btrAdd { display: inline-block; vertical-align: top;}
.btrG .btrLink {display: inline-block; vertical-align: top; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none !important;}
.btrG .btrLink cite.iUh30 {color: #006621; font-size: 16px;}
.B6fmyf {display:none;}

manifest. json

{

    "manifest_version": 2,

    "name": "Google Search Classic",
    "version": "1.0.0",
    "description": "Classic Google Search.",

    "icons": { 
           "48": "icon1.png",
          "128": "icon2.png"
    },

    "content_scripts": [{
        "css": ["styles.css"],
        "js": ["content.js"],
        "matches": ["https://www.google.co.uk/*"],
        "exclude_matches": ["https://www.google.co.uk/*tbm=vid*"],
        "run_at": "document_end"
    }]

}

content. js

var el = document.querySelector('#rcnt');
if (el != null){document.querySelectorAll('.g .rc').forEach(function(el){

    var tbwUpd = el.querySelectorAll('.TbwUpd');
    if (tbwUpd.length > 0){

        var linkEl = el.querySelector('.r > a');
        var addEl = linkEl.nextSibling;
        var betterAddEl = document.createElement('div');
        betterAddEl.className = 'btrAdd';

        if (addEl){
            for (var i = 0; i < addEl.children.length; i++) {
                var _el = addEl.children[i];
                if (_el.className.indexOf('TbwUpd') == -1) {
                    betterAddEl.appendChild(_el);
                }
            }
        }

        var betterEl = document.createElement('div');
        betterEl.className = 'btrG';
        betterEl.appendChild(betterAddEl);

        el.querySelector('.r').appendChild(betterEl);

        var urlEl = document.createElement('a');
        urlEl.href = linkEl.href;
        urlEl.target = '_blank';
        urlEl.className = 'btrLink';

        var urlCiteEl = document.createElement('cite');
        urlCiteEl.innerText = linkEl.href;
        urlCiteEl.className = 'iUh30 bc';
        urlEl.appendChild(urlCiteEl);

        var maxWidth = el.clientWidth - betterAddEl.offsetWidth - 10;

        betterEl.insertBefore(urlEl, betterAddEl);
        if (urlEl.offsetWidth > maxWidth){
            urlEl.style.width = maxWidth.toString() + 'px';
        }

        tbwUpd.forEach(function(el){el.remove()});
        linkEl.querySelector('br:first-child').remove();

    }

});}

Просто поместите вышеуказанное в новую папку, добавьте icon1. png и icon2.png и используйте Chrome, чтобы упаковать его в расширение. Чтобы избежать предупреждения разработчика Chrome, используйте упакованное расширение (а не распакованное) и внесите белый список идентификатора расширения в реестр.

Единственным недостатком этого является небольшая задержка при переформатировании результатов поиска. Кроме того, результаты объявления не отформатированы, но я не думаю, что это имеет значение, поскольку они являются только рекламой.

Answer 2

Похоже, это должно работать:

.NJjxre {
    position: relative !important;
}