Thunksten: An Open Source Web Browser


#1

Contents

  1. Intro
  2. Gather Your Assets
  3. Splash Screen
  4. Browser Design
  5. The Code
  6. Download

1. Introduction

The most important part of developing any app is, of course, to have a catchy name :joy: Since this app in inspired by - and indeed built on - Chrome, I consulted Mendeleev’s masterpiece in search of inspiration. Although I have a natural affinity for the number 42 I just didn’t think that “Molybdethunk” had much of a ring to it, and thus Thunksten was born!

original image

2. Gather Your Assets

For this app I made use of the free resources provided by Google through material.io. Just do a quick search for what you’re looking for, download the images you want for your app and upload them to Thunkable.

3. Splash Screen

In general I try to avoid putting anything important on Screen1, if you want to have a multi-screen app it’s a good idea to leave Screen1 as manager for your other screens, or as a dashboard. For this app I’ve just created a simple splash screen. and you can style it however you like.

Note that the timer interval determines how long the splash screen stays visible for. The blocks aren’t perfect, but for this simple app they’re ok.

4. Browser Design

In the desktop version of Chrome the top bar has buttons for Back, Forward, Reload and a TextBox for the URL.

I think the design is a little bit crowded but you’re welcome to improve it as everything here is open source! The main things to look out for are on the WebViewer, make sure that you have these properties checked:

:ballot_box_with_check: Follow Links
:ballot_box_with_check: Prompt for Permission

And these properties unchecked:
:white_medium_square: Use External Browser
:white_medium_square: Zoom Display

5. The Code

Initialize

When the app loads it simply points the browser at the Home URL and checks to see if it should update any of the buttons.

updateButtons()

To minimise repetition in this app I used a procedure to check whether or not it was possible to move forwards or backwards.

You could use something similar to this if you wanted to create a simple browser history.

Forwards and Backwards

These buttons are pretty similar, it just used the Go Forward and Go Back functions of the Web Viewer component.

The extra bit of code just checks to see if the user want’s to exit out of the app.

Create Your URL

The main thing to be careful of when using the Go To Url procedure is to make sure the URL starts with a protocol such as http:// or https://, since most people don’t typically type this we have to do it for them, otherwise the web viewer won’t be able to load the page

6. Download

There’s more code and plenty of room for improvement in the aia. Take a look for yourself in the change log below:

I have lots if ideas for version 2, but feel free to suggests new features and improvements. If you use this as part of your own app please let me know!

Change log

2017-11-12 v3 initial release
Thunksten.aia (92.2 KB)

2017-12-04 v3.1 check for valid TLD based on @Futuredev’s post.
Thunksten.aia (104.8 KB)

2018-01-05 v3.14 Replaces Go button with list of “Tabs”. Adds TextBox Extension
Thunksten.aia (123.2 KB)


Web Browser pre URL
How to make deafult web browser
How to make facebook basic version webviewer like uc browser
Check if text is an url
White screen is coming
Webviewer tab system (help)
Open New Tab in Web View
Web Viewer cannot go back to previous web page
The closing dialog box wont appear
Webviwer Blank Error
How to remove white screen when Webviewer back pressed to close app?
Some Features not working
Help Needed Please how can i solve the problem?
I need help with webview on my app
How add another app like ucbrowser for download big files from thunkable app?
Webviewer With Only 1 Screen
#2

Useful as always. @Domhnall is one of the best tutorial writers here :+1:


#3

Nice one
i will give it :star::star::star::star::star:

How about this @Domhnall can you add this :grin:


#4

its not possibly with inventor


#5

How bout this features that has check marks?


#6

this posibol


#7

Alright that’s good its fine with me :smile: :+1:


#8

use actionbar


#9

This one


#10

yes


#11

Sure this is possible, but not in native Thunkable. Somebody has to write an extension for that…


#13

