Giter Site home page Giter Site logo

agregoreweb / agregore-browser Goto Github PK

View Code? Open in Web Editor NEW
699.0 24.0 64.0 4.56 MB

A minimal browser for the distributed web (Desktop version)

Home Page: https://www.youtube.com/watch?v=TnYKvOQB0ts&list=PL7sG5SCUNyeYx8wnfMOUpsh7rM_g0w_cu&index=14

License: GNU Affero General Public License v3.0

HTML 2.80% JavaScript 88.49% Shell 0.65% CSS 8.06%
p2p dweb decentralization hypercore-protocol ipfs browser ssb

agregore-browser's Introduction

Agregore Browser

A minimal web browser for the distributed web

Website

Download the installer

Matrix Chat

Discord Chat

Videos

Overview from SpeakeasyJS

Watch the intro video from Dat Conference

Intro to IPFS interface from IPFS meetup

5 minute overview from Dweb meetup

Decentralized Web - Bloom Fireside

Goals

  • Enable people to make and use local first apps using the web
  • Be minimal (fewer built-in features, leave more to the OS)
  • Be open to anything p2p / decentralized / local-first
  • Rely on web extensions for extra functionality
  • Work with mesh networks / Bluetooth Low Energy networks

Agregore demo

Features

Keyboard Shortcuts

(Ctrl means Command or Control)

