将 HTML 注入现有网页

Question

我对将一些 HTML 注入现有网页以执行服务的概念感兴趣。这个想法是创建一个改进的书签系统——但我离题了，具体的实现并不重要。我对 Web 开发还很陌生，所以我不知道如何实现这一点，我想我已经注意到了几种可能性。

• 我发现我可以右键单击 >“检查元素”并继续编辑与我正在查看的网页对应的浏览器的 HTML 版本。我认为这意味着我可以编辑我看到的和与之交互的内容。我是否可以创建一个脚本，该脚本从书签栏上的一个按钮运行，该按钮注入了一个链接到我制作的 Web 服务的 iframe？ （并在使用后自行删除）。

• 我可以使用 chrome 扩展来完成此操作吗？我没有创建扩展的经验，因此我不知道它们的能力 - 尽管我不会反对学习。

其中哪一个最好？如果它们甚至是有效的想法。还是有其他我不知道的方法？

编辑：目标是让用户单击浏览器中的按钮以保存此页面。然后，他们会看到一个视觉上独立于页面其余部分的界面，允许他们根据自己的兴趣对该网页进行分类。它将获取当前链接，添加一些信息，例如评论、评级等，并将其添加到用户的数据中。这是对网站的一种辅助服务，其目的是更好地组织和显示用户的浏览信息。

Answer 1

是的，您绝对可以做到这一点。您问的是 Bookmarklets。

书签只是一个书签，其中 URL 是一段 JavaScript 而不是 URL。它们非常简单，但可以对网页做任何事情。完整的 JavaScript 访问权限。

书签可以在任何网页上使用——用户只需单击书签（let）即可在当前页面上启动它。

Bookmark    = "http://chasemoskal.com/"
Bookmarklet = "javascript:(function(){ alert('I can do anything!') })();"

就是这样。您可以创建一个书签链接，可以像这样单击并拖动到书签栏上：

<a href="javascript:(function(){ alert('anything is possible') })();">Bookmarklet</a>

Bookmarklet 的大小可以受到限制，但是，您可以从书签加载整个外部脚本。

Answer 2

你可以做你所说的像一个 <iframe>，所以这里有一些可能对你有帮助的步骤，简单地说：

1. 创建一个XMLHttpRequest 对象并通过它请求页面。
2. 使元素的innerHTML 字段保存上一个请求的resultString，又名 HTML 结构。

假设您的 html 中有一个带有 id="Result" 的元素。请求是这样的：

var req = new XMLHttpRequest();
req.open('GET', 'http://example.com/mydocument.html', true);
req.onreadystatechange = function (aEvt) {
    if (req.readyState == 4 && req.status == 200) {
        Result.innerHTML = req.responseText;
    }
};
req.send(null);

这是a fiddle 形式的改进版本。

完成后，您可以通过以下方式删除 注入 HTML：

Result.innerHTML = '';

然后里面的任何东西都会消失。

但是，由于request policies，您无法向其他服务器发出请求。它们必须在同一个域或服务器下。看看这个：Using XMLHttpRequest on MDN reference pages 了解更多信息。