Convert Figma logo to code with AI

pwnall logochromeview

Proof of concept Android WebView implementation based on Chromium code

1,691
435
1,691
45

Top Related Projects

18,959

The official GitHub mirror of the Chromium source

113,668

:electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS

.NET (WPF and Windows Forms) bindings for the Chromium Embedded Framework

Python bindings for the Chromium Embedded Framework (CEF)

Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.

88,205

JavaScript API for Chrome and Firefox

Quick Overview

ChromeView is an Android library that embeds the Chrome browser into Android applications. It provides a WebView-like interface for developers to integrate Chrome's rendering engine and features into their apps, offering better performance and compatibility compared to the standard WebView.

Pros

  • Improved performance and compatibility with modern web standards
  • Access to Chrome's advanced features and security updates
  • Consistent user experience across different Android devices
  • Easier integration compared to building a custom browser from scratch

Cons

  • Larger app size due to the inclusion of Chrome components
  • Potential compatibility issues with older Android versions
  • Limited customization options compared to a fully custom browser implementation
  • Dependency on Google's Chrome updates and policies

Code Examples

  1. Initializing ChromeView:
ChromeView chromeView = new ChromeView(context);
setContentView(chromeView);
chromeView.loadUrl("https://www.example.com");
  1. Adding a WebViewClient:
chromeView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;
    }
});
  1. Enabling JavaScript:
WebSettings webSettings = chromeView.getSettings();
webSettings.setJavaScriptEnabled(true);

Getting Started

  1. Add the ChromeView dependency to your build.gradle file:
dependencies {
    implementation 'com.github.pwnall:chromeview:1.0.0'
}
  1. Add ChromeView to your layout XML:
<com.pwnall.chromeview.ChromeView
    android:id="@+id/chrome_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
  1. Initialize ChromeView in your Activity:
ChromeView chromeView = findViewById(R.id.chrome_view);
chromeView.loadUrl("https://www.example.com");

Competitor Comparisons

18,959

The official GitHub mirror of the Chromium source

Pros of Chromium

  • Full-featured web browser engine with extensive capabilities
  • Actively maintained by Google and a large open-source community
  • Supports a wide range of platforms and devices

Cons of Chromium

  • Large codebase and complex build process
  • Higher resource requirements for integration
  • Steeper learning curve for developers

Code Comparison

ChromeView:

WebView webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("https://example.com");

Chromium:

content::WebContents* web_contents = browser->tab_strip_model()->GetActiveWebContents();
web_contents->GetMainFrame()->LoadURL(GURL("https://example.com"));

Summary

ChromeView is a lightweight WebView wrapper for Android, offering easier integration but limited features. Chromium provides a full browser engine with extensive capabilities but requires more resources and expertise to implement. ChromeView is suitable for simple web content embedding, while Chromium is ideal for building full-featured browser applications or when advanced web technologies are needed.

113,668

:electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS

Pros of Electron

  • Cross-platform development for desktop applications (Windows, macOS, Linux)
  • Rich ecosystem with extensive documentation and community support
  • Allows use of web technologies (HTML, CSS, JavaScript) for desktop app development

Cons of Electron

  • Larger application size due to bundled Chromium and Node.js
  • Higher memory usage compared to native applications
  • Potential security concerns due to full system access

Code Comparison

Electron (main process):

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({ width: 800, height: 600 })
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

ChromeView (Android):

import org.xwalk.core.XWalkView;

XWalkView mXWalkView = (XWalkView) findViewById(R.id.xwalkview);
mXWalkView.load("file:///android_asset/www/index.html", null);

Key Differences

  • Electron focuses on desktop applications, while ChromeView is for Android
  • Electron provides a full Node.js runtime, ChromeView is more limited
  • ChromeView is specifically for embedding web content in Android apps, while Electron creates standalone desktop applications

.NET (WPF and Windows Forms) bindings for the Chromium Embedded Framework

Pros of CefSharp

  • More comprehensive .NET integration, allowing for easier development of Windows applications
  • Supports multiple .NET frameworks (WPF, WinForms, OffScreen)
  • More actively maintained with frequent updates and bug fixes

