https://github.com/clementbeal/dragonfly

A web browser in Flutter
https://github.com/clementbeal/dragonfly

browser dart flutter

Last synced: about 1 month ago
JSON representation

A web browser in Flutter

• Host: GitHub
• URL: https://github.com/clementbeal/dragonfly
• Owner: ClementBeal
• Created: 2024-08-23T19:33:31.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-09-25T17:26:20.000Z (about 2 months ago)
• Last Synced: 2024-09-28T14:40:12.844Z (about 2 months ago)
• Topics: browser, dart, flutter
• Language: Dart
• Homepage:
• Size: 4.39 MB
• Stars: 17
• Watchers: 3
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# Dragonfly

An attempt to build a web browser with Flutter.

# How to test it

```bash

git clone https://github.com/ClementBeal/dragonfly.git

dart pub global activate melos

melos boostrap

cd apps/dragonfly_browser

flutter run

```

If you want to test with some pages that work more or less, run the following command in another bash

```

melos run browser_website

```

# Project strucure

`apps/dragonfly_browser` : the browser project. The UI is there

The following packages are used by the UI :

`apps/dragonfly_browservault` : contains all the side-features of the browser that needs access to a local database (history, favorites...)

`apps/dragonfly_engine` : more or less a headless browser that can be controlled with code.

`apps/dragonfly_css_parser` : a CSS parser that create a `Stylesheet` object used by the navigator

## Some explainations

The browser model is like more or less like this:

```dart

class Browser {

    List tabs;

}

class Tab {

    final List history;

}

class Page {

    final DOM dom;

    final CssOM cssOM;

}

```

When the user navigate to a page, the browser launch a request. When he receives the HTML, it will parse it and build the DOM. Then he extracts the CSS stylesheet and fetches them. He also parse the CSS to build the CSSOM.

Once we have the DOM and the CSSOM, we can render the page. Almost all the nodes have a similar behavior.

## What's working now?

The browser can open tabs and navigate through them and through the history. It can render a bit of HTML and CSS. It's hard to implement all the properties because there's hundreds now.

I haven't implemented a JS interpreter yet. 

## Wanna contribute?

Create issues or make some PRs! You're all welcome!