Breadcrumbs

[Agust1337]

Well this is a long reading tutorial for eyes on how to make maybe advanced webbrowser contextmenu.

What I will be showing you in this tutorial is, how to get various properties of HtmlElements based on the mouse position and how to change the various properties of HtmlElements.

In this purpose we are going to use the normal webbrowser control or what ever you call it, but I am aware people are maybe using some class they made for adding everything like tab's and some controls, but it shouldn't be really difficult to add some codes to the classes but on we go.

What controls are needed:
*Webbrowser called wb(or what you called it, I just call it wb cause its easy to remember)
*ContextMenu/Strip named mMenu(once again or something you like)

Items in the ContextMenu/Strip:
*Open Link(named mnuOpen)
*Open Link Location(named mnuLinkLoc)
*Add a separator(by writing "-")
*Save Image As...(mnuSaveImg)
*Copy Image Location(mnuCopyImgLoc)
*Open Image(mnuOpenImg)

Now you have probable made the "IsWebbrowserContextMenuEnabled" property to false, but if not do it now.
Moving on, if your using ContextMenuStrip you can easily add it through the property called "ContextMenuStrip", but if you are using a ContextMenu you'll have to go to Form_Load and put this simple code in it:

Code: Select all

wb.ContextMenu = ContextMenu1()

Moving on to the coding:
As you might know, the webbrowser control doesn't support MouseMove or Down property event, so we have to do it by codes, so we have to declare a HtmlDocument. Get to the code view if you haven't and write this or copy:

Code: Select all

Private WithEvents CurDoc as HtmlDocument
Dim P as Point
Dim hEle as HtmlElemtn

Now when you are done with this, go to the WebBrowser_Navigated event and add this code:

Code: Select all

CurDoc = wb.Document

And then go to the CurDoc.MouseMove event and add this code:

Code: Select all

P  = new Point(MousePosition.X, MousePosition.Y)

What this code will do is telling our program to record where the mouse is on the webpage so it knows which element is being hovered.

Next go to mMenu.Opening or mMenu.Popup(if your using contextmenu) and add this code:

Code: Select all

hEle = CurDoc.GetElementFromPoint(P)
     If hEle.TagName = "A" Then
          mnuOpen.Visible = false
          mnuLinkLoc.Visible = false
     else
         mnuOpen.Visible = true
          mnuLinkLoc.Visible = true
     End If
hEle = CurDoc.GetElementFromPoint(P)
    If hEle.TagName = "A" Then
        mnuSaveImg.Visible = True
        mnuCopyImgLoc.Visible = True
        mnuOpenImg.Visible = true
    Else
        mnuSaveImg.Visible = False
        mnuCopyImgLoc.Visible = False
        mnuOpenImg.Visible = False
    End If
    If hEle.TagName = "IMG" Then
        mnuSaveImg.Visible = True
        mnuCopyImgLoc.Visible = True
        mnuOpenImg.Visible = true
    Else
        mnuSaveImg.Visible = False
        mnuCopyImgLoc.Visible = False
        mnuOpenImg.Visible = False
    End If

What this will do is is that where hEle and P come in action and makes hEle(the selected HtmlElement, lets say an image, link or maybe a button) what ever HtmlElement the cursor is over on the webbrowser, now because we made a P(as mouse Position) where the cursor was on the webpage when it was moved.

Now as you might know all links in HTML are declared like this:

Code: Select all

<a href="http://www.codenstuff.com"> Visit CodenStuff</a>

And all Images are delcared like this:

Code: Select all

<img src=http://www.codenstuff.com/forum/styles/prodark/imageset/logoplain.png>

So now lets get to the part where the code checks the TagName of hEle, and sees wethere its a link, image or nothing. If it is an image or a link it will show the "mnuSaveImg, MnuCopyImgLoc And OpenImg" in our contextmenu/strip.

Now debug your browser and test it out, you'll notice that there is a different item for links and for images on our contextmenu/strip. But they are not functioned. So stop debugging and start coding again.

