Page 1 of 1

Advanced Webbrowser ContextMenu With links & image sources, etc Rate Topic: ****- 1 Votes

#1 Jack Eagles1  Icon User is offline

  • Pugnacious Penguin (inspired by no2pencil)
  • member icon

Reputation: 183
  • View blog
  • Posts: 1,152
  • Joined: 10-December 08

Posted 22 April 2010 - 06:06 PM

Hi, this is quite an advanced tutorial on how to create a context menu on a browser, with some advanced features.

Before this tutorial, you should have:

-Some knowledge of the webbrowser control.
-Some knowledge of how HTML elements are made.
-Knowledge of how to use the code designer in VB2008

In this tutorial I will show you:

-How to get various properties of HtmlElements based on the position of the mouse
-How to change various properties of HtmlElements

For the purposes of this tutorial, we are only going to use a normal webbrowser control, although I am aware that some people will have a class for the webbrowser control and a class for the form, and then a tabcontrol, so that a tabbed webbrowser can be created rather than just adding a webbrowser to the form. It shouldn't be difficult to change the code in this tutorial to the code you will need to use for a tabbed webbrowser.

So, firstly, we need to add a few controls to our form:

Controls to add:

-Webbrowser, name "wbMain"
-ContextMenuStrip, name "CMenuMain"
-Textbox, name "txtURL"
-Button, name "btnGo"

Items to add to your context menu (CMenuMain):
"Link"
"Image"
"Remove this object"

Items to add to the "Link" menu:
"Open Link"
"Copy Link Location"

Items to add to the "Image" menu:
"Save Image"
"Copy Image Location"
"View Image"

Your context menus should now look like this:
Posted Image

Now, because we want to have our own context menu on the webbrowser, we need to change some of its properties. So go to the properties of the webbrowser control, and change the "IsWebbrowserContextMenuEnabled" property to "False".

Next we need to set the webbrowser's context menu to our own custom one, "CMenuMain". To do this, change the "ContextMenuStrip" property of the browser to "CMenuMain".

Now to add some basic navigation functionallity, double click btnGo, and add this code to the Button.Click event:
wbMain.Navigate(txtURL.Text)


This code will tell the webbrowser to navigate to whatever text is in the URL textbox whenever the button is clicked.


Now press F5 to debug your project, and navigate to "http://www.google.com". You can right click now, and your custom context menu should show, but there will be no function of the context menu buttons. Now it's time to add that functionallity, so stop debugging, and return to the designer.

As the WebBrowser control does not support events such as MouseMove or MouseDown, we need to declare our own Htmldocument. Switch to the Code View, and outside of any Subs, but inside the class for your form, add this code:
Private WithEvents CurrentDocument As HtmlDocument
Dim MousePoint Point
Dim Ele as HtmlElement


This code will add some extra events to our form which will ultimately let us control the webbrowser document.
We will use the MousePoint later.
We will use the Ele later.

Now double click your webbrowser, and go to the Navigated event of the webbrowser. Add this code:
CurrentDocument = wbMain.Document


This code tells the CurrentDocument HtmlDocument which we just declared to always be the same as the Webbrowser document.

Next go to the Currentdocument.MouseMove event. Add this code:
MousePoint = New Point(e.MousePosition.X, e.MousePosition.Y)


This tells the program to change the record where the mouse is on the document (so it knows where to get the element that the contextmenu has been shown over).

Now, go to the CMenuMain.Opening event, and add this code:
    ele = Currentdocument.GetElementFromPoint(MousePoint)
        If ele.TagName = "A" Then
            LinkToolStripMenuItem.Visible = True
        Else
            LinkToolStripMenuItem.Visible = False
        End If
        If ele.TagName = "IMG" Then
            ImageToolStripMenuItem.Visible = True
        Else
            ImageToolStripMenuItem.Visible = False
        End If


This is where ele and MousePoint come into action. This code makes ele (the HtmlElement, say an image, a link or a button) whatever HtmlElement the mouse is over on the webbrowser, because we made MousePoint wherever the mouse was on the document when it moved.

In HTML, Links are declared like this:
<a href="http://www.dreamincode.net">DreamInCode!</a>


And Images are declared like this:
<img src="http://www.dreamincode.net/favicon.ico">



So the next part of the code checks the tagname of ele (the HtmlElement the contextMenu has been opened over), and sees whether it is a link or an image, or if it is neither. If it is an image or a link, it will show the respective items on the context menu.

Press F5 to debug, and have a right click on links and images. You'll notice that there is a different item for links and for images on the context menu, but there is no function for any of the items, so stop debugging, and carry on with the tutorial :P .

From here forward, if I refer to 'The Image', or 'The Link', just assume that I mean the link or image which the context menu has opened over.

So now we need to add functions to the buttons on the context menus:

Now go to the OpenLinkToolStripMenuItem.Click event, and add this code:
wbMain.Navigate(ele.GetAttribute("href"))


This code tells the webbrowser to navigate to whatever the href (link target) attribute of the link.

