nw.js icon indicating copy to clipboard operation
nw.js copied to clipboard

Can't set webview src to a Blob URL

Open BrandonXLF opened this issue 4 years ago • 3 comments

NWJS Version : 0.52.3 Operating System : Windows 10

Expected behavior

The webview should load with the contents of the Blob.

Actual behavior

The webview fails to load the src with the error ERR_FILE_NOT_FOUND.

How to reproduce

Create a webview and load a blob into it.

let blob = new Blob(['Hello World!'], {type: 'text/html'}),
    webview = document.createElement('webview');

document.body.append(webview);
webview.src = URL.createObjectURL(blob);

The above code works as expected on version 0.49.2, but it fails on every version since that I've tried since it.

BrandonXLF avatar Apr 13 '21 06:04 BrandonXLF

that would be a local file of sorts and ref the docs you have to add some flags to your package.json to do that https://nwjs.readthedocs.io/en/nw20/References/webview%20Tag/

haviduck avatar May 25 '21 01:05 haviduck

that would be a local file of sorts and ref the docs you have to add some flags to your package.json to do that https://nwjs.readthedocs.io/en/nw20/References/webview%20Tag/

Unfortunately adding the permission and attribute doesn't resolve the issue.

BrandonXLF avatar Jun 11 '21 05:06 BrandonXLF

I found a different way to to it.

Instead of

let blob = new Blob(['Hello World!'], {type: 'text/html'}),
 webview = document.createElement('webview');

document.body.append(webview);
webview.src = URL.createObjectURL(blob);

I am using: webview.loadDataWithBaseUrl(``data:text/html;utf-8,${encodeURIComponent('Hello World!')}``, 'chrome-extension://' + chrome.runtime.id + '/'); (I don't know how to escape the ` char in the code)

Additionally, you have to add the flags in the manifest:

  "webview": {
      "partitions": [
         {
           "name": "trusted",
           "accessible_resources": [ "<all_urls>" ]
         }
      ]
   }

And, this is how it looks the webview in the HTML:

<webview role="window"
      partition="persist:trusted"
      allowtransparency
      src="about:blank" <!-- Important -->
 ></webview>

For unknown reasons, the transparency wasn't working as expected. I had to embebed the following line in the HTML:

<!-- BODY {background:none transparent;}-->\n

migarc1 avatar Sep 12 '22 19:09 migarc1