Show web content in WebviewPanel

#1

Hi all, I’m trying to add a WebviewPanel through a plugin and show simple web content from www.google.com in the panel. Here is the sample code:

/**
 * Generated using theia-plugin-generator
 */

import * as theia from '@theia/plugin';
import { request } from 'http';

export function start(context: theia.PluginContext) {
    console.log("Plugin-Start Begin");
    const informationMessageTestCommand = {
        id: 'hello-world-example-generated',
        label: "Hello World"
    };

    context.subscriptions.push(theia.commands.registerCommand(informationMessageTestCommand, (...args: any[]) => {
        const req = request(
            {
                host: 'www.google.com',
                path: '',
                method: 'GET',
            },
            response => {
                const chunks: Uint8Array[] = [];
                response.on('data', (chunk: Uint8Array) => {
                    chunks.push(chunk);
                });
                response.on('end', () => {
                    const result = Buffer.concat(chunks).toString();

                    var showOptions = new xShowOptions();
                    showOptions.area = theia.WebviewPanelTargetArea.Main;
                    showOptions.preserveFocus = false;
                    showOptions.viewColumn = 0;

                    var panel = theia.window.createWebviewPanel(
                        'viewType',
                        'View 1',
                        showOptions);

                    panel.webview.html = result;
                });
            }
        );
        req.end();
    }));

    console.log("Plugin-Start End");
}

Partial content (text) is shown but the images are not shown. Here are few errors:
GET http://localhost:3000/images/nav_logo229.png 404 (Not Found)
GET http://localhost:3000/images/branding/googlelogo/1x/googlelogo_white_background_color_272x92dp.png 404 (Not Found)
etc.

It seems like the webviewpanel is trying to fetch images from local machine instead of from web ? Please help.

[original thread by rs]

#2

[Dominique Rochefort]

We achieved something similar by putting an iframe as Webview HTML. The Webview HTML is not exactly a hosted webpage, it’s just HTML that is being rendered. For the images to load, you need the origin of the webview to match the origin of images.

#3

[rs]

Thank you very much, @dominique-rochefort . Could you please share a sample code ?

#4

[Dominique Rochefort]

webview.html = '<html><body><iframe src="https://www.google.com/"></iframe></body></html>';
#5

[Dominique Rochefort]

You may need to add some styling so that the iframe content expands to fit the whole webview panel.

#6

[rs]

Thank you very much, @dominique-rochefort