Манипулирование страницы результатов Google, чтобы добавить раздел на РИТАХ

Question

Я строй Chrome Extension, где, на основе поискового запроса я хочу, чтобы отобразить некоторые вещи (давайте предположим links сейчас) на РИТЕ в Google страница результатов. Очень похоже на то, что делает Wajam.

Я понимаю, что для таких задач необходимо использовать Content-Scripts, что является ясным и точным.

Проблема заключается в том, что Google, кажется, возвращает divs с разными идентификаторами каждый раз, основываясь на запросе в своем html. Например, если вы ищете имя фильма, в html, похоже, есть другой набор идентификаторов, в отличие от, скажем, при поиске сообщения об ошибке Javascript.

Интересно, как Wajam реализовал свой плагин, который работает так надежно и отображает ссылки на RHS.

Как я должен идти об этом? Любые конкретные идентификаторы, которые вы можете увидеть в html, который я могу использовать или надежно построить?

Для того, чтобы быть понятным для людей, которые не в Chrome Extensions, вопрос не требует знания архитектуры расширения/API. Это, по-видимому, простой вопрос html/javascript/css.

Answer 1

Я ничего о Chrome Extensions не знаю Развитию, но я пытался понять Google страницы результатов структуры, и я надеюсь, что поможет вам:

Каждый результат страница Google имеет #rhs DIV, даже если есть нет дополнительной информации справа. Этот div имеет уникальный идентификатор, поэтому я думаю, что внутри него будет легко размещать динамический контент.

Я попытался с инструментами Web Developer, и работает очень хорошо:

Я думаю, вы просто должны добавить содержимое в этой Div, чтобы получить то, что вы хотите: в «различные идентификаторы на основе запрос "может быть дочерним элементом этого родителя и уникальным #rhs div. Поэтому я не думаю, что вам нужно заботиться об этих дочерних «случайных id» divs, просто добавьте свой контент (пользовательские css, изображения, видео ...) в этом #rhs div :)

если вы хотите попробовать веб-инструмент разработки: просто вставить этот код вместо оригинального <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> 

, и вы получите тот же результат, как и я.

Надеюсь, я помог вам! :)