将HTML注入现有网页 [英] Injecting HTML into existing web pages

问题描述

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

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

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

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

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

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

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

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

 书签=http://chasemoskal.com/
 Bookmarklet =javascript ：（function（）{alert（'我可以做任何事！'）}）（）; 
  

就是这样。您可以创建一个书签链接，该链接可以点击并拖动到书签栏上，如下所示：

 < a href = javascript：（function（）{alert（'everything is possible'）}）（）;> Bookmarklet< / a> 
  

Bookmarklets的大小可能有限，但是，您可以从书签中加载整个外部脚本。 / p>

I'm interested in the concept of injecting a bit of HTML into existing web pages to perform a service. The idea is to create an improved bookmarking system - but I digress, the specific implementation is unimportant. I'm quite new to web development and so I have no definite idea as to how to accomplish this, thought I have noticed a couple of possibilities.

• I found out I can right click > 'inspect element' and proceed to edit my browser's version of the HTML corresponding with the webpage I'm viewing. I assume that this means I can edit what I see and interact with. Could I possibly create a script that ran from a button on bookmarks bar that injected an Iframe which linked to a web service of my making? (And deleted itself after being used).

• Could I possibly use a chrome extension to accomplish this? I have no experience with creating extensions and so I have no clue what they're capable of - though I wouldn't be against learning.

Which of these would be best? If they are even valid ideas. Or is there another way that I've yet to know of?

EDIT: The goal is to have a user click a button in the browser if they would like to save this page. They are then presented an interface visually independent of the rest of the page that allows them to categorize this webpage according to their interests. It would take the current link, add some information such as a comment, rating, etc. and add it to the user's data. This is meant as a sort of side-service to a website whose purpose would be to better organize and display the browsing information of the user.

解决方案

Yes, you can absolutely do this. You're asking about Bookmarklets.

A bookmarklet is just a bookmark where the URL is a piece of JavaScript instead of a URL. They are very simple, yet can be capable of doing anything to a web page. Full JavaScript access.

A bookmarklet can be engaged on any web page -- the user simply has to click the bookmark(let) to launch it on the current page.

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

That's all it is. You can create a bookmarklet link which can be clicked-and-dragged onto a bookmark bar like this:

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

Bookmarklets can be limited in size, however, you can load an entire external script from the bookmarklet.

这篇关于将HTML注入现有网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！