Injecting HTML into existing web pages

Question

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.

Answer 1

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.

Answer 2

You can do what you refer to as like an <iframe>, so here are some steps that may help you, simply put:

1. Create an XMLHttpRequest object and make a request for a page trough it.
2. Make the innerHTML field of an element to hold the resultString of the previous request, aka the HTML structure.

Lets assume you have an element with the id="Result" on your html. The request goes like this:

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);

Here's an improved version in the form of a fiddle.

When you're done, you can delete that injected HTML by simply:

Result.innerHTML = '';

And then anything inside it will be gone.

However, you can't make request to other servers due to request policies. They have to be under the same domain or server. Take a look at this: Using XMLHttpRequest on MDN reference pages for more information.