In an earlier post, you learnt about the
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
When prompted for a subject, just press
Step 1.2: Pay attention to what Emacs shows you about itself
Ensure that you see
XWIDGETS in there.
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
Step 3: Install a custom menu for
Now, install a custom menu for
Emacs Lisp snippet1 below to your
.emacs and restart your
;; 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
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
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:
- Double-click your mouse-cursor on the search box
- Take help from the
Xwidget Webkitmenu, as you see below or just press enter
- At the minbuffer prompt, enter the search string and press
If everything goes well, you will be welcomed with the following screen.
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
To edit HTML Textareas, proceed as above i.e., Press
RET on the text area.
Once you do that, the browser opens a buffer named
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.
Once you end the edit of textarea, the browser wraps around the softbreaks with newline escapes.
Switch to the browser window, and you will see the new contents of text area.
That is all.
Xwidget Webkit browser, as on the day of writing, has it’s drawbacks. Specifically, I noticed the following things:
- The browser refuses to take commands via the menu.
- The browser display flickers as I type text on the minibuffer.
- Submitting textareas is a hit or a miss affair.
- 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.