Comment faire en sorte que la nouvelle recherche Google ressemble à l'ancienne recherche Google à l'aide de CSS ou JavaScript?
J'essaie donc de faire en sorte que les nouveaux résultats de recherche Google ressemblent aux anciens résultats de recherche Google.
Le nouveau design a le lien de domaine au-dessus du titre de la page, ce qui est vraiment déroutant. Le lien de domaine était également coloré en vert, ce qui rendait la page de résultats de recherche beaucoup plus facile à lire, mais maintenant ce n'est plus le cas.
Voici comment je veux que la page de résultats de recherche Google ressemble:
Donc, comme vous pouvez le voir, le lien est vert et positionné sous le titre pour chaque résultat. C'est ce que je veux.
J'ai donc créé une extension et jusqu'à présent j'ai changé la couleur du lien de domaine en vert (comme avant) en utilisant simplement CSS:
.iUh30{
color:green !important;
}
Cependant, je veux que ce lien de domaine soit en dessous du titre de la recherche (tel qu'il était auparavant).
Est-il possible de le faire en utilisant CSS ou JavaScript dans mon extension?
Il existe une extension existante ici:
Https://chrome.google.com/webstore/detail/bring-classic-back/klnhfpnhipgjannlklfcnhonncppnoae
Mais cela ne fonctionne pas correctement avec la dernière mise à jour de Google.
Merci d'avoir lu.
Mise à jour: Je peux réaliser la plupart de ce que je veux en utilisant ceci pour mon fichier CSS:
.iUh30{
color:green !important;
}
.NJjxre {
position: relative !important;
width: 1000px;
}
Qui affiche parfaitement le lien Web. Le seul problème est le menu déroulant (utilisé pour sélectionner les pages mises en cache). Comment puis-je déplacer ce menu déroulant à droite de le lien web vert(ou le supprimer complètement sans laisser d'espace vacant où il serait normalement?)
2 answers
Me Semble que cela devrait fonctionner:
.NJjxre {
position: relative !important;
}
J'ai donc résolu cela (pour le moment) avec le code d'extension que je publierai ci-dessous. Le code est basé sur un TamperMonkey script que vous pouvez voir ici. Donc, si vous utilisez TamperMonkey, il n'est pas nécessaire de créer une extension car le script fonctionne à ce moment-là.
, Mais si vous préférez créer une extension pour cela, voici le code que j'utilise.
Notez que ce qui suit fonctionne avec Google.co.uk seulement. Si vous utilisez un autre domaine Google country, modifiez les sections correspondances et exclude_matches dans le manifeste.json accordindly.
Styles.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;}
Le Manifeste.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"
}]
}
Contenu.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();
}
});}
Il suffit de mettre ce qui précède dans un nouveau dossier, ajouter icon1.png et icon2.png et utilisez Chrome pour l'emballer dans une extension. Pour éviter l'avertissement de développeur Chrome, utilisez l'extension emballée (pas celle décompressée) et ajoutez l'ID d'extension à la liste blanche dans le registre.
, Le seul inconvénient est un petit délai pendant que les résultats de la recherche sont reformatés. De plus, les résultats des annonces ne sont pas formatés, mais je ne pense pas que cela compte car ce ne sont que des annonces.