Before starting, make sure that you have installed development packages such as pygobject3-devel and webkitgtk3-devel.
Creating your first script
We are going to start from the beginning, by creating an empty window:
from gi.repository import Gtk window = Gtk.Window() Gtk.main()
The first line will let us import the Gtk library from gi, and the second line, will let us create a window.
Now, if you have copy-paste this code, you will see that it won’t do much… and it happens because you created the window but it has not been shown. So let’s call the method show. Even if you can see the Close Icon on the Window, it won’t work because it is not programmed to do anything. So, lets add the signal handler to our code:
def on_destroy(window): Gtk.main_quit() window.connect("destroy",on_destroy)
After running, you will see that the close icon on the window will work. If you want to change the title of the window, you can do it by adding this line:
Import the WebKit library as well in the first line and create a webview widget:
webview = WebKit.WebView()
Finally, we need to add the widget into the window
and call window.show_all() instead of window.show() because now our window contains a widget.As you can see, the webview is empty with a default size. We might open any website by calling it:Adding Scroll Bars
To have a better experience, we can add scroll bars. To code this, we must understand that we are going to have three objects: a window, a scrolled window, and a webview. For this experience, I will also delete the on_destroy handler and just use the Gtk.main_quit, and add code for scrolling:‘Because it does not look good, let’s set an appropriate default size (800 x 600):
GNOME has a defined an interface guidelines, so we are going to delete the title and add a header bar widget:
headerbar = Gtk.HeaderBar() headerbar.set_show_close_button(True) window.set_titlebar(headerbar)
def on_enter(entry): url = entry.get_text() print(url)
First, we need to find the right name of the icon of the button in GNOME:Now we find the image to represent the Back icon. I’ve chosen “go-previous”:By adding these lines, we are going to be able to display the button:
go_back_button = Gtk.Button() go_back_arrow = Gtk.Image.new_from_icon_name("go-previous", Gtk.IconSize.SMALL_TOOLBAR) go_back_button.add(go_back_arrow) headerbar.pack_start(go_back_button)
Create a file history.html in /tmp and paste this code inside on_enter function:
if (url == "about:history"): webview.open("/tmp/history.html") return history_file = open("/tmp/history.html", "a+") history_file.writelines("* " + url + "<br>") history_file.close() webview.open(url)
GTK3 is still working but it will be obsolete in Fedora 27. As the comments are claiming, there are some changes that must be done in this material.
1.- Replace WebKit2 instead of WebKit while it is importing or when it is used
2.- Instead of open, use load_uri for webview widget
3.- Delete creation and handlers of scrolled_window because it is not needed
4.- Replace window.add(scrolled_window) for window.add(webview)
Adding every event to the history
So far, we have save all the pages written including an ENTER at the end, but what about the pages I visited while clicking on tabs or that make the WebBrowser changed. Besides that the tmp will be lost if you reboot the machine, it is better to save the history in another path, in this case, the home. Function such as open_page and on_load_changed that can be developed and be called later while the webview will be loaded. Make sure you have defined the proper functions to make it work:
def open_page(url): entry.set_text(url) webview.load_uri(url) def open_history(button): open_page("file:///home/yulytas/.browser.html") def on_load_changed(webview, event): url = webview.get_uri () history_file = open("/home/yulytas/.browser.html", "a+") history_file.writelines("* <a href=\"" + url + "\">" + url + "</a><br>") history_file.close() def on_enter(entry): url = entry.get_text() webview.load_uri(url) if (url == "about:history"): open_history(webview) return open_page(url) open_page("https://gnome.org") webview.connect("load-changed", on_load_changed)
Present the history by clicking a button
All the code that includes saving history in the /home/yulytas/browser.html can be presented also in a history button. These are the lines required:
def open_history(button): open_page("file:///home/yulytas/.browser.html") history_button = Gtk.Button() history_button_image = Gtk.Image.new_from_icon_name("open-menu-symbolic", Gtk.IconSize.SMALL_TOOLBAR) history_button.add(history_button_image) history_button.connect("clicked", open_history) headerbar.pack_end(history_button)
Finally, instead of hard-coding the path of each user home, we can use the GLib library to capture the home path of any user with the following instructions:
1.- Add the GLib library in the first line to imported.
2.- Edit the sources of the file that will contain the history:
HISTORY_FILE = "/home/" + GLib.get_user_name() + "/browser1_history.html" HOME_PAGE = "https://gnome.org"
3.- Edit the functions defined and use the global variables already set:
def open_history(button): open_page("file://" + HISTORY_FILE) def on_load_changed(webview, event): url = webview.get_uri () history_file = open(HISTORY_FILE, "a+") history_file.writelines("* <a href=\"" + url + "\">" + url + "</a><br>") history_file.close()
4.- Call properly the handlers using the variables