Create Your Own Web Browser Using Python

   March 8, 2022
Create Your Own Web Browser Using Python

Who does not use a browser these days? Everyone does. Creating a Browser Using Python with a lot of utility is a bit time taking and difficult in the real world, but what if today in this article we will Create Your Own Web Browser Using Python.

So today in this article, we are going to create a web browser that is simple and usable. We will make a browser that will have some of the common features like the forward and backward button, home button, etc.

Before starting with the coding of Web Browser Using Python, let us clarify the difference between the two widely used words Browser and Search Engine.
Browser: A web browser is an application that allows you to access information on the Internet. Web browser helps to assist users in having an interactive online session on the World Wide Web/Internet. Example: Chrome, Firefox, etc.

Search Engine: It is a program that is used to locate specific websites on the Internet. It basically aids the user in obtaining knowledge about anything available on the internet.
Example: Google, Bing, etc.

Browser Features:

Home Button: This button must-have capability to take the user directly to the home page.
Forward Button: This button will take the user to the next site.
Back Button: This button will take the user to previously visited websites.
Refresh Button: It will have the capability to refresh the content of the site.

Steps for Developing Web Browser Using Python:

Step 1: Installing the required libraries.
PyQt5 and PyQtWebEngine

Step 2: Import the modules needed for this project’s development.
sys module, modules from PyQt5 like QtCore, QtWidgets, QtWebEngineWidgets

Step 3: Functions definition and creation of classes.

Step 4: Coding for buttons and their functionalities.

Getting Started:

Step 1: About Libraries & Its Installation:

PyQTt5: PyQt5 is one of the most popular Python modules for creating graphical user interfaces as it is very easy to use for beginners. The PyQt5 designer makes it so easy to construct complex GUI programs in a short amount of time, and it is also another wonderful feature that motivates developers to choose PyQt5.

PyQtWebEngine: The framework is built on the Chrome browser and allows users to embed online content in their apps. The bindings are built on top of PyQt5 and are divided into three modules that match the framework’s various libraries.

Now, let us see how to install these libraries.

  • PyQt5
  • PyQtWebEngine

To install the PyQt5 library, enter the following command in the cmd:

pip install PyQt5

To install the PyQtWebEngine library, enter the following command in the cmd:

pip install PyQtWebEngine

Step 2: Importing required modules:

import sys
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from PyQt5.QtWebEngineWidgets import *

Explanation:

import sys: So, this command will import the sys module. The sys module contains methods and variables for modifying many aspects of the Python runtime environment. The python interpreter provides access to a number of variables, constants, functions, and methods.
import os: This module is imported in order to perform operations on directories, edit its contents etc.
QtCore: The sys module contains methods and variables for modifying many aspects of the Python runtime environment. The python interpreter provides access to a number of variables, constants, functions, and methods.

Qtwidgets: Qtwidgets are used to generate the user interface in Qt. and it also includes classes for constructing traditional desktop-style user interfaces but these widgets are more useful when developing large-scale applications.
QtWebEngineWidgets: The QtWebEngineWidgets package contains both a web browser engine and C++ classes for rendering and interacting with web content. The web content is embedded in the application using this framework.

Step 3: Functions definition and creation of classes:

