About me

我的相片
I'm a web and software developer from Kaohsiung, Taiwan.
I design and implement user interfaces, also contribute to open source projects.
http://penkia.net/portfolio

2014年3月16日 星期日

Oxide WebView - 在 Qt5 裡使用 Chromium 引擎

Oxide 介紹

Oxide WebView 是一個 Qt 的瀏覽器引擎, 用來取代日漸老舊的 QtWebKit. 它和 Digia 的 QtWebEngine 概念類似: 使用 Chromium 作為引擎, 並包裝 QML 的 API; 唯一差別是只有 Linux 版本, 尚無支援其他平台的計畫. 目前主要由 Canonical 開發並使用於 Ubuntu Touch 內建的網頁瀏覽器及 HTML5 程式中.

我在先前的文章中已概略地介紹了如何在純 framebuffer 環境下啟用 Oxide 和 WebGL, 以及如何打開觸控螢幕及手勢支援, 有興趣可參考.

Oxide 版的 SlateKit Shell

Oxide 版本的 SlateKit Shell 瀏覽器已經發佈至 Github. 除了操作介面外, 移植一個瀏覽器最艱難的工作就是 UserScript 和 ContextMenu 了. 在 Oxide 裡, 你可以看到原先 WebKit 的 experimental.userScriptsexperimental.onMessageReceived 需要用 WebContextScriptMessageHandler 來重寫. 我另外製作了一個簡單的範例幫助大家理解.

下載 ISO 映像檔

若你之前有使用過 SlateKit Base Technical Preview 版本的 Live OS, 這裡可以下載新版本:

功能清單

  • 觸控螢幕支援 (包括縮放及捲動)
  • 長按連結跳出選單
  • 點選輸入框自動跳出鍵盤
  • 自訂的 popup 選單 (用在 <select> 和 <option> 標籤)

閱讀模式 (Reader Mode) 和行動/桌面裝置切換 (UserAgent Switch) 的功能目前暫時關閉.

SlateKit Shell ported to Oxide WebView

Oxide WebView evolved

As Oxide developed further, more and more features has been re-enabled in the Ubuntu Touch webbrowser app, that gives us a very good example on how to port a QtWebKit application over Oxide WebView, especially the renderer-related user script and context menu.

Oxide branch of SlateKit Shell

To explain that I've created an example of Oxide WebView with user script, note that experimental.userScripts and experimental.onMessageReceived are replaced by WebContext and ScriptMessageHandler. You may also checkout the Oxide branch of SlateKit Shell.

Download ISO image

SlateKit Base Technical Preview updated accordingly:

Features

Most of works are done in one commit, with following features enabled:

  • Touch gestures
  • Context menu when long pressed
  • Custom virtual keyboard hook
  • PopUp selector menu

The Reader Mode and UserAgent Switch are temporarily disabled in Oxide branch.