Moving on to the links.

On the mnuOpen click event add this code:

Code: Select all

wb.Navigate(hEle.GetAttribute("href"))

What this code will does is that it tells the browser to navigate to the selected link when the item is clicked(on the contextmenu/strip).

And on the mnuCopyLink click event add this code:

Code: Select all

Clipboard.SetText(hEle.GetAttribute("href"))

It's obvious what this code does, but if you don't know it will copy the selected Link.

Moving on to the images.

On the mnuSaveImg click event add this code:

Code: Select all

Dim Source as string = hEle.GetAttribute("src")
Dim Path as string = "C:\Images\" 'This can be changed to SaveFileDialog1.InitialDirectory I guess.
My.Computer.Network.DownloadFile(Source, Path)

What this code will do it tells our program to get the "src" attribute of the image and it declares it as a string. Next it will be saved on our desired path or path located with a SaveFileDialog, but in this case it's what we want. Then it will download the image to the user's computer.

Now when this is all done, we are nearly finished, but there are few left.

Next go to the mnuCopyImgLoc click event and add this code:

Code: Select all

Clipboard.SetText(hEle.GetAttribute("src"))

I have explained what copy link will do, its the same but this one will copy the image not link.

Last and not least, open up the mnuOpenImg click event and add this code:

Code: Select all

wb.Navigate(hEle.GetAttribute("src"))

This will tell the browser to navigate to the selected image's source location.

Now we're finished!
Thanks for reading my tutorial, I hope you like it cooll;

[Dummy1912]

Nice Tut agust
well done

Dummy1912

[Usman55]

Awesome tutorial, covers everything we need (especially web developers!)

[XTechVB]

nice tut dude keep it up!

[Aragornn46]

can someone make a project and put 6 credits on it with this? i download it!

[Agust1337]

Sure, just give me few minutes

[Aragornn46]

agust,i pmed you with what i want...i give you 20 credits....please help me

[GaiaonlineHD]

Well this is a long reading tutorial for eyes on how to make maybe advanced webbrowser contextmenu.

What I will be showing you in this tutorial is, how to get various properties of HtmlElements based on the mouse position and how to change the various properties of HtmlElements.

In this purpose we are going to use the normal webbrowser control or what ever you call it, but I am aware people are maybe using some class they made for adding everything like tab's and some controls, but it shouldn't be really difficult to add some codes to the classes but on we go.

What controls are needed:
*Webbrowser called wb(or what you called it, I just call it wb cause its easy to remember)
*ContextMenu/Strip named mMenu(once again or something you like)

Items in the ContextMenu/Strip:
*Open Link(named mnuOpen)
*Open Link Location(named mnuLinkLoc)
*Add a separator(by writing "-")
*Save Image As...(mnuSaveImg)
*Copy Image Location(mnuCopyImgLoc)
*Open Image(mnuOpenImg)

Now you have probable made the "IsWebbrowserContextMenuEnabled" property to false, but if not do it now.
Moving on, if your using ContextMenuStrip you can easily add it through the property called "ContextMenuStrip", but if you are using a ContextMenu you'll have to go to Form_Load and put this simple code in it:

Code: Select all

wb.ContextMenu = ContextMenu1()

Moving on to the coding:
As you might know, the webbrowser control doesn't support MouseMove or Down property event, so we have to do it by codes, so we have to declare a HtmlDocument. Get to the code view if you haven't and write this or copy:

Code: Select all

Private WithEvents CurDoc as HtmlDocument
Dim P as Point
Dim hEle as HtmlElemtn

Now when you are done with this, go to the WebBrowser_Navigated event and add this code:

Code: Select all

CurDoc = wb.Document

And then go to the CurDoc.MouseMove event and add this code:

Code: Select all

P  = new Point(MousePosition.X, MousePosition.Y)

What this code will do is telling our program to record where the mouse is on the webpage so it knows which element is being hovered.

