javascript - Injecting HTML into existing web pages - Stack Overflow

admin管理员组

文章数量:1305513

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 acplish 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 acplish 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 ment, 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.

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 acplish 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 acplish 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 ment, 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.

• javascript
• html

Share Improve this question Follow edited Jun 25, 2014 at 18:56 pastrypuncher asked Jun 25, 2014 at 18:32 pastrypuncherpastrypuncher 11511 gold badge11 silver badge99 bronze badges 4

• Could you clarify with more details about how you envision this system working? – R. Barzell Commented Jun 25, 2014 at 18:35
• Wele to Stack Overflow! Check out the help section for examples of what kinds of questions to ask or not ask. – Evan Davis Commented Jun 25, 2014 at 18:35
• What is this service you are looking to perform, sounds like you want to scrape web content. I would remend looking into php if this is the case. – Mark Commented Jun 25, 2014 at 18:36
• You are better of using chrome extension. There are many apps which inject html or modify them, so you could probably do what you want. However since your new to web development, this will be a bit of a challenge to you – Krimson Commented Jun 25, 2014 at 18:37

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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./"
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.

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./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.

本文标签： javascriptInjecting HTML into existing web pagesStack Overflow