Now go to the CopyLinkLocationToolStripMenuItem.Click event, and add this code:
  Clipboard.SetText(ele.GetAttribute("href"))


This code sets the clipboard text to whatever the target of the link is.


Next go to the SaveImageToolStripMenuItem.Click event and add this code:
Dim ImageSource as String = ele.GetAttribute("src")
Dim SavePath as String = InputBox("Please enter where you want to save this image, including the file name and extension")
My.Computer.Network.DownladFile(ImageSource, SavePath)


First, this code tells the program to get the "src" attribute of the image, and declares it as a string.
Next it shows an inputbox asking the user where he/she wants to save the image.
Then it downlaods the image to the computer using the user-defined options.

After all that's done, we're nearly finished. Go to the CopyImageLocationToolStripMenuItem.Click event, and add this code:
Clipboard.SetText(ele.GetAttribute("src"))


This code sets the text on the clipboard to the source of the image.

Now it's the last piece of code! Go to the ViewImageToolStripMenuItem.Click event, and add this code:
wbMain.Navigate(ele.GetAttribute("src"))


This code tells the webbrowser to navigate to the source of the image.


So now we're finished! I hope you enjoyed my tutorial. There's lots more on webbrowsers coming soon.

This post has been edited by Jack Eagles1: 26 April 2010 - 08:16 AM


Is This A Good Question/Topic? 3
  • +

Replies To: Advanced Webbrowser ContextMenu

#2 Guest_Omar*


Reputation:

Posted 01 May 2010 - 08:12 PM

This code is nice but the portion about saving an image is flawed. Saving an image in this way will only work if the image is static. I attempted to save a dynamic image it saved a different image than the one that I had attempted to save - because re-accessing it caused the image to change.
Was This Post Helpful? 0

#3 Jack Eagles1  Icon User is offline

  • Pugnacious Penguin (inspired by no2pencil)
  • member icon

Reputation: 183
  • View blog
  • Posts: 1,152
  • Joined: 10-December 08

Posted 02 May 2010 - 03:59 AM

Yep, but what percentage of images on the web are dynamic? I mean come on this is going to work in 99.9% of situations!
Was This Post Helpful? 0
  • +
  • -

#4 Guest_Tomas*


Reputation:

Posted 18 August 2010 - 04:48 PM

i followed this guide to creating a custom context menu for my own web browser the problem is that the mouse points is not getting anything.

Can any one help
Was This Post Helpful? 0

#5 Guest_Yasir Godil*


Reputation:

Posted 30 August 2010 - 10:22 AM

The TagName for the button and textbox in "INPUT". Is there a way I can differentiate between the two control that either textbox was clicked or a button was clicked?
Was This Post Helpful? 0

#6 Jack Eagles1  Icon User is offline

  • Pugnacious Penguin (inspired by no2pencil)
  • member icon

Reputation: 183
  • View blog
  • Posts: 1,152
  • Joined: 10-December 08

Posted 19 October 2010 - 03:43 PM

@Guest Tomas - It seems to have worked for other people. Try doing it again, and if it doesn't work, PM me with some details.
@Guest Yasir Godil - If there are any attributes of the two elements which are different, then yes, you can differentiate between the two.
Was This Post Helpful? 0
  • +
  • -

#7 DavidCon999  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 11-October 11

Posted 12 October 2011 - 11:36 AM

Your tutorial is for exactly what I am trying to do except that I have an issue that I've not been able to resolve. If I use your code on a web page that contains a link (A element) that is inside a DIV element then when the user right clicks on the link the code returns the DIV not the nested A. Do you know how I can get to the A rather than DIV?

This post has been edited by DavidCon999: 12 October 2011 - 11:37 AM

Was This Post Helpful? 0
  • +
  • -

#8 DavidCon999  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 11-October 11

Posted 14 October 2011 - 10:29 PM

View PostDavidCon999, on 12 October 2011 - 11:36 AM, said:

Your tutorial is for exactly what I am trying to do except that I have an issue that I've not been able to resolve. If I use your code on a web page that contains a link (A element) that is inside a DIV element then when the user right clicks on the link the code returns the DIV not the nested A. Do you know how I can get to the A rather than DIV?


PRoblem solved. I was not using your tutorial exactly as shown and had an issue that I've not fully understood but having changed my code to match exactly how your tutorial works I now have a working solution. Many thanks for a simple to understand tutorial.
Was This Post Helpful? 0
  • +
  • -

#9 Phoenix22  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 01-May 12

Posted 01 May 2012 - 03:17 PM

Does not work for me. All elemts keep giving the error object refference not set to an instance of an object. I get this error everywhere there is the ele.getattribute code. I think its because of this code:

CurrentDocument = wbMain.Document


I may have put it in the wrong place because I am uncertain of where it goes. My browser uses tab controls eg.

CType(Tabcontrol1.SelectedTab.Controls.Item(0), Webbrowser)


to do things like navigate and go back and forward so i cannot find a domcument complete.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1