class MainWindow(QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.browser = QWebEngineView()
        self.browser.setUrl(QUrl('https://google.com'))
        self.setCentralWidget(self.browser)
        self.showMaximized()

Explanation:

QMainWindow(): The user interface of an application is built using a primary window. QMainWindow and its related classes in Qt are used to handle the main window. QToolBars, QDockWidgets, a QMenuBar, and a QStatusBar can all be added to QMainWindow’s layout.
QWebEngineView(): The QWebEngineView class implements a widget for viewing and editing web pages. The core widget component of the Qt WebEngine web browsing module is a web view. It can be used to display live online material from the Internet in various different applications.

setUrl(): This is used to set the default URL of our choice.
setCentralWidget(): For our applications we can also use custom widgets.
setCentralWidget() is used to set the central widget.
showMaximized(): This helps to set the window size to maximum.
QToolBar(): This will add a toolbar and can be set to movable, immovable using setMovable(), isMovable() etc.

Step 4: Coding for buttons and their functionalities:

 navbar = QToolBar()
        self.addToolBar(navbar)

        back_btn = QAction('Back', self)
        back_btn.triggered.connect(self.browser.back)
        navbar.addAction(back_btn)

        forward_btn = QAction('Forward', self)
        forward_btn.triggered.connect(self.browser.forward)
        navbar.addAction(forward_btn)

        reload_btn = QAction('Reload', self)
        reload_btn.triggered.connect(self.browser.reload)
        navbar.addAction(reload_btn)

        home_btn = QAction('Home', self)
        home_btn.triggered.connect(self.navigate_home)
        navbar.addAction(home_btn)

Explanation:

QAction(): An icon, menu text, a shortcut, status text, and a tooltip can all be found in a QAction. Actions can be applied to menus and toolbars. SetIcon(), setText(), setIconText(), setShortut(), setStatusTip(), and setToolTip() can be used to add above actions.
connect(): This is used to connect the actions to the browser.
triggered(): Buttons are used to perform actions. These actions can only be performed if the button is functioning well. So whenever an action is required, a button is clicked and it will trigger an action. triggered() is used to trigger an action.

forward, back and reload, etc are the actions provided by Qt.

self.url_bar = QLineEdit()
self.url_bar.returnPressed.connect(self.navigate_to_url)
navbar.addWidget(self.url_bar)

self.browser.urlChanged.connect(self.update_url)

    def navigate_home(self):
        self.browser.setUrl(QUrl('https://google.com'))

    def navigate_to_url(self):
        url = self.url_bar.text()
        self.browser.setUrl(QUrl(url))

    def update_url(self, q):
        self.url_bar.setText(q.toString())


app = QApplication(sys.argv)
QApplication.setApplicationName('Copy Assignment Browser')
window = MainWindow()
app.exec_()

Explanation:

Here, we have defined three functions navigate_home(), navigate_to_url() and update_url()

navigate_home(): This function handles the functionality of taking the user to the home page. Here we have set the home page to http://google.com using the setUrl() method.
navigate_to_url(): This function is responsible for the navigation of the URL.
update_url(): This function updates the URL to user-entered URL.

QLineEdit(): The most widely used input field is the QLineEdit object and it has a text box where you can type one line of text. The QTextEdit object is required to enter multi-line text. A line edit is used to add and edit a single line of plain text.
setApplicationName(): This takes in the name of the application that the user wants to display. The name of the app should be written in between the double or single quotations.
QLineEdit(): This is used to take the input through the keyboard from the user.

Cheers to our code! So finally we have successfully completed our code Web Browser Using Python. We can add as many functionalities as we want. PyQt5 is a vast GUI toolkit that consists of a large set of classes, methods, etc, use them to make your browser GUI better.

Try this video as well



Here’s the link to the official documentation: https://pypi.org/project/PyQt5/
PyQt5 Tutorial Link: https://www.tutorialspoint.com/pyqt5/index.htm

Complete code for Creating Your Own Browser

import sys
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from PyQt5.QtWebEngineWidgets import *


class MainWindow(QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.browser = QWebEngineView()
        self.browser.setUrl(QUrl('https://google.com'))
        self.setCentralWidget(self.browser)
        self.showMaximized()

        # navbar
        navbar = QToolBar()
        self.addToolBar(navbar)

        back_btn = QAction('Back', self)
        back_btn.triggered.connect(self.browser.back)
        navbar.addAction(back_btn)

        forward_btn = QAction('Forward', self)
        forward_btn.triggered.connect(self.browser.forward)
        navbar.addAction(forward_btn)

        reload_btn = QAction('Reload', self)
        reload_btn.triggered.connect(self.browser.reload)
        navbar.addAction(reload_btn)

        home_btn = QAction('Home', self)
        home_btn.triggered.connect(self.navigate_home)
        navbar.addAction(home_btn)

        self.url_bar = QLineEdit()
        self.url_bar.returnPressed.connect(self.navigate_to_url)
        navbar.addWidget(self.url_bar)

        self.browser.urlChanged.connect(self.update_url)

    def navigate_home(self):
        self.browser.setUrl(QUrl('https://copyassignment.com'))

    def navigate_to_url(self):
        url = self.url_bar.text()
        self.browser.setUrl(QUrl(url))

    def update_url(self, q):
        self.url_bar.setText(q.toString())


app = QApplication(sys.argv)
QApplication.setApplicationName('CopyAssignment Browser')
window = MainWindow()
app.exec_()

Output:

output 1
output 2
output 3

We hope this browser project of creating a Web Browser Using Python will definitely help you to boost your skills and will help you get a strong grip on various Python libraries. Happy learning and coding!

Thanks for visiting our website

Also Read:

Share:

Author: Ayush Purawr