Why a minimal browser, when there is a full-featured one? Introducing`XWidget Webkit`: A state-of-the-art browser for your modern Emacs


In an earlier post, you learnt about the Eww: The Emacs Web Wowser1.  That browser is a very minimal one. It extracts texts and images from webpages, and renders it.  It doesn’t do much more. Notably, it doesn’t support Javascript or other modern features that makes web pages very rich.

If you are one of those users, who is convinced that what is labeled as minimal is in actual fact crippled, and prefer to stay miles away from minimal stuff,  you need not shy away from browsing within Emacs. There is an alternative browser just for you.  It is called Xwidget Webkit.  The browser is a modern one, and it is as feature-rich as any other browser you have used or heard of.  In this article, I give you a quick introduction to using this browser.

Specifically, you will learn how to fill forms and edit textareas in HTML pages.  Yes, you heard that right.  The workflow for these steps are different and  you need to change your old habits, to make full use of the XWidget Webkit 1 Browser.  The browser made it’s appearance in Emacs 251.  So, if you are using a older Emacs, you definitely need to upgrade your Emacs.

Before I delve in to the details, here are a couple of videos that demonstrates the power of Xwidget Webkit browser. The first video demonsrates how you edit forms on web and the second video demonstrates how you edit textareas on web.

Fill forms with XWidget Webkit Browser

Edit Textareas with XWidget Webkit Browser

Step 1: Ensure that your Emacs supports XWIDGETS

How do you check if your Emacs supports XWIDGETS?  You check your Emacs’ features by pretending as if you are reporting a bug.  Yes, you heard it right!  You pretend as if you are  reporting a bug, and stop short of reporting it.

Step 1.1: Pretend that you are a filing bug report

Screenshot from 2018-08-18 11-27-20

When prompted for a subject, just press Enter.

Step 1.2: Pay attention to what Emacs shows you about itself

Ensure that you see XWIDGETS in there.

Screenshot from 2018-08-18 11-29-27

Step 2:  If your Emacs has no XWIDGETS support, find a Emacs that supports one, or build one yourself

Details of how to build a custom Emacs is beyond the scope of this article.  You will learn about it in one of the future posts.

For now, either grab a Emacs that has XWIDGETS support built in.  If you who are willing to build a custom Emacs, let me leave a hint.  If you are on Debian Unstable and building Emacs 26.1, you need libwebkit2gtk-4.0 and libwebkit2gtk-4.01.

Step 3: Install a custom menu for Xwidget Webkit

Now, install a custom menu for Xwidget Webkit.

Copy the Emacs Lisp snippet1 below to your .emacs and restart your Emacs.

;; https://raw.githubusercontent.com/emacksnotes/emacsnotes.wordpress.com/master/my-xwidget-menu.el

