README
sketch-module-web-view
A Sketch module for creating a complex UI with a webview.
Installation
To use this module in your Sketch plugin you need a bundler utility like skpm and add it as a dependency:
npm i -S sketch-module-web-view
Usage
import WebUI from 'sketch-module-web-view'
const options = {
identifier: 'unique.id', // to reuse the UI
x: 0,
y: 0,
width: 240,
height: 180,
background: NSColor.whiteColor(),
blurredBackground: false,
onlyShowCloseButton: false,
title: 'My ui',
hideTitleBar: false,
shouldKeepAround: true,
resizable: false,
frameLoadDelegate: { // https://developer.apple.com/reference/webkit/webframeloaddelegate?language=objc
'webView:didFinishLoadForFrame:': function (webView, webFrame) {
context.document.showMessage('UI loaded!')
WebUI.clean()
}
},
uiDelegate: {}, // https://developer.apple.com/reference/webkit/webuidelegate?language=objc
onPanelClose: function () {
// Stuff
// return `false` to prevent closing the panel
}
}
const webUI = new WebUI(context, require('./my-screen.html'), options)
Communicating with the webview
Executing JS on the webview from the plugin
const res = webUI.eval('someJSFunction()')
Executing JS on the webview from the another plugin or command
import { isWebviewPresent, sendToWebview } from 'sketch-module-web-view/remote'
if (isWebviewPresent('unique.id')) {
sendToWebview('unique.id', 'someJSFunction()')
}
Executing JS in the plugin from the webview
On the plugin:
options.handlers = {
nativeLog: function (s) {
context.document.showMessage(s)
}
}
On the webview:
import pluginCall from 'sketch-module-web-view/client'
pluginCall('nativeLog', 'Called from the webview')
⚠️ When using options.handlers
, the webView:didChangeLocationWithinPageForFrame:
method of the frameLoadDelegate
will be overwritten.
⚠️ When calling pluginCall
, the window.location.hash will be modified.
Inspecting the WebView
If your plugin is using a webview, chances are that you will need to inspect it at some point.
To do so, you need to add the preference:
defaults write com.bohemiancoding.sketch3 WebKitDeveloperExtras -bool true
Then you can simply right-click on your webview and click on Inspect
. The inspector should show up.