Cons of CefSharp

  • Larger footprint and more complex setup compared to ChromeView
  • Limited to Windows platforms, whereas ChromeView is Android-focused
  • Steeper learning curve for developers new to CEF

Code Comparison

CefSharp:

public class BrowserForm : Form
{
    public ChromiumWebBrowser browser;

    public BrowserForm()
    {
        browser = new ChromiumWebBrowser("https://example.com");
        this.Controls.Add(browser);
    }
}

ChromeView:

public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ChromeView webView = new ChromeView(this);
        setContentView(webView);
        webView.loadUrl("https://example.com");
    }
}

The code snippets demonstrate the basic setup for each library. CefSharp requires more configuration but offers greater flexibility, while ChromeView provides a simpler implementation for Android applications.

Python bindings for the Chromium Embedded Framework (CEF)

Pros of CEFPython

  • More comprehensive and feature-rich, offering full Chromium Embedded Framework functionality
  • Supports multiple programming languages, including Python, C++, and Java
  • Actively maintained with regular updates and bug fixes

Cons of CEFPython

  • Larger footprint and more complex setup compared to ChromeView
  • May be overkill for simple web view implementations in Android apps
  • Requires more system resources due to its comprehensive nature

Code Comparison

ChromeView (Java):

WebView webView = new WebView(context);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("https://example.com");

CEFPython (Python):

from cefpython3 import cefpython as cef
cef.Initialize()
browser = cef.CreateBrowserSync(url="https://example.com")
cef.MessageLoop()
cef.Shutdown()

Summary

CEFPython offers a more robust and versatile solution for embedding web content across multiple platforms and languages. It provides full Chromium functionality but comes with increased complexity and resource requirements. ChromeView, on the other hand, is a simpler solution specifically tailored for Android applications, offering easier integration but with limited features compared to CEFPython.

Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.

Pros of Playwright

  • Cross-browser support: Playwright supports Chromium, Firefox, and WebKit, offering broader compatibility
  • Powerful automation capabilities: Provides advanced features like network interception, mobile emulation, and parallel execution
  • Active development and community: Regularly updated with new features and extensive documentation

Cons of Playwright

  • Steeper learning curve: More complex API and setup process compared to ChromeView's simplicity
  • Heavier resource usage: Requires more system resources due to its comprehensive feature set
  • Overkill for simple web view tasks: May be excessive for basic web view implementations in Android apps

Code Comparison

ChromeView (Java):

WebView webView = new WebView(context);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("https://example.com");

Playwright (JavaScript):

const browser = await playwright.chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: 'screenshot.png' });
await browser.close();

ChromeView is more suitable for embedding web content in Android apps, while Playwright excels in cross-browser testing and automation scenarios. ChromeView offers a simpler API for basic web view functionality, whereas Playwright provides a comprehensive set of tools for advanced web automation and testing across multiple browsers.

88,205

JavaScript API for Chrome and Firefox

Pros of Puppeteer

  • More actively maintained with frequent updates and a larger community
  • Offers a high-level API for browser automation and testing
  • Supports both Chrome and Firefox browsers

Cons of Puppeteer

  • Heavier resource usage due to full browser automation
  • Steeper learning curve for beginners
  • Requires Node.js environment to run

Code Comparison

Puppeteer:

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({path: 'screenshot.png'});
await browser.close();

ChromeView:

WebView webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("https://example.com");

Key Differences

  • Puppeteer is a Node.js library for browser automation, while ChromeView is an Android WebView implementation
  • Puppeteer focuses on headless browser testing and scraping, whereas ChromeView is for embedding web content in Android apps
  • Puppeteer offers more advanced features like network interception and performance analysis, while ChromeView provides basic web rendering functionality

Use Cases

  • Puppeteer: Web scraping, automated testing, generating PDFs, performance monitoring
  • ChromeView: Displaying web content within Android applications, hybrid mobile app development

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Deprecation Notice

This project is un-maintained. The recommended alternative is the Crosswalk Project.

I did not have the time to keep the project up to date. In the mean time, the fine folks at Intel did a great job of embedding Chromium using the Content Shell API, which is what Chromium's developers intended. Therefore, I cannot justify spending any time on this. The original README and the code are here for historical purposes.

I think that the Crosswalk Project will meet all your embedding needs, and I'm contributing to it.

