DEV Community

Tech Notice
Tech Notice

Posted on • Updated on

Show website address number in google search page (css , js)

You may want to number the links in the search page of the google search page

Image description

These simple codes will help you fulfill your request

1) - The first thing to do is download this add-on to your browser => User JavaScript and CSS

2) - Go to google and search for anything you want
3) - Click on the icon at the top as in the image, then click on the link that the icon shows you

Image description

4) - A new window will open for you in addition, in the js field, put this code

`document.querySelectorAll(".g .yuRUbf h3").forEach((ele , i)=>{
let newDiv = document.createElement('div')
newDiv.setAttribute('class' , 'counterNum')
ele.prepend(newDiv)

document.querySelectorAll(".counterNum").forEach((ele , i)=>{
    ele.innerHTML = 1 + i
})
Enter fullscreen mode Exit fullscreen mode

})`

5) - in the css field, put this code

`h3.LC20lb.MBeuO.DKV0Md {
display: flex;
align-items: center;
}

.counterNum {
width: 2rem;
height: 2rem;
background-color: #383a40;
margin-left: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: white;
}`

6) - Now the code works with

By = Tech Notice

Latest comments (0)