(require 'xwidget)

(when
    (featurep 'xwidget-internal)
  (easy-menu-define my-xwidget-tools-menu nil "Menu for Xwidget Webkit."
    `("Xwidget Webkit" :visible
      (featurep 'xwidget-internal)
      ["Browse Url ..." xwidget-webkit-browse-url :help "Ask xwidget-webkit to browse URL"]
      ["End Edit Textarea" xwidget-webkit-end-edit-textarea :help "End editing of a webkit text area"]))
  (easy-menu-add-item menu-bar-tools-menu nil my-xwidget-tools-menu 'separator-net)
  (easy-menu-define my-xwidget-menu xwidget-webkit-mode-map "Menu for Xwidget Webkit."
    '("Xwidget Webkit"
      ["Browse Url" xwidget-webkit-browse-url :help "Ask xwidget-webkit to browse URL"]
      ["Reload" xwidget-webkit-reload :help "Reload current url"]
      ["Back" xwidget-webkit-back :help "Go back in history"]
      "--"
      ["Insert String" xwidget-webkit-insert-string :help "current webkit widget"]
      ["End Edit Textarea" xwidget-webkit-end-edit-textarea :help "End editing of a webkit text area"]
      "--"
      ["Scroll Forward" xwidget-webkit-scroll-forward :help "Scroll webkit forwards"]
      ["Scroll Backward" xwidget-webkit-scroll-backward :help "Scroll webkit backwards"]
      "--"
      ["Scroll Up" xwidget-webkit-scroll-up :help "Scroll webkit up"]
      ["Scroll Down" xwidget-webkit-scroll-down :help "Scroll webkit down"]
      "--"
      ["Scroll Top" xwidget-webkit-scroll-top :help "Scroll webkit to the very top"]
      ["Scroll Bottom" xwidget-webkit-scroll-bottom :help "Scroll webkit to the very bottom"]
      "--"
      ["Zoom In" xwidget-webkit-zoom-in :help "Increase webkit view zoom factor"]
      ["Zoom Out" xwidget-webkit-zoom-out :help "Decrease webkit view zoom factor"]
      "--"
      ["Fit Width" xwidget-webkit-fit-width :help "Adjust width of webkit to window width"]
      ["Adjust Size" xwidget-webkit-adjust-size :help "Manually set webkit size to width W, height H"]
      ["Adjust Size Dispatch" xwidget-webkit-adjust-size-dispatch :help "Adjust size according to mode"]
      ["Adjust Size To Content" xwidget-webkit-adjust-size-to-content :help "Adjust webkit to content size"]
      "--"
      ["Copy Selection As Kill" xwidget-webkit-copy-selection-as-kill :help "Get the webkit selection and put it on the kill-ring"]
      ["Current Url" xwidget-webkit-current-url :help "Get the webkit url and place it on the kill-ring"]
      "--"
      ["Show Element" xwidget-webkit-show-element :help "Make webkit xwidget XW show a named element ELEMENT-SELECTOR"]
      ["Show Id Element" xwidget-webkit-show-id-element :help "Make webkit xwidget XW show an id-element ELEMENT-ID"]
      ["Show Id Or Named Element" xwidget-webkit-show-id-or-named-element :help "Make webkit xwidget XW show a name or element id ELEMENT-ID"]
      ["Show Named Element" xwidget-webkit-show-named-element :help "Make webkit xwidget XW show a named element ELEMENT-NAME"]
      "--"
      ["Cleanup" xwidget-cleanup :help "Delete zombie xwidgets"]
      ["Event Handler" xwidget-event-handler :help "Receive xwidget event"]
      "--"
      ["Xwidget Webkit Mode" xwidget-webkit-mode :style toggle :selected xwidget-webkit-mode :help "Xwidget webkit view mode"])))

Step 4: Check  that you have Xwidget Webkit in your Tools menu

Screenshot from 2018-08-18 12-35-24

Step 4: Browse some site, say Google

Try using the above menu item, and you will find that it fails to work.  You will see an error report that goes like

posn-set-point: Position not in text area of window

This is an intermittent bug, possibly because no one had ever thought of invoking the browser with Menu. Overlook the error. And proceed by invoking the command directly with M-x xwidget-webkit-browse-url RET https://www.google.com RET.

Step 4: Once you are in your browser, check out the Xwidget Webkit menu

Screenshot from 2018-08-18 12-49-10

Step 5: Enter a search string, in to the textbox:  Remember the quirk

Now enter a search string, say emacs xwidget webkit in to the search box.

Don’t be in a hurry.

There is a specific way in which you need to enter the search text in to the search box.  Here are the steps:

  1. Double-click your mouse-cursor on  the search box
  2. Take help from the Xwidget Webkit menu, as you see below or just press enter RET
  3. At the minbuffer prompt, enter the search string and press Enter to submit

Screenshot from 2018-08-18 12-46-32

If everything goes well, you will be welcomed with the following screen.

Screenshot from 2018-08-18 13-04-36

Use the Xwidget Webkit menu to scroll the buffer, collect notes for your  personal diary or step back through your web history.

Step 6:  Editing HTML textareas, say Wiki pages on Github: Remember the quirk

Screenshot from 2018-08-18 15-32-35

To edit HTML Textareas, proceed as above i.e., Press RET on the text area.

Screenshot from 2018-08-18 15-36-43

Once you do that, the browser opens a buffer named textarea in Fundamental Mode.  The buffer is filled with current text.  Edit the text area to your heart’s content.  To submit the content back to the browser, use End Edit Textarea as shown below.

Screenshot from 2018-08-18 15-38-01

Once you end the edit of textarea, the browser wraps around the softbreaks with newline escapes.

Screenshot from 2018-08-18 15-39-07

Switch to the browser window, and you will see the new contents of text area.

Screenshot from 2018-08-18 15-38-47

That is all.

Concluding Words

The Xwidget Webkit browser, as on the day of writing, has it’s drawbacks. Specifically, I noticed the following things:

  1.  The browser refuses to take commands via the menu.
  2. The browser display flickers as I type text on the minibuffer.
  3. Submitting textareas is a hit or a miss affair.
  4. The mouse cursor disappears for a brief period, as soon as you submit text i.e.,  The handing over of X events from Emacs to Webkit is a bit tardy.  This behaviour is very disorienting.

Despite all these drawbacks, I am convinced that Xwidget Webkit browser is the future of browsing web within Emacs.  Those among you who develop applications for the web, have a lot to cheer about this browser.

Advertisements

1 thought on “Why a minimal browser, when there is a full-featured one? Introducing`XWidget Webkit`: A state-of-the-art browser for your modern Emacs

  1. Nice post. Are you aware there is also EXWM, which allows you to use your default browser (Chrome, Firefox, etc) inside Emacs Window Manager.

    Like

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this:
search previous next tag category expand menu location phone mail time cart zoom edit close