ChromeView

ChormeView works like Android's WebView, but is backed by the latest Chromium code.

Why ChromeView

ChromeView lets you ship your own Chromium code, instead of using whatever version comes with your user's Android image. This gives your application early access to the newest features in Chromium, and removes the variability due to different WebView implementations in different versions of Android.

Setting Up

This section explains how to set up your Android project to use ChromeView.

Get the Code

Check out the repository in your Eclipse workspace, and make your project use ChromeView as a library. In Eclipse, right-click your project directory, select Properties, choose the Android category, and click on the Add button in the Library section.

Copy Data

Copy assets/webviewchromium.pak to your project's assets directory. Star this bug if you agree that this is annoying.

In your Application subclass, call ChromeView.initialize and pass it the application's context. For example,

Initialize Chromium

import us.costan.chrome.ChromeView;
import android.app.Application;

public class MyApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        ChromeView.initialize(this);
    }
}

Now you can use ChromeView in the same contexts as you would use WebView.

Star some bugs

If you use this project and want to help move it along, please star the following bugs.

Usage

To access ChromeView in the graphical layout editor, go to the Palette, expand the Custom and Library Views section, and click the Refresh button.

ChromeView supports most of the WebView methods. For example,

ChromeView chromeView = (ChromeView)findViewById(R.id.gameUiView);
chromeView.getSettings().setJavaScriptEnabled(true);
chromeView.loadUrl("http://www.google.com");

JavaScript

ChromeView's addJavaScriptInterface exposes public methods that are annotated with @ChromeJavascriptInterface. This is because WebView's @JavascriptInterface is only available on Android 4.2 and above, but ChromeView targets 4.0 and 4.1 as well.

import us.costan.chrome.ChromeJavascriptInterface;

public class JsBindings {
    @ChromeJavascriptInterface
    public String getHello() {
        return "Hello world";
    }
}

chromeView.addJavascriptInterface(new JsBindings(), "AndroidBindings");

Cookies

ChromeCookieManager is ChromeView's equivalent of CookieManager.

ChromeCookieManager.getInstance().getCookie("https://www.google.com");

Faster Development

To speed up the application launch on real devices, remove the libs/x86 directory. When developing on Atom devices, remove the ARM directory instead.

Remember to git checkout -- . and get the library back before building a release APK.

Internet Access

If your application manifest doesn't specify the INTERNET permission, the Chromium code behind ChromeView silentely blocks all network requests. This is mentioned here because it can be hard to debug.

Building

The bulk of this project is Chromium source code and build products. With the appropriate infrastructure, the Chromium bits can be easily updated.

crbuild/vm-build.md contains step-by-step instructions for setting up a VM and building the Chromium for Android components used by ChromeView.

Once Chromium has been successfully built, running crbuild/update.sh will copy the relevant bits from the build VM into the ChromeView source tree.

Issues

Attempting to scroll the view (by swiping a finger across the screen) does not update the displayed image. However, internally, the view is scrolled. This can be seen by displaying a stack of buttons and trying to click on the topmost one. This issue makes ChromeView mostly unusable in production.

The core issue is that the integration is done via AwContent in the android_webview directory of the Chromium source tree, which is experimental and not intended for embedding use. The "right" way of doing this is to embed a ContentView from the content directory, or a Shell in content/shell. Unfortunately, these components' APIs don't match WebView nearly as well as AwContent, and they're much harder to integrate. Pull requests or a fork would be welcome.

This repository is rebased often, because the large files in lib/ would result in a huge repository if new commits were created for each build. The large files are Chromium build products.

Contributing

Please don't hesitate to send your Pull Requests!

Please don't send pull requests including the binary assets or code extracted from Android (assets/, libs/, src/com/googlecode/ and src/org/android). If your Pull Request requires updated Android bits, mention that in the PR description, and I will rebuild the Android bits.

Copyright and License

The directories below contain code from the The Chromium Project, which is subject to the copyright and license on the project site.

  • assets/
  • libs/
  • src/com/googlecode
  • src/org/chromium

Some of the source code in src/us/costan/chrome has been derived from the Android source code, and is therefore covered by the Android project licenses.

The rest of the code is Copyright 2013, Victor Costan, and available under the MIT license.