How to: create your own web browser!
On the market there are 5 major browsers: Internet Explorer, Firefox, Chrome, Opera and Safari, with their advantages and disadvantages. My personal opinion is that Firefox provides the best platform for both development (webdesign) and displaying web pages). Now comes the question: why do I want a custom web browser? From my work experience I’ve learned that having a custom browser would have an advantage, providing extra features and tools specific to that website. Here’s some advantages:
1) Store the site locally (including database content and synchronize it whenever needed)
2) Have custom elements overlayed by air.
3) Provided better security on data (credentials) transfer.
4) Peer to Peer page sharing 
P2P-Web(tm)
Keep in mind that you want this solution to work for your website! The system requirements for this project are: Adobe Air (get it here) and any Adobe Flash IDE (Builder, CS5, Catalyst). I’m going to use CS5 for this project. To write the Actionscript file you can use any text editor. This is a basic example, really simple, real quick to do. It does not provide much functionality, it’s a proof of concept. So, lets begin.
First you might want to create a new Adobe AIR document inside Adobe Flash CS *3/4/5. After this step you might want to save your file on the local hard drive since we’re going to use this location to load our Main class file.
*Adobe Flash CS3 needs to have AIR installed separately;
Now we’re going to add a new textfield (static text field) on our stage, this being just for design, the Main class provides all the functionality.
Next we’re going to create a new file (keyboard shortcut: ctrl+n) and select Actionscript 3 Class. Save it in the exact place as your Adobe AIR document and name it “Main.as”. We will have to tell our Air application to load this class. To do so, simply look at the project properties and type in the Document Class field: Main (without .as). Now it’s time to get our hands dirty in AS3 code.
The code:
package{
import flash.display.MovieClip; //movieclip definition class
import fl.controls.Button; //class used for the Button compoment (the Button has to be in the library)
import fl.controls.TextInput; //class used for the TextInput compoment (the TextInput has to be in the library)
import flash.html.HTMLLoader; //class used in loading HTML component (flex equivalent for mx.controls.html);
import flash.events.MouseEvent; //mouse event class
import flash.net.URLRequest; //The url requests class used to navigate
public class Main extends MovieClip{
private var htmlPage:HTMLLoader; //declaring the container that will display the HTML content
private var go:Button; //button
private var urlAddress:TextInput; //text field where user writes the url
public function Main(){
htmlPage = new HTMLLoader();
htmlPage.y = 30;
htmlPage.x = 5;
htmlPage.width = 540;
htmlPage.height = 360;
this.addChild(htmlPage);
go = new Button();
go.label = "Go!"
go.x = 400;
go.y = 5;
go.addEventListener(MouseEvent.CLICK, loadPage); //registering a mouse click action to trigger the loadPage function
this.addChild(go); //adding the button to stage
urlAddress = new TextInput();
urlAddress.width = 250;
urlAddress.x = 120;
urlAddress.y = 5;
this.addChild(urlAddress); //adding the button to stage
}
private function loadPage(ev:MouseEvent):void{
var urlToLoad:URLRequest = new URLRequest(urlAddress.text); //create the URL request
htmlPage.load(urlToLoad); //load the page inside the HTML container
}
}
}
This should be the final result, the size is relatively small, since I’m working with the standard 550×400 resolution. You can change this according to your needs. The AIR HTML object can parse CSS, Javascript and even Flash content, making this the perfect tool for desktop applications. Please note that the HTML object is native to Adobe AIR and will NOT work on any other standard flash application. Remember to include “http://” on every URL, since there’s no extra code to automatically add it.
Here you can find the source code of the project.
Similar posts:
Similar posts:
yes there is a code to automaticaly add “http://” string for the url adress:
var adrtxt:String=urlAddress.text;
if (adrtxt.indexOf(“http://”,0) < 0)
{
adrtxt = "http://" + adrtxt + "/";
}
Hello:
Were you able to design your own web browser icon? Can individuals on the internet able to click on you browser and actually search the web?
Please let me know.
Thanks,
Mark
Yes you can design your own web browser icon and include it in the compiled version. You can also add search functionality. You can nearly replicate Google Chrome, when it comes to browsing.
Heya, I was following your tutorial on how to create your own web browser, is your source file and code still available?
The link says 404 page.
http://www.radu-paraschiv.info/blog/wp-content/uploads/2010/09/Custom_web_browser.rar
Hi, can you please fix the source code link? It’s not working. Thanks
Hello and thank you for your interest. I will fix the link very soon
Thanks for the post !!
However, as probably some other ppl have mentioned, I was not able to access the source code.
Also, I was trying to get this stuff running in flex, wherein I simply copied the code above, and tried to add it in an empty project. But I could not see any output. In debugger, I did check that the “htmlPage” object was getting created and added as well, but not sure why it isn’t showing up.
Any comments/guidance would be really helpful.
Thanks,
Kapil
In flex you need to create a new air project and declare the functions independently. It’s a bit different than flash. Also you’ll need Flash player debug version running on flex in order to get the “Trace” statements.