javascript - 操纵 Google 结果页面以在 RHS 上添加一个部分

Question

我正在构建一个 Chrome 扩展，其中，基于搜索查询，我想在 RHS。与Wajam非常相似

我知道我需要使用 Content-Scripts对于这样的任务，这很清楚。

问题是，Google 似乎每次都根据其 html 中的查询返回具有不同 ID 的 divs。例如，如果您搜索电影名称，html 中似乎有不同的 ID 集，而当您搜索 Javascript 错误消息时。

我想知道如何Wajam已经实现了它的插件，它工作非常可靠，并在 RHS 上显示链接。

我该怎么办？您可以在 html 中看到我可以可靠地使用或构建的任何特定 ID？

对于那些不喜欢 Chrome Extensions 的人来说，这个问题不需要需要扩展架构/API 的知识。这是一个看似简单的html/javascript/css相关问题。

Answer 1

我对 Chrome 扩展程序开发一无所知，但我试图了解 Google 结果页面结构，希望对您有所帮助:

每个谷歌结果页面都有一个 #rhs div，即使右边没有附加信息。这个 div 有一个唯一的 id，所以我认为把动态内容放在里面会很容易。

我尝试过使用 Web 开发人员工具，效果非常好:

我认为您只需将内容附加到此 div 即可获得所需内容:“基于查询的不同 ID”可能是此父项的子项并且是唯一的 #rhs分区所以我认为您不必关心这些子“随机 id”div，只需在此 #rhs 中附加您的内容(自定义 css、图像、视频...)分区 :)

如果您想尝试使用 Web 开发人员工具:只需粘贴此代码而不是原来的 <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>

你会得到和我一样的结果。

希望对你有所帮助! :)