Thanks for the feedback everyone. I’m definitely going to add in some more features with extensions but when I saw @Futuredev’s post yesterday I wanted to add this in ASAP. This release will add the ability to check for a domain name from a large list of domain names. The really nice thing here is that it “fails” gracefully. If the users accidentally types the wrong thing it will search for the term on Google rather than showing some sort of “Can’t resolve host name” error message.

If you’re following along at home, here are the changes from version 3. The first thing to do is create two new variables. The first, listOfTLDs is to store the all of the top level domains, or domain names to me and you. The second isWebsite is basically a switch that we can set as true or false depending on whether or not the user has entered a valid domain name.

Next thing we want to do is add all of those TLDs to our list:

You can find a link to all of them in the original post:

(Yes, I did try adding them as a .csv file but when it didn’t work first time I opted for the old reliable copy-and-paste approach)

Most importantly, we need to check if the user has typed a valid domain name into the browser. What I’ve opted for here is splitting the domain name at each . and checking if the last item exactly matches any of the items in your listOfTLDs


The notifier at the end was simply a way of seeing if it had worked while I was testing. This block has been disabled in the .aia file I shared.

Finally the btnGo.Click event is modified to handle what we should do if the user has typed in a valid domain name.

One thing that I forget to mention is that the way this is coded it will no longer accept GET requests or copy and pasting long URLs (this might be a deal breaker for some of you!) I’ll find a way to restore this functionality in a future update, but if you have to have this in your browser you will need to find a better way to match the domain names.

That’s it for this update. Hope you like it and keep the suggestions coming!


Thunkable is it possible to add online firebase links
#14

not work properly
when you search some words in this browser
just like song
you can’t search ‘song’ in this browser


#15

Are you using the latest version? The first release didn’t have this feature, but the latest one does. Can you upload a screen shot of what it looks like when you search for “song”?

Thanks!


#16

No actually. All features are possible to make (besides app shortcuts)


#17

I’ve created a webview application,

and I use the url example https://facebook.com

but can not upload images or video or other files.
I’m using android version 4.4 (Kitkat)

sorry my english


#18

Monthly Update?? Tabs!!

Thanks for all your requests, I think @Shivendra_Kr_Sahu was first to ask for this? I’ve added the latest update to the first post - I think it’s neater if everything goes in the changelog so scroll up to the top, or if you’re feeling super lazy then just click on the card below to be redirected!

Creating “Tabs”

A lot of people [citation needed] have requested this, and one of the most common approaches seems to have been “Let’s just add in loads of WebViewers” which is fine where you only need two or three tabs.

Fun Fact: Once you open your 100th tab in Chome that little number changes into a smiley face. I’ve left this as an exercise for you to try yourselves! :smile:

What I’ve gone for instead is a list of all open tabs that you can navigate through, and just use the one WebViewer. It’s not going to win any design awards, but it gives the impression of tabs.

New Blocks in this update

In order to add in the Tabs_List_Picker I had to get rid of the “Go” button, but what self-respecting browser has a Go button these days anyway? The perfect way to replace it was by using @Taifun’s TextBox extension, this way clicking enter on the keyboard starts the whole process of opening the page you want. Check it our for yourself here:
https://puravidaapps.com/textbox.php

There’s aren’t too many new blocks in this update. Firstly I created a new list for the URLs that would be displayed as tabs and I also started the “EnterPressedListener” (that bit is important! :wink:)

New “tabs” get added provided they don’t already exist, and the number of open tabs is displayed on the button, just like Chrome! I think that using parallel lists and WebViewer1.Current Title instead of WebViewer1.Current Url like I’ve used here would be a better looking approach, but I just wanted to get it working for now.

Finally, this is how I handled new tabs or old tabs:

Next item on my agenda is adding in a proper history/bookmarking system, but don’t let that stop you from making more suggestions!


I have a problem in using Web Veiwer
#23

Problem when search word which listed in CSV list



#24

thanks for pointing this out - I’ll see if I can get it fixed in time for next month’s update. It is and open source project though so if anyone wants to contribute then feel free to post a suggestion.


#25

but when?