Make a webbrowser using Python

Hi Pythonistas!

This is the final part of making a desktop application with Python. Hope you are familiarised with the basics of PyQT. Today we are going to make a web browser from scratch using python. Let us dive into the code

Code

import sys
from PyQt5.QtCore import QUrl, QSize
from PyQt5 import QtGui
from PyQt5.QtWidgets import QMainWindow, QApplication, QToolBar, QAction, QLineEdit
from PyQt5.QtWebEngineWidgets import QWebEngineView


class MainWindow(QMainWindow):

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

        navbar = QToolBar()
        self.addToolBar(navbar)

        back_btn = QAction('Back', self)
        back_btn.setIcon(QtGui.QIcon("back.jpg"))
        back_btn.triggered.connect(self.browser.back)
        navbar.addAction(back_btn)

        forward_btn = QAction('Forward', self)
        forward_btn.setIcon(QtGui.QIcon('fw.jpg'))
        forward_btn.triggered.connect(self.browser.forward)
        navbar.addAction(forward_btn)

        reload_btn = QAction('Reload', self)
        reload_btn.setIcon(QtGui.QIcon('reload.png'))
        reload_btn.triggered.connect(self.browser.reload)
        navbar.addAction(reload_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_to_url(self):
         text_in_url_bar = self.url_bar.text()
         redirect_url = None
         if not text_in_url_bar:
                 redirect_url = "http://google.com"
         if text_in_url_bar.startswith("https://") or text_in_url_bar.startswith("http://"):
                 redirect_url = text_in_url_bar
         else:
                 if text_in_url_bar == 'about:blank':
                     redirect_url = "http://www.google.com"
                 else:
                     redirect_url = f"http://www.google.com/search?q={text_in_url_bar}"
         self.browser.setUrl(QUrl(redirect_url))

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

app = QApplication(sys.argv)
#create new application object
QApplication.setApplicationName('Parseltongue Browser')
#set application name as parseltongue browser
window = MainWindow()
#create main window for the application which a subclass of Qt main window
app_icon = QtGui.QIcon()
app_icon.addFile('logo.png', QSize(256,256))
app.setWindowIcon(app_icon)
# Add logo for the brower ans set icon
app.exec_()

Creating App and Set title

app = QApplication(sys.argv)
QApplication.setApplicationName('Parseltongue Browser')

Creating mainwindow

window = MainWindow()

Set Icon for our App

app_icon = QtGui.QIcon()
app_icon.addFile('logo.png', QSize(256,256))
app.setWindowIcon(app_icon)

By default PyQT shows an icon when an application is opened. Here we explicitly provide the icon for the app which is the logo.png

Loading webpage in Window

For loading webpages PyQT provides a widget called QWebEngineView. We can set any url to this widget.

self.browser = QWebEngineView()
self.browser.setUrl(QUrl('http://google.com'))
self.setCentralWidget(self.browser)

Here we create a QWebEngineView instance and set google.com as the URL. We are making this widget a central widget. When this app opens by default google is loaded

Setting toolbar for the application

navbar = QToolBar()
self.addToolBar(navbar)

This will create a toolbar and attach it to the app.

Adding actions to toolbar

back_btn = QAction('Back', self)
navbar.addAction(back_btn)

Attaching icon to actions

back_btn = QAction('Back', self)
back_btn.setIcon(QtGui.QIcon("back.jpg"))
navbar.addAction(back_btn)

Once the icon is added the back action becomes like this

Attaching click event to action

back_btn.triggered.connect(self.browser.back)

When the action is triggered this will call the browser back function

Adding address bar

self.url_bar = QLineEdit()

Search when enter is pressed

self.url_bar.returnPressed.connect(self.navigate_to_url)

def navigate_to_url(self):
    	text_in_url_bar = self.url_bar.text()
    	redirect_url = None
    	if not text_in_url_bar:
        	redirect_url = "http://google.com"
    	if text_in_url_bar.startswith("https://") or text_in_url_bar.startswith("http://"):
        	redirect_url = text_in_url_bar
    	else:
        	if text_in_url_bar == 'about:blank':
            	    redirect_url = "http://www.google.com"
        	else:
            	    redirect_url = f"http://www.google.com/search?q={text_in_url_bar}"
        self.browser.setUrl(QUrl(redirect_url))

navigate_to_url function checks if any values are entered if not it will go to google.com. If there is a value check if it is a valid http or https URL if valid go to that URL else it will search with that keyword in google.

Update the address bar when redirected to a new page

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

update_url function set the text in address bar

Output

App icon

This is only a simple web browser you can add more features to it. Like multiple tabs, history, etc. Please visit this link https://github.com/afsal-parseltongue/parseltonge_browser for the entire code.

Hope you have learned something from this post please share your valuable feedback with afsal@parseltongue.co.in