Posts

Showing posts with the label browser

Browser in Javascript

Image
  A Proof-of-Concept Browser written in Javascript for minimal Web 2.0 browsing experience. This DOES NOT depend on any browser engine like Blink, Gecko or Webkit. Use an existing HTML rendering engine like netsurf or roll-out your own . This uses QuickJS-ng for JS runtime, Linkedom for DOM API and curl for network downloads. Font decoration uses Terminal ANSI escape codes . Since linkedom is an npm module, it needs to be converted to ES6 module for use with quickjs.  sudo apt install npm  npm install linkedom npx esbuild node_modules/linkedom/esm/index.js \     --bundle \     --format=esm \     --outfile= linkedom.bundle.js \     --platform=neutral \     -- main-fields = module,main           Code https://gitlab.com/atamariya/quickjs/-/blob/dev/ldom.js https://gitlab.com/atamariya/quickjs/-/blob/dev/net.js https://gitlab.com/atamariya/quickjs/-/blob/dev/render.js   Lessons Learnt st...

Emacs: A non-intrusive browser

Image
  Web is simple. Browser can be simpler.     Features No pop-up ads Content first (CSS and images are loaded asynchronously) No beacon or marketing pixel ( zero pixel) image tracking Split panes Fully customizable (custom theme using CSS) Fully extensible (write your plugins/extensions) Easy cookie mangement   The technical details are here .  

HTML Renderer (Emacs)

Image
  Emacs: A non-intrusive browser An Elisp implementation of HTML rendering using SVG. The browser functionality is an extension of eww . For Javascript, you can use either NodeJS or QuickJS as a JS interpreter . Developer Note: The entry point is shr-render.   Table Colspan example Rowspan example Sample Table <html>   <body>     <table border="1">       <tr bgcolor="#9acd32">         <th style="text-align:left">Title</th>         <th style="text-align:left">Artist</th>       </tr>       <tr>         <td>Empire Burlesque</td>         <td>Bob Dylan</td>       </tr>     </table>   </body> </html...

Mozilla Readability in GNU Emacs

Image
  Output using Readability (left) and original eww (right)   Mozilla Readability is a standalone version of the readability library used for Firefox Reader View . A simple hack to eww can bring the same feature in GNU Emacs. ( Note: eww already has a readable mode. This is just an alternative. Updated the post to reflect the same.)   - Install NodeJS   - Install npm modules. npm install @mozilla/readability jsdom   - Create a file readability.js with following content. Note the file location. var { Readability } = require('@mozilla/readability'); var { JSDOM } = require('jsdom'); var fs = require("fs"); var str = fs.readFileSync(process.stdin.fd).toString(); var doc = new JSDOM(str); var reader = new Readability(doc.window.document); var article = reader.parse(); console.log(article.content);     - Modify the following function to use the file location noted above . Evaluate the function. (defun mozilla-readability (start end)   (shell-command-o...

Your browser is spying on you

Image
It should come as no surprise that websites are snooping on its users. However what baffled me was that the browsers ( Mozilla Firefox, webkit and probably others) have joined their team. If your browser supports the navigator.sendBeacon() API, you should dump it right away (or atleast find a blocking mechanism).   API description from Firefox website     In the above screenshots, you can see the API in action for Webkit. Firefox doesn't even log these requests in developer console. The sad part - it's not easy to turn it off. For Firefox, you have to use some extension and hope it does what it advertises. This bug report says they don't even want to change the default. Even for Webkit which is supposedly just a rendering engine the way to turn it off is convoluted. You need to add a user script in the C code. Then in the user script JS, you need to override the function as below: navigator.sendBeacon = function(a){};   In comparison, look at this other API fo...

GNU Emacs: A configurable browser

Image
Now you can use GNU Emacs as a full featured browser. It uses webkit2gtk for rendering. Here's a short video demonstrating the features. Hit-a-hint Developer tools Features: - Adblock - Disabled tracking API (navigator.sendBeacon()) - Inline videos à la Youtube - Hit-a-Hint - Keyboard based navigation: left/right character for left/right scroll, prev/next line, prev/next page, beginning/end of buffer for top/end of page, +/-/z for zoom in/out/reset - Multi-input modes: single key interactive mode, line input mode via minibuffer and textarea input mode via new buffer - Password auto-fill and management via authinfo - Configurable Home page and search URL - Bookmarks - Download unsupported mime types - User script à la Tampermonkey / Greasemonkey - User styles - Developer tools / Web Inspector Finally you can have a browser as you want. Code: https://gitlab.com/atamariya/emacs/-/blob/dev/src/xwidget.c https://gitlab.com/atamariya/emacs/-/blob/dev/lisp/xwidget.el https://gitlab.com/a...

Build your own browser

Image
Build your own browser using GTK and webkit2. ./browser "http://www.google.com" To add content blocking, connect to the "decide-policy" signal and use webkit_policy_decision_ignore() . browser.c #include <gtk/gtkx.h> #include <webkit2/webkit2.h> int main(int argc, char* argv[]) {   // Initialize GTK+   gtk_init(&argc, &argv);   // Create an 800x600 window that will contain the browser instance   GtkWidget *window = gtk_window_new(GTK_WINDOW_TOPLEVEL);   g_signal_connect(window, "delete-event", gtk_main_quit, NULL);   gtk_window_set_default_size(GTK_WINDOW(window), 800, 600);        // Create a browser instance   WebKitWebView *webView = WEBKIT_WEB_VIEW(webkit_web_view_new());   gtk_container_add(GTK_CONTAINER(window), GTK_WIDGET(webView));   // Load a web page into the browser instance   webkit_web_view_load_uri(webView, argv[1]);   // Make sure the main window and all its contents are visib...