How to Grab Components From Any Web Page

HTML & CSS
1

I want to grab the source of an image or other page elements on any web page ie yahoo, google, etc. I want to do this simply by clicking on the page elements. I know about the Chrome Dev Tool but I don’t want to use it for this purpose as it is too much of a hassle. I thought about doing this by opening a web page in an Iframe then use Javascript to get what I need. The issue is some websites don’t allow you to open them in an Iframe or other similar things. Even if I’m able to open a web page in an Iframe, I’m not sure how to prevent from triggering the default functionality of the click event and run my own script when the click event fires. Please share your thoughts on if whatI’m trying to do is possible.

2

Hi there oangodd,

I grab the source of an image by right clicking on it
and then selecting and clicking Copy Image Link
in Firefox or Copy lmage address in Chrome.

I would hazard a guess that similar options will be
available in other modern browsers. :biggrin:

3

Hi, Thanks for replying. You said “I grab the source of an image by right clicking on it and then selecting and clicking Copy Image Link.” Well, that’s the exact thing I want to avoid. I want to make it as simple as just clicking or double cling on a page element to get its markup, source, etc.

4

Hi there oangodd,

Well, you should have typed I want to grab the markup.

In Firefox I right click Inspect to view it.

For example I clicked on the Sitepoint Logo and got this…

<img
 id="site-logo" 
class="logo-small" 
src="https://global.discourse-cdn.com/sitepoint/original/3X/a/f/af75620e542ed535a2576493d271031fc6adb011.png" 
width="36" 
alt="SitePoint Forums | Web Development &amp; Design Community">
5

Hi, thanks for your reply. As I stated earlier, I would like to grab not just markup but any component by clicking or double clicking it. The main goal is to make copying the source of an image or the markup of an element as easy as clicking or double clicking on it.

6
7

You can absolutely do this.

First, open up Visual Studio.

Now write your own browser application.

Problem solved.

Good luck browsing with your new application, though, as you’ve now changed the behavior of clicking on a link from “follow this link” to “copy the markup of this link”.

8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.