Next go to mMenu.Opening or mMenu.Popup(if your using contextmenu) and add this code:

Code: Select all

hEle = CurDoc.GetElementFromPoint(P)
     If hEle.TagName = "A" Then
          mnuOpen.Visible = false
          mnuLinkLoc.Visible = false
     else
         mnuOpen.Visible = true
          mnuLinkLoc.Visible = true
     End If
hEle = CurDoc.GetElementFromPoint(P)
    If hEle.TagName = "A" Then
        mnuSaveImg.Visible = True
        mnuCopyImgLoc.Visible = True
        mnuOpenImg.Visible = true
    Else
        mnuSaveImg.Visible = False
        mnuCopyImgLoc.Visible = False
        mnuOpenImg.Visible = False
    End If
    If hEle.TagName = "IMG" Then
        mnuSaveImg.Visible = True
        mnuCopyImgLoc.Visible = True
        mnuOpenImg.Visible = true
    Else
        mnuSaveImg.Visible = False
        mnuCopyImgLoc.Visible = False
        mnuOpenImg.Visible = False
    End If

What this will do is is that where hEle and P come in action and makes hEle(the selected HtmlElement, lets say an image, link or maybe a button) what ever HtmlElement the cursor is over on the webbrowser, now because we made a P(as mouse Position) where the cursor was on the webpage when it was moved.

Now as you might know all links in HTML are declared like this:

Code: Select all

<a href="http://www.codenstuff.com"> Visit CodenStuff</a>

And all Images are delcared like this:

Code: Select all

<img src=http://www.codenstuff.com/forum/styles/prodark/imageset/logoplain.png>

So now lets get to the part where the code checks the TagName of hEle, and sees wethere its a link, image or nothing. If it is an image or a link it will show the "mnuSaveImg, MnuCopyImgLoc And OpenImg" in our contextmenu/strip.

Now debug your browser and test it out, you'll notice that there is a different item for links and for images on our contextmenu/strip. But they are not functioned. So stop debugging and start coding again.

Moving on to the links.

On the mnuOpen click event add this code:

Code: Select all

wb.Navigate(hEle.GetAttribute("href"))

What this code will does is that it tells the browser to navigate to the selected link when the item is clicked(on the contextmenu/strip).

And on the mnuCopyLink click event add this code:

Code: Select all

Clipboard.SetText(hEle.GetAttribute("href"))

It's obvious what this code does, but if you don't know it will copy the selected Link.

Moving on to the images.

On the mnuSaveImg click event add this code:

Code: Select all

Dim Source as string = hEle.GetAttribute("src")
Dim Path as string = "C:\Images\" 'This can be changed to SaveFileDialog1.InitialDirectory I guess.
My.Computer.Network.DownloadFile(Source, Path)

What this code will do it tells our program to get the "src" attribute of the image and it declares it as a string. Next it will be saved on our desired path or path located with a SaveFileDialog, but in this case it's what we want. Then it will download the image to the user's computer.

Now when this is all done, we are nearly finished, but there are few left.

Next go to the mnuCopyImgLoc click event and add this code:

Code: Select all

Clipboard.SetText(hEle.GetAttribute("src"))

I have explained what copy link will do, its the same but this one will copy the image not link.

Last and not least, open up the mnuOpenImg click event and add this code:

Code: Select all

wb.Navigate(hEle.GetAttribute("src"))

This will tell the browser to navigate to the selected image's source location.

Now we're finished!
Thanks for reading my tutorial, I hope you like it cooll;

Nice tut but im a noob can any one help me with this like a step - step tutorial. or can some one do the coding simpler or just do it for my WebBrowser?

[Usman55]

Did you really had to quote the whole thing? You could have simply posted a comment.

[MrAksel]

This is a step-by-step tutorial GaiaonlineHD.
Agust, there is a spelling error that may ruin this for someone, in your second code block it says HtmlElmtn instead of HtmlElement ;) Great tutorial cooll;