2

我正在构建一个Chrome Extension, where in，基于我想在 Google 结果页面的RHSlinks上显示一些东西（我们现在假设）的搜索查询。与Wajam所做的非常相似。

我知道我需要使用Content-Scripts来完成这些任务，这很清楚而且很好。

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

我想知道Wajam是如何实现它的插件的，它工作得如此可靠并在 RHS 上显示链接。

在此处输入图像描述

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

只是为了让那些不熟悉的人清楚Chrome Extensions，这个问题不需要扩展架构/API的知识。这是一个看似简单的html/javascript/css相关问题。

4

1 回答 1

2

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

每个 google 结果页面都有一个#rhsdiv，即使右侧没有其他信息。这个 div 有一个唯一的 id，所以我认为在里面放动态内容会很容易。

我已经尝试过使用 Web Developer Tools，效果很好： 截图

我认为您只需将内容附加到此 div 即可获得所需的内容：“基于查询的不同 ID”可能是此父级和唯一#rhsdiv 的子级。所以我认为你不必关心这些孩子的“随机 id”div，只需在这个#rhsdiv 中附加你的内容（自定义 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>

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

希望我对你有帮助！:)

于 2013-10-09T13:35:59.043 回答