Shortcut Does Is configurable
Alt Show Menu Bar -
Ctrl+N New Window +
F11 Fullscreen -
Ctrl+M Minimize -
Ctrl+W Close -
Ctrl+Shift+I Open Devtools +
Ctrl+] Navigate Forward +
Ctrl+[ Navigate Backward +
Ctrl+L Focus URL Bar +
Ctrl+F Find in page -
Ctrl+R Reload +
Ctrl+Shift+R Hard Reload +
Learn More +
Open Extensions Folder +
Ctrl+. Edit Config File +

Other features

  • Web Extension support
  • Built-in Markdown/Gemini/JSON rendering extension
  • Built-in QR code scanner and generator extension
    • Generate a QR code for the current page
    • Scan a QR code from the browser action window.
    • Right click a link or image to generate a QR code for it
  • Built-in ad blocker (ublock origin)
  • Built-in support for creating web archives via ArchiveWeb.page
  • Open links in new windows (right click on element)
  • Find text on the page (ctrl+f to bring into focus, esc to hide)
  • Autocomplete URLs from history (type in the URL bar, up/down to navigate, right to autocomplete)
  • Persist open windows when quitting
  • Save files from pages (any protocol, right click it)
  • Set as default browser (click Set As Default in the menu bar (ALT))
  • Set as default Torrent handler (click Set as Default Torrent in the menu bar (ALT))
  • Auto-convert SSB sigils, BitTorrent magnet links, /ipfs/Qm paths, and /ipns/ paths to proper URLs.
  • Configure whether the menu bar should be visible by default (edit .agregorerc autoHideMenuBar property)

Docs

Check out the documentation.

Contributing

Feel free to open a Github issue if you wish to tackle one of the items on the roadmap, or message @RangerMauve directly on whatever platform you can find them on.

This project uses the StandardJS code style. Please format your code with standard --fix or run npm run lint.

To build from source do the following:

  • Set up node.js (at least Node 18), git, and yarn
  • Set up Node-gyp and its dependencies for your OS
  • fork the repo
  • Pull your fork to your computer
  • Load submodules with git submodule update --init --recursive
  • Run yarn or npm install to install dependencies
  • Run yarn start or npm start to start the browser and test your changes
  • After coding, when ready to submit, run npm run lint or yarn lint to check code style
  • Push to your clone
  • Submit a pull request

Other notes:

  • To debug extensions, run yarn debug to have devtools opened for their background pages
  • If you're interested in a CLI for these protocols, check out curld cURL for Distributed Web. That project supports the same protocols as Agregore, but in a terminal way.
  • To download the latest versions of ArchiveWeb.page or Ublock Origin, run yarn download-extennsions

agregore-browser's People

Contributors

arskan17 avatar av8ta avatar brechtcs avatar cerrussell avatar cinnamon-bun avatar deltaf1 avatar dependabot[bot] avatar ducksandgoats avatar gardenappl avatar jolindroth avatar kygost avatar metanomial avatar rangermauve avatar resession avatar rex4539 avatar techie177 avatar tripledoublev avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

agregore-browser's Issues

Google Authentication

Google login is not working, on attempting to log in, user is presented with "This browser or app may not be secure".

Related issues:

Perhaps this relates to something about needing to get OAuth?

Best lead I could find is the last comment in the Beaker issue

Gravit Designer's desktop linux app (also based on electron) had the same issue,
they "fixed" it by opening google-oauth dialog in the "real" browser instead of pop-up window with login+password

New window creation breaks after a while, breaks history

Sometimes when I close a window it messes up state somewhere in electron.

Any new windows have a blank view for the web contents.

Not sure how to reproduce consistantly but it might be related to windows created from links.

This also breaks saving window history on close, which is annoying.

Can't open app on macOS

Installed prerelease 2 (prebuilt version) but when attempting to open it, I get this dialog:

image

Usually pretty good with these dialogs and resolving them but this one's new to me ๐Ÿ˜…

OS: macOS Catalina 10.15.5

Ctrl+Click opens a raw window

Control clicking a link opens a raw window (a window without URL bar)
Interestingly, it also triggers the alt menu.

Gemini links with a port seem to fail

I haven't done much investigating on this one, so apologies if I'm missing anything obvious, and please let me know if you're having trouble recreating this bug, but it seems like gemini links with a port always redirect to port 1965 (the default gemini port)

In particular, I noticed this when trying to click a link on my website (gemini://emii.gay/en/) to gemini://emii.gay:1965. Instead of taking me to that page, I was brought to gemini://emii.gay/. This also seems to be the case when directly typing it into the browser.

Again, I haven't done much experimenting to pin this down, but it's 2:30am in the morning so please forgive me if I've missed something.

Sometimes navigation isn't detected

Every now and then when the page navigates, it won't be updated in the omni-box

Might need to listen on a different event or more types of events

Also affects navigation buttons.

Ability to save page as a desktop link

In line with the theme of leaving more up to the OS, it'd be useful to save pages as desktop shortcuts that would launch Agregore.

It might be useful to investigate if we can save hyperlinks instead of hardcoding to open Agregore.

This could be done via the shell.writeShortcutLink API.

This seems to be windows-only for now, but we might have more luck with the create-desktop-shortcuts module which seems to be cross-platform with some caveats.

Ideally we should extract the website favicon or some other useful image along with the title. This would be a good place to look for PWA manifests, too.

We should prompt the user for an output path first.

This should be a new menu item. Maybe Window -> Create Desktop Shortcut and ctrl+b as the accelerator

Community Building

Here's some stuff I'd like to tackle for helping build up the community around agregore and stuff related to it

  • Update feature roadmap better
  • Landing page for Agregore for folks to learn about it
    • Basic overview of what it is / links to resources
    • Serve through hyper
    • Automate releases through GitHub?
    • Serve through Gemini
    • Serve through IPFS
  • awesome-agregore website
    • Github Repo for submitting links of agregore-related things
    • Link from website
    • Auto-publish to hyper:// + etc
  • Documentation
    • Details on how Agregore works
    • Example apps using fetch() interface
    • Docs on how fetch interface works for different protocols
    • Workshop-style docs where you make a little app right within agregore

Gemini pages render as plain text

In release 25, Gemini pages render as uninterpreted plain black text on a white background.

Possibly the Gemini extension is not running?

My extensions folder is empty.

Development Roadmap

Here's the current state of the Agregore development roadmap.

Feel free to propose new features in Github issues or comment here if you want to tackle an item that's on the roadmap.

Roadmap / TODOs

  • Basic browser features
    • Navigate to URL
    • Back / Forward
    • Welcome page
  • Basic hypercore-protocol / dat support
  • Better navigation UX
    • Multiple windows
    • Shortcuts for window creation
    • Only allow single instance of the app (reuse the protocol handlers across windows)
    • Make sure protocol handlers open correct URL
    • Make sure page titles update the window title
    • Keyboard shortcuts (use Menu bar with accelerator keys)
      • Dev tools
      • ctrl+[ and ctrl+] for navigating history
      • ctrl+l for selecting the navigation bar
    • saveAs context menu (using fetch and fs.createWriteStream())
    • Persist windows on application quit
    • Find in page API
    • Clicking on suggested URL navigates to it
    • Hitting tab when selecting a suggestion sets the URL without navigating
    • Apply context menu handlers to all created windows
    • Hitting escape in URL bar should clear the search options and focus the content
    • Hit ctlr+shift+n to reopen the most recently closed window
  • fetch API for hyperdrives GH issue
    • Creating an archive
    • PUT/DELETE methods for files / folders
    • Track created archives for origin in a DB
    • Access control prompt for writing per origin
  • Sync folder with hyperdrive
    • Sync from folder to hyperdrive
    • Sync to folder from hyperdrive
  • Better browser history
    • As an extension?
    • Save history to a DB
    • Search through history?
    • Provide history suggestions when typing in URL bar
    • Add debounce to history search
    • Add cancellation to history search
    • Make sure you can always do a direct navigation or duckduckgo search while history is loading
    • View history page
    • Preserve history more agressively to avoid crashes
  • Bookmarks
    • As an extension?
    • Sync with Hyperdrive API?
    • Save to folder?
  • Gemini support
    • Get data from Gemini servers
    • Enable dialogs for managing certificates
  • Basic EarthStar support
    • Read from workspace (GET/PUT)
    • Identity management
    • PUT/DELETE to workspace
  • Basic IPFS support
    • Loading files
    • Directory listing
    • Loading pretty urls with index.html
    • IPNS?
  • Basic BitTorrent support
    • Load web page when opening magnet link
    • bt:// protocol for loading individual files
  • fetch API for IPFS (look at how their proxy works?)
  • WebXR - Make sure it's working!
  • Web extension support via electron-extensions
    • Load internal extensions from app/extensions/ folder
    • Load external extensions from user data folder
    • Somewhere to render badges
    • Developer options page
    • Drag and drop extension folder
  • Configure top-level page to load from URL #44
    • Give access to browser APIs via IPC
  • Password / Account management for web pages using native OS APIs
  • Private browsing mode
    • Option to create page in new "private" session.
    • Configure multiple containers? :o
  • PWA support
    • Service Workers (Free with Electron)
    • Install web page to desktop
  • Persist browser settings / history to Hyperdrive
  • Load extensions from p2p protocols.

DNS

Relates to #75
While current DNS is kinda decentralised, it isn't really.

It would be good to look at alternatives and implement them on a browser level, like we do for protocols.

I've researched a bit and here's what I've found:

  • ENS - Etereum Name Service - Not particularly light, expensive. Well known and well connected. PoW.
    • I bought an ENS name.
      • I regret it. As it isn't very light transfer fees are expensive. Listed name prices are also inaccurate.
    • Implementation notes: #75
  • Namecoin - PoW.
  • EmerDNS - Seems pretty dead. PoW.
    • Not sure if this would require setup even if it was working.
  • BNS - Blockstack Name Service - Very heavy. Strongly tied to Bitcoin. PoW (probably)
  • Handshake - Distributed. PoW. Looks like this isn't actually a name service

Todo: References for statements made in this issue.

Query: Anyone know of any good DNS options. Something accessible is the key. Ideally as light weight (in the not evaporating oceans sense) and distributed as possible.

Service workers

I saw service workers/PWAs on the development roadmap:

Spec lists this as being HTTPS only.

Shall Agregore break this?

Broken folder links in directory listing

Links to sub-folders in the directory listing do not include a trailing slash, and redirect to a broken link as per #13.

Steps to reproduce

  • Navigate to a hyper/dat url with a sub-folder (example dat://daa1a5dcffa522c78d1fe5949c247fe985e4319e2a5bf0db456b0d29adab0482)
  • Click on a link to a subfolder (in the example click test)

Expected behaviour

  • Clicking subsequent links in the directory listing will lead to files and folders within that directory

Actual Behaviour

  • The URL in the navbar is missing a trailing slash and so #13 comes into effect.

DRM Video Streaming

I was trying Netflix and other streaming services with Agregore last night.
Apparently Netflix uses a shitty DRM protected thing
The others failed too, they came up with errors but nothing that would show how to fix them.

What I've tested:

  • Netflix - Doesn't work
  • Stan - Doesn't work
  • Binge - Doesn't work
  • ABC iView - Doesn't work
  • YouTube - Works
  • Crunchyroll - Works

Not sure if there's anything we can do to improve support.

AdBlock enhancement

As it currently is, the AdBlock extension gives a noticeable delay on loading times.

Perhaps one way we could improve it to start with is to assume that ads are only going to come from HTTP or HTTPS?

Another, if we wanted to increase speed on HTTP/S at the cost of blocking, is to give a few generic regex searches based on the list?
Block stuff that contains things like 'ads','affiliate','stat', things with subdomain 'ad' or 'ads'.
Or an inbetween, to prevent false blocks might be to check the above queries and if it matches one, then search the list?

Add ability to change the color scheme for the browser

Might be good to have a styles property in the config which can be modified to change the style of the browser.

Maybe have something like text, background, links, highlights?

I think a good place to serve it would be with CSS variables defined in a agregore:// URL.

Chrome extensions

Chrome extensions work, Firefox extensions don't.

How I installed:

  1. Find extension on Chrome Web Store
  2. https://crxextractor.com/
  3. Drop in extensions folder

Results:
Works but fucks up top bar:
image

To do:

  • Make it not fuck up top bar

HTTP status code for unwriteable archive/hyperdrive

Consider changing the status code from 500 to 405 Method not Allowed (or 403 Unauthorized). 405 also returns which methods are allowed and so could be useful for protocols with more granular permission systems.

Location bar url set to about:blank

Working well, but just noticed one minor issue: when clicking the sample 'Dat Foundation Blog' link, the page loads, but the location bar gets reset to 'about:blank'. (My guess would be that maybe its coming from an iframe that should be ignored and not set the location).

Not finishing with a / on a directory leads to all sorts of funkiness

hyper://833d(...)/client/ is a directory, going to URL hyper://833d(...)/client:

  • At first caused an error to print (cannot replicate and I reloaded too fast to get a good look).
  • Then started (and continues to) load an old copy of the directory's index.html.

hyper://833d(...)/client/assets gives the more expected result of an index but perhaps should still correct the URL to make it hyper://833d(...)/client/assets/

Behaviour in other browsers:
Beaker:

  • Mauve's blog hyper://94f0(...)/posts doesn't correct itself but does load correct content
  • hyper://833d(...)/client corrects itself to hyper://833d(...)/client/
    • (strange inconsistancy)

Chrome:

  • Corrects itself (https://beaker.dev/docs -> https://beaker.dev/docs/)

Broken relative file links in directory listing

When accessing a URL such as hyper://94f0cab7f60fcc2a711df11c85db5e0594d11e8a3efd04a06f46a3c34d03c418/posts and omitting the trailing slash, the browser does not append a trailing slash, and so relative links on the page don't function as intended.

Steps to reproduce

  • Access a URL to a directory with files in a hyperdrive/dat archive and omit the trailing slash
  • Click one of the links to a file in the directory

Expected behaviour

  • The filename is appended to the URL with a slash in between and the user navigates to the file

Actual behaviour

  • The browser does not append the trailing slash to the URL in the navbar, and the link becomes relative to one layer higher than intended

Some gemini requests terminate before completion

This article (gemini://gemini.circumlunar.space/~solderpunk/gemlog/progress-toward-offline-first.gmi) sometimes only displays up to the point shown below. Refreshing the page sometimes fixes it. The request in the inspector still says 200.

image

Gemini TOFU

Gemini TLS certificates use a TOFU system for authentication. I noticed the README said "No certificate management code yet" for Gemini, so I hoped my blog post on implementing TOFU could be of use. I don't know Javascript so I can't contribute directly, but I hope this helps!

gemini://makeworld.space/gemlog/2020-07-03-tofu-rec.gmi (Portal)

Let me know if you have any questions! Note that this post doesn't discuss general certificate checks that should be done, like expiry date and hostname (and subjectAltName) validation.

Some gemini files are not properly rendered as gemini markup

Navigating to a gemini url that is serving a gemtext file sometimes displays the plain text markup (and on my system displays improperly decoded characters)

Reproduce

navigate to gemini://apintandaparma.club/~ajc/log/2020-08-18.gmi

Expected Result

The gemini markup is rendered to HTML

Actual Result

The markup is displayed as plain text, and certain characters (such as a ') seem to be rendering as the wrong encoding.
image

System

Manjaro Linux 64-bit

Suggested fix

Looking at the network trace, the two files I saw this happen on have the "lang" parameter added to the content-type header. (e.g. content-type: text/gemini; lang=en)https://github.com/RangerMauve/agregore-browser/blob/master/app/protocols/gemini-protocol.js#L30 should be updated to parse the content-type header more properly then check the MIME type and subtype instead of just comparing the strings directly.

Add GUN protocol

It'd be cool to flush out a gun-fetch protocol handler.

Main stuff that we'd need to figure out:

  • What goes in the hostname as the 'origin'?
  • How should sync work?
  • Is there one global GUN or should we have named GUN instances per 'origin' kinda like names in hyper://
  • The path portion of the URL should probably be split and used to invoke .get sequentially
  • Should the username stuff go in the username portion? (pending on electron fix for this)

cc @amark

Ability to install extensions from a link

  • Have a special link format that looks like agregore://extension/install?url=URL_OF_EXTENSION_HERE
  • The URL should have a protocol and path so we can support loading from subfolders and from arbitrary protocols in the future.
  • Intercept this in the new-window event and show users a dialog to confirm the installation
  • Try to read the extension's manifest and prompt the user with a name and the permissions it requires using the electron.dialog API.
  • On accepting add to the extensions.urls list in the config and load it immediately
  • Should have a "Don't show this again" checkbox to prevent this origin from requesting extension adds again.

Depends on folder sync

Refresh button should load using accessed URL not typed URL

If user types a URL in the URL bar and then abandons it and later clicks refresh, the URL typed will be the URL loaded.

In other browsers and, perhaps, the expected behaviour is for the current page/URL to refresh and perhaps the URL bar to fresh to its accessed URL.

Fetch permissions

Unless if I'm mistaken, there is a lot of room for abuse with PUT and DELETE. We should make a permissions pop up eventually.

Perhaps approve permissions by URL, with temporary and permanent options?

Extension to support Beaker APIs

  • DatArchive API for dat:// domains
  • beaker.* APIs for hyper:// domains

It could be done via content scripts which wrap over top of the fetch() API that agregore provides.

Ability to configure browser "shell"

  • Pass in a URL for loading the browser shell
  • Should have a browser.html which will define the browser chrome for the URL bar and the such
  • Should have a theme.css to export CSS variables for the browser theme (to be used in stuff like the markdown rendering extension)
  • Should have a welcome.html to load as the home page in new tabs (optional?)

This will give people the ability to fully customize the browser UI of Agregore and anything relying on styling.

One thing that will be done is a modification to the IPC API to enable creating multiple browserViews and resizing them / destroying them dynamically. This will enable folks to build tabs themselves if they want to.

Also, it'd be good to have an IPC message for getting the set of capabilities a browser is providing so that extensions could account for older versions or newer versions and prompt users to update or downgrade.

The URL should be configurable in the .agregorerc file for now, maybe a shell parameter.

Ideally the agregore:// protocol should try to redirect the hyper:// URL of the shell when one exists. Or maybe to load content from it?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.