Question

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

我发现我可以点击右键＆gt; 'inspect element'并继续编辑我正在查看的网页对应的HTML浏览器版本。我认为这意味着我可以编辑我看到的内容并与之交互。我是否可以创建一个脚本，该脚本从书签栏上的按钮开始，该按钮注入了一个链接到我制作的Web服务的Iframe？（并在使用后自行删除）。
我可以使用chrome扩展来完成此任务吗？我没有创建扩展的经验，所以我不知道他们有什么能力 - 虽然我不反对学习。

哪一种最好？如果他们甚至是有效的想法。或者还有另一种我还不知道的方式吗？

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

Answer 1

是的，你绝对可以这样做。您问的是 Bookmarklets 。

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

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

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>那样执行所指的内容，所以这里有一些步骤可以帮助您，只需添加：

创建一个XMLHttpRequest对象并通过它请求页面。

使元素的innerHTML字段保留前一个请求的resultString， aka 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了解更多信息。

将HTML注入现有网页

2 个答案: