CODEWITHSUNDEEP
javascriptjqueryhtmlcssgoogle-chrome-extension
pavanlimo
pavanlimo

Reputation: 4252

Manipulate Google results page to add a section on the RHS

I'm building a Chrome Extension, where in, based on the search query I want to display some stuff(let's assume links for now) on the RHS of the Google results page. Very similar to what Wajam does.

I understand I need to use Content-Scripts for such tasks, which is clear and fine.

The problem is, Google seems to return divs with different IDs each time based on the query in its html. For instance if you search for a movie name, there seems to be different set of IDs in the html as opposed to, let's say when you search for a Javascript error message.

I wonder how Wajam has implemented its plugin, which works so reliably and displays links on the RHS.

enter image description here

How should I go about it? Any specific IDs you can see in the html that I can use or build upon reliably?

Just to be clear for folks who are not into Chrome Extensions, the question doesn't require knowledge of Extension architecture/APIs. It's a seemingly simple html/javascript/css related question.

Upvotes: 2

Views: 2414

Answers (1)

risk
risk

Reputation: 918

I don't know anything about Chrome Extensions developement, but I tried to understand Google results page structure, and I hope that will help you :

Every google result page has a #rhs div, even if there are no additional informations on the right. This div has an unique id, so I think it would be easy to put dynamical content inside.

I've tried with Web Developer Tools, and that worked very well : sreenshot

I think you'll just have to append content to this div to get what you want : the "different IDs based on the query" may be children of this parent and unique #rhs div. So I don't think you have to care about these children "random id" divs, just append your content (custom css, images, videos...) in this #rhs div :)

if you want to try with a Web Developer Tool : just paste this code instead of the original <div id="rhs">...</div>

<div id="rhs" style="
    border: 2px solid red;
    padding: 16px;">

    Put whatever you want here

    <div style="
        font-weight: 700;
        padding: 12px;
        border: 1px solid #aaa;
        background-color: #eee;
        margin: 20px;
        -webkit-box-shadow:0 1px 2px rgba(34,25,25,0.4);
        -moz-box-shadow:0 1px 2px rgba(34,25,25,0.4);
        box-shadow:0 1px 2px rgba(34,25,25,0.4);
        font-size: 1.4em;
    ">

        Custom CSS

    </div>

    <img src="http://myrrix.com/wp-content/uploads/2012/06/stackoverflow.png"> images
    <iframe id="ytplayer" type="text/html" width="340" height="390" src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=0&amp;origin=http://example.com" frameborder="0"></iframe>

</div>

and you'll get the same result as me.

Hope I helped you ! :)

Upvotes: 2

Related Questions