skpm / sketch-module-web-view Goto Github PK

On running the plugin I get:

TypeError: exports[key] is not a function. (In 'exports[key](context)', 'exports[key]' is undefined)
line: 330
column: 17

This is my-command.js:

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(),
  onlyShowCloseButton: false,
  title: 'My ui 10',
  hideTitleBar: false,
  shouldKeepAround: true,
  frameLoadDelegate: { // https://developer.apple.com/reference/webkit/webframeloaddelegate?language=objc
    'webView:didFinishLoadForFrame:': function (webView, webFrame) {
      context.document.showMessage('UI loaded!')
      WebUI.clear()
    }
  },
  uiDelegate: {}, // https://developer.apple.com/reference/webkit/webuidelegate?language=objc
  onPanelClose: function () {
    // Stuff
  }
}

const webUI = new WebUI(context, 'test.html', options)

When I make a 'pluginCall' from the webview, the context selection in the plugin js file is null. Is there a way to update the current context ? Thanks!

Out of the box, the template is running fine and is succeeding ind sending back the random number via webContents.executeJavaScript().
When I add a new function to my webview.js, like

window.callMe = function (arg) {
  console.log(`I was called with ${arg}`);
}

and call it with webContents.executeJavaScript('callMe("argument")')

The call would never reach the function in webview.js.
It seems, that it just works with the example function, included in the template. No added function would be called. Am I missing something in "registering" the function somewhere else?

The other way of communiucation, via pluginCall() always works.

When inspecting the web view with Safari's web developer tools, the following output appears in the console:

TypeError: _sketchModuleWebView2['default'].clear is not a function. (In '_sketchModuleWebView2['default'].clear()', '_sketchModuleWebView2['default'].clear' is undefined)

my-command.js looks like this:

import WebUI from 'sketch-module-web-view'

export default function (context) {
  const options = {
    identifier: 'unique.id', // to reuse the UI
    x: 0,
    y: 0,
    width: 240,
    height: 180,
    background: NSColor.whiteColor(),
    onlyShowCloseButton: false,
    title: 'My ui 10',
    hideTitleBar: false,
    shouldKeepAround: true,
    frameLoadDelegate: { // https://developer.apple.com/reference/webkit/webframeloaddelegate?language=objc
      'webView:didFinishLoadForFrame:': function (webView, webFrame) {
        context.document.showMessage('UI loaded!')
        WebUI.clear()
      }
    },
    uiDelegate: {}, // https://developer.apple.com/reference/webkit/webuidelegate?language=objc
    onPanelClose: function () {
      // Stuff
    }
  };
  options.handlers = {
    nativeLog: function (s) {
      context.document.showMessage(s)
    }
  };

  const webUI = new WebUI(context, 'test.html', options)
}

In the electron-api branch I'm no longer able to right click on the webview to be able to Inspect it. The only option I get in the menu is "Reload". I'm not entirely when this started happening in the last few months. I'm not yet sure how to debug the cause so I figured I'd start here. Is this something you've made configurable in this branch? If not, is it working for you? If that's the case, I guess the issue is on my end.

Since I updated my plugin to the latest version of skpm and sketch-module-web-view, I been getting reports that the plugin doesn't work for some users.

Here is what the console log says:

SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode..
Plugin “commandRenameLayer”, line 432:
» const SuperInit = (0, _runtime.SuperCall)(NSStringFromSelector("init"), [], { type: "@" });

I can't reproduce the issue myself but can it be related to the OS/Safari version?

lib/index.js has –what I believe is an error– in it.
When changing

var webView = panel.contentView().subviews()[0]

into

var subviews = panel.contentView().subviews()
var webView = subviews[subviews.length-1]

I got rid of an error (stringByEvaluatingJavaScriptFromString undefined) when calling sendToWebview().

I find that you called panel.center() function which overwrite the x, y property in options, does this method called for some particular purpose?

I'm just getting started with this module and skpm in general, and am running to an issue right off the bat, so I apologize if this is a silly issue.

I created a plugin using the skpm generator, installed this module, and then used example code provided:

import BrowserWindow from 'sketch-module-web-view'

export default function() {
  const options = {
    identifier: 'unique.id',
  }

  const browserWindow = new BrowserWindow(options)
  // browserWindow.loadURL('https://google.com')
}

As soon as I get to new BrowserWindow everything hangs; I can't seem to call any code afterward. Sketch opens and a web view window opens, but that's it. Subsequent attempts to exit my skpm process and re-run it results in Sketch crashing with this error:

2018-08-13 23:44:17.249 sketchtool[72395:4518770] *** Terminating app due to uncaught exception 'NSInvalidReceivePortException', reason: 'connection went invalid while waiting for a reply because a mach port died'
*** First throw call stack:
(
	0   CoreFoundation                      0x00007fff4621c32b __exceptionPreprocess + 171
	1   libobjc.A.dylib                     0x00007fff6d38ac76 objc_exception_throw + 48
	2   CoreFoundation                      0x00007fff462addcd +[NSException raise:format:] + 205
	3   Foundation                          0x00007fff482ff0ad -[NSConnection sendInvocation:internal:] + 2134
	4   CoreFoundation                      0x00007fff461925ac ___forwarding___ + 748
	5   CoreFoundation                      0x00007fff46192238 _CF_forwarding_prep_0 + 120
	6   sketchtool                          0x00000001071dc7b5 -[BCSTRunCommand waitForLaunchOfApplicationWithEngine:] + 581
	7   Foundation                          0x00007fff482f5525 __NSFireDelayedPerform + 409
	8   CoreFoundation                      0x00007fff461a0064 __CFRUNLOOP_IS_CALLING_OUT_TO_A_TIMER_CALLBACK_FUNCTION__ + 20
	9   CoreFoundation                      0x00007fff4619fcd7 __CFRunLoopDoTimer + 1095
	10  CoreFoundation                      0x00007fff4619f7da __CFRunLoopDoTimers + 346
	11  CoreFoundation                      0x00007fff46196dab __CFRunLoopRun + 2427
	12  CoreFoundation                      0x00007fff461961a3 CFRunLoopRunSpecific + 483
	13  CoreFoundation                      0x00007fff461d4c33 CFRunLoopRun + 99
	14  sketchtool                          0x00000001071a337c ECCommandLineMain + 293
	15  sketchtool                          0x00000001071dff31 main + 33
	16  libdyld.dylib                       0x00007fff6dfa4015 start + 1
)
libc++abi.dylib: terminating with uncaught exception of type NSException

Some specs:

• Sketch v50.2
• skpm v1.1.4
• sketch-module-web-view v1.2.3
• node v10.7.0

Hi, I've been trying to render a React/Preact component to sketch-module-web-view and was running into a bit of trouble. I've managed to get the webview to render the html file but can't figure out exactly how to reference the required JS to render my React component.

my-component.html situated in /plugin.sketchplugin/Contents/Resources/

<html>
<head>
  <title>Preferences</title>
</head>
<body>
  <div id="container"></div>
  <script src="my-component.js"></script>
</body>
</html>

my-component.js situated in /Resources/

import { render, Component } from 'preact';

class MyComponent extends Component {

  render() {
    return (
      <div>
        <h1>My Component</h1>
      </div>
    )
  }

}

render(<MyComponent />, document.getElementById('container'));

Is this possible at all with the plugin? Thanks!

Hi there,

I am currently integrating the Monaco Editor into a webview, and noticed some interesting behaviour.

After the editor is loaded, it's not possible to double click text or drag to select it, which is a feature that is powered by web workers. However, I know that they are working because syntax highlighting is still functioning.

You can reproduce by loading the Monaco Playgound as the source of a webview, and try to use your mouse to select some text.

This could be related to worker support, but I am wondering if it could also be related to how the webview is constructed. Does that sound plausible?

Any input appreciated,
Ryen

Hi,

first of all... much appreciation for your module!

Unfortunately, I having issues trying to render a web view created using Angular 4. I new to developing plugins for Sketch and I would like to display an SPA inside the web view.

Could you be so kind, to assist me on this topic?

Best regards

I'm referring to the "executing JS on the webview from the plugin" example.

I run the above command after creating a WebUI instance. Nothing happens. The someJSFunction() doesn't exist on the web view but I'd expect some kind of error à la someJSFunction() is not a function. This appears neither in the plugin log (viewed with skpm log -f) nor in the Safari Web Inspector panes.

Where do I view the web error logs?
When creating someJSFunction, how do I add it to the web view?

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(),
  onlyShowCloseButton: false,
  title: 'My ui 3',
  hideTitleBar: false,
  shouldKeepAround: true,
  frameLoadDelegate: { // https://developer.apple.com/reference/webkit/webframeloaddelegate?language=objc
    'webView:didFinishLoadForFrame:': function (webView, webFrame) {
      context.document.showMessage('UI loaded!')
      WebUI.clear()
    }
  },
  uiDelegate: {}, // https://developer.apple.com/reference/webkit/webuidelegate?language=objc
  onPanelClose: function () {
    // Stuff
  }
}

const webUI = new WebUI(context, 'test.html', options)
const res = webUI.eval('someJSFunction()')

Hi Mathieu,

I've spent a few hours trying to get your module to work, but without success. Can you maybe give a few pointers on how this could be used in a .sketchplugin? A bare bone example would already be a big help.

Best,
Andre

Trying to setup webpack-dev-server to push hot changes to the Resources index.html file.
I've tried two approaches so far (both https, seems AppTransport has an issue with non-https)

1. Connecting via the new WebUI call:
   new WebUI(context, 'https://localhost:8080', options)
   Error: 2/13/17 1:17:20.709 PM Main Command (Sketch Plugin)[575]: TypeError: null is not an object (evaluating 'context.plugin.urlForResourceNamed(htmlName).path')

2. Connecting in the index.html file
   <script src="https://localhost:8080"></script>
   Error: Failed to load resource: An SSL error has occurred and a secure connection to the server cannot be made.

Think this is possible?

Using skpm and the example code from the sketch-module-web-view Readme, I get the following error when running my-command:

TypeError: null is not an object (evaluating 'context.plugin.urlForResourceNamed(frameLocation).path')
line: 214
stack: WebUI

__webpack_require__

run
run@[native code]
column: 70
 «Plugin Output»

Looking at the plugin package, I see that the Resources folder is missing. Maybe that's the reason? How do I add the Resources folder so it gets included to the plugin on build?

Hi there,

is there a way to make the WebView start right at the top of the panel, below the TitleBar?
I'd like the WebView to fill the entire frame. Whatever I try results in the TitleBar disappearing or not taking drag events anymore. It's also pretty nasty that the WebView does not seem to care for the BorderRadius the panel has.

I think if we could get this working and keep the WebView from bouncing on scroll, we could build some pretty neat things!

Thanks!

Whenever I use the getPosition method it returns the wrong Y position. Instead of the distance from the top I get the distance from the bottom.

If I'm not mistaken, the module wants to enable easy plugin UI creation for designers/developers. Designers especially may not know enough about web app creation to make use of the module.

An understandable tutorial, similar to this one but with a focus on JS, skpm and sketch-module-web-view, would help programming beginners to create Sketch plugins with web view UIs.

Hi there,

I'm trying out skpm with react, and I'm not sure if I'm going about it the right way. Listing the steps I followed below. Appreciate any feedback.

1. Run skpm init and follow the setup
2. Add react npm install --save react react-dom
3. Add web view module for sketch npm i -S sketch-module-web-view
4. Add a command that creates the web view. Code here
5. In the Resources folder, create the react component that will be included in the web view. Code here

I couldn't figure out how/where to include the react component in the webview. So I manually added a HTML file in the plugin's Resources folder. Code here

Hi, I'm trying to find a way to set the panel corner to 0, can you provide an option to reset panel corner?

Thanks for your help

Is there a way to hide the title bar and still have the possibility to drag the window around? Only works when the window is not focused... Thanks!

Hello! I have an issue when trying to execute a plugin function from the webview. Sketch keeps crashing... It seems to be the "options.handlers" in my plugin Javascript file... Can you help me ? Thanks!

Hey, I think you accidentally broke the readme.

Hello! I've been poking around trying to find a solution for this, but haven't figured it out. Is it possible with the current set up to register a handler that runs whenever the webview is closed with esc or the close button?

Hey there

Is there anyway we can add a link from within the webview that opens in the users default browser?

I have tried
<a href="https://google.com>Google</a> which navigates the webview to google (expected)
and
a href="https://google.com" target="_blank">Google</a> which seems to do nothing

Is this possible?

v 1.1.6

I am trying to make a browserWindow with the focusable option set to false:

const options = {
  identifier: 'unique.id',
  redirectTo: "/list",
  width: 240,
  height: 480,
  show: false,
  focusable: false,
}
let browserWindow = new BrowserWindow(options)

However when I run my plugin I get this error in the console:

TypeError: panel.setDisableKeyOrMainWindow is not a function. (In 'panel.setDisableKeyOrMainWindow(true)', 'panel.setDisableKeyOrMainWindow' is undefined)

which is here in the code

Some background (in case this can be accomplished in another way)

I am listening to the action "SelectionChanged.finish". Right now that focuses my webview. Ideally I would want it to not focus (because I could have the alwaysOnTop option set to true). This way you can refer to the info in the panel but the sketch window is still focused for use of hotkeys etc.

I also tried to do browserWindow.blur() at the end of my SelectionChanged handler but that doesn't seem to work either.

Any help would be greatly appreciated!!

Hi!

If I try to set 'webView:willPerformClientRedirectToURL:delay:fireDate:forFrame:' as a frameLoadDelegate, the plugin causes Sketch to crash.

Heres the code I'm using:

const panel = new WebUI(context, 'panel/panel.html', {
    identifier: 'com.frontify.sketch-plugin.panel',
    x: 0,
    y: 0,
    width: 40,
    height: 160,
    blurredBackground: true,
    onlyShowCloseButton: true,
    hideTitleBar: false,
    shouldKeepAround: true,
    frameLoadDelegate: {
        'webView:didFinishLoadForFrame:'(webView, webFrame) {
            context.document.showMessage('UI loaded!')
        },
        'webView:willPerformClientRedirectToURL:delay:fireDate:forFrame:'(sender, URL) {
            context.document.showMessage(URL)
        }
    }
})

The 'webView:didFinishLoadForFrame:' call works. If I use the same kind of delegate without the web-view module (i.e. I write the whole thing myself) I got it to work. Am I doing something wrong here or is that maybe an issue with the module?

I'm running [email protected]. I've already ran defaults write com.bohemiancoding.sketch3 WebKitDeveloperExtras -bool true only the reload options shows up.

this environment is totally new here, and since there is not much documentation for the whole "sketch plugin development" topic i'm learning by examples.

Managed to make a react ready environment with the help of this module, but with hideTitleBar set to true i can't find a way to make a draggable area in the UI.

any advice?

I want to open window bw2 via the trigger button in window bw1, however, the following codes cannot trigger the event of ready-to-show in bw2.

after trigger 'onClickOpenPage2' in bw1, the new window shows, but its ready-to-show event is not triggered.

// bw1.js
import creatBw from './bw2.js';
const bw1 = new BrowserWindow({
  identifier: 'bw-1',
});
bw1.loadURL('page1');
bw1.webContents.on('onClickOpenPage2', () => {
  createBw();
});

// bw2.js
export default function createBw2() {
  const bw2 = new BrowserWindow({
     identifier: 'bw-2',
  });
  bw2.loadURL('page2');
  bw2.once('ready-to-show', () => {
    // cannot be triggered
    console.log('ready-to-show');
    bw2.show();
    bw2.webContents.executeJavaScript('startApp()');
  })
  return bw2;
}

Hi, i want to listen 'openDocument' action to move my panel to front of all application windows, but it seems win.moveTop() and win.focus() are not work. >> document

my codes

import { getWebview } from 'sketch-module-web-view/remote';

export function onOpenDocument() {
  const mainPanel = getWebview('panel');
  if (mainPanel) {
    mainPanel.moveTop();
  }
}

the plugin log prints:

TypeError: e.moveTop is not a function.

i have a code like this <Image src={require('../assets/close.png')} />, and close.png is in assets folder，but i cannot show image normally，or should i add some loaders like file-loader for png files in webpack.skpm.config.js?

It seems like rendering/scrolling performance with WKWebView is better than WebView from a preliminary test... it'd be nice to switch over possibly? Don't know if there are ramifications to that, and looking at the APIs it looks like it'd require a bit of a refactor :-/

Related: http://sketchplugins.com/d/763-webview-performance

Does the touchBar feature even work? I don't see anything about electron in your module, you're constructing the browserwindow yourself... Can you give an example for making a new touchbar layout? Thanks!

After updating from 0.1.7 to the latest version I've occurred a bug that crashes Sketch. This happens whenever I run WebUI.clean();.

As you can see in the following code, I use WebUI.clean(); on my Cancel and Save action after closing the panel. The weird things is it only happens the second time I'm calling these actions.

The first time, it will run the action and close the window. Whenever I open the window again and click the same button, Sketch will crash.

Do you have any idea why this is happening and how to fix this?

export default function (context) {
  const webUI = new WebUI(context, 'index.html', {
    identifier: 'symbols-manager.link',
    width: 900,
    height : 431,
    title: '',
    hideTitleBar: true,
    onlyShowCloseButton : true,
    shouldKeepAround: true,
    resizable: true,
    background: hexToNSColor('F7F7F7'),
    handlers: {
        onClickSave: (symbols) => {
            saveSymbolsList(JSON.parse(symbols), context);
            webUI.panel.close();
            WebUI.clean();
        },
        onClickCancel: () => {
            webUI.panel.close();
            WebUI.clean();
        },
        loadSymbols: () => {
            webUI.eval('window.symbolsList=' + JSON.stringify(symbolsList))
        },
        openWeb: (url) => {
            NSWorkspace.sharedWorkspace().openURL(NSURL.URLWithString(url));
        },
        loadPreferences: () => {
            const preferences = prefsManager.getUserPreferences(pluginId, defaultPreferences)
            webUI.eval('window.preferences='+ JSON.stringify(preferences))
        },
        saveLicense: (licenseKey) => {
            prefsManager.setUserPreferences(pluginId, { licenseKey: licenseKey })
            const preferences = prefsManager.getUserPreferences(pluginId, defaultPreferences)
            webUI.eval('window.preferences='+ JSON.stringify(preferences))
        }
    }
  })
}

I'm scratching my head over this, unfortunately. I've successfully...

• Gotten sketch-module-web-view to load a window, driven by a call in my plugin
• Loaded content in the webview using an HTML page
• Established a handler for the action I'd like to trigger when a user performs an action in the webview (such as clicking on a button, etc.)

...the only issue is when it comes down to actually triggering the handler; as noted in great detail in the readme:

On the webview:

import pluginCall from 'sketch-module-web-view/client'
pluginCall('nativeLog', 'Called from the webview')

Unfortunately, possibly due to implementation gaps, the import call doesn't work (even when embedding in an external script call marked as 'type="module"'), so any javascript executed in the webview effectively shrugs its shoulders when asked to execute pluginCall().

What might I have missed in my implementation? Any help would be greatly appreciated...

Hi @mathieudutour,

I was trying to make a minimal example of an error I have had for a long time while building my sketch plugin. Whenever I started the plugin with npm start for a second or third time (after quitting it) it would crash sketch.

I just found it's in the most basic example of sketch-module-web-view I can make.

Reproduction repo here: https://github.com/happylinks/skpm-crash-repro

Error I'm getting:

> skpm-build --watch --run

🖨  Copied src/manifest.json in 6ms
🔩  Copied assets/icon.png
2018-11-08 20:15:30.657 sketchtool[69143:2719538] *** Terminating app due to uncaught exception 'NSInvalidReceivePortException', reason: 'connection went invalid while waiting for a reply because a mach port died'
*** First throw call stack:
(
        0   CoreFoundation                      0x00007fff3e9d4e65 __exceptionPreprocess + 256
        1   libobjc.A.dylib                     0x00007fff6aa2f720 objc_exception_throw + 48
        2   CoreFoundation                      0x00007fff3e9d4c97 +[NSException raise:format:] + 201
        3   Foundation                          0x00007fff40d79539 -[NSConnection sendInvocation:internal:] + 2101
         4   CoreFoundation                      0x00007fff3e97655e ___forwarding___ + 780
        5   CoreFoundation                      0x00007fff3e9761c8 _CF_forwarding_prep_0 + 120
        6   sketchtool                          0x000000010c6b425d -[BCSTRunCommand waitForLaunchOfApplicationWithEngine:] + 589
        7   Foundation                          0x00007fff40ccd015 __NSFireDelayedPerform + 433
        8   CoreFoundation                      0x00007fff3e93cbbd __CFRUNLOOP_IS_CALLING_OUT_TO_A_TIMER_CALLBACK_FUNCTION__ + 20
        9   CoreFoundation                      0x00007fff3e93c770 __CFRunLoopDoTimer + 859
        10  CoreFoundation                      0x00007fff3e93c2b0 __CFRunLoopDoTimers + 333
 11  CoreFoundation                      0x00007fff3e91d4fb __CFRunLoopRun + 2176
        12  CoreFoundation                      0x00007fff3e91ca28 CFRunLoopRunSpecific + 463
        13  CoreFoundation                      0x00007fff3e91c834 CFRunLoopRun + 40
        14  sketchtool                          0x000000010c67b7c5 ECCommandLineMain + 288
        15  sketchtool                          0x000000010c6b77d1 main + 33
        16  libdyld.dylib                       0x00007fff6bafe08d start + 1
)
libc++abi.dylib: terminating with uncaught exception of type NSException
🛠  Built ./my-command.js in 1825ms     

Steps to reproduce:

1. Open sketch with an open artboard
2. Run npm start
3. See that a window is opened.
4. Run npm start again (quit the first process)
5. Sketch will crash (if not the first time, repeat step 4.

Maybe I can do a better cleanup in my code somewhere that will prevent this?

Is there the possibility to open a panel instead of a window?
I saw this Sketch Plugin Boilerplate doing it: https://github.com/julianburr/sketch-plugin-boilerplate

Is in skpm something like that?

I'm trying to use the pluginCall function in my plugin, but after calling it will crash Sketch.
Do you have any idea why this happens and how I can fix it?

The following code is used for calling the function:

Footer.js

import React, { Component } from 'react'
import pluginCall from 'sketch-module-web-view/client';

class Footer extends Component{
  constructor(props) {
    super(props)
    this.onClick = this.onClick.bind(this);
  }

  onClick(){
    pluginCall('onClick');
  }

  render(){
    return (
      <div>
        <span onClick={ (e) => this.onClick(e) }>call plugin</span>
      </div>
    )
  }
}
export default Footer;

Command.js

import WebUI from 'sketch-module-web-view'
import createSymbolsList from '../utils/createSymbolsList'

export default function (context) {
  const symbolsList = createSymbolsList(context)

  const webUI = new WebUI(context, 'index.html', {
    identifier: 'symbols-manager.link',
    width: 800,
    height: 400,
    hideTitleBar: false,
    shouldKeepAround: false,
    handlers : {
	onClick   : (callback) => {
	      console.log('Plugin called');
	}
    }
  })
}

This part of the error report I get back from my machine

Process:               Sketch [49488]
Path:                  /Applications/Sketch.app/Contents/MacOS/Sketch
Identifier:            com.bohemiancoding.sketch3
Version:               46.2 (44496)
Code Type:             X86-64 (Native)
Parent Process:        ??? [1]
Responsible:           Sketch [49488]
User ID:               501

Date/Time:             2017-10-04 18:12:00.221 +0200
OS Version:            Mac OS X 10.12.5 (16F73)
Report Version:        12
Anonymous UUID:        D5DF688F-B066-CA00-E8F4-88A1DF24DAA8

Sleep/Wake UUID:       CF0A6810-2DD6-405F-A0CA-198426BBF8B5

Time Awake Since Boot: 360000 seconds
Time Since Wake:       21000 seconds

System Integrity Protection: enabled

Crashed Thread:        0  Dispatch queue: com.apple.main-thread

Exception Type:        EXC_CRASH (SIGABRT)
Exception Codes:       0x0000000000000000, 0x0000000000000000
Exception Note:        EXC_CORPSE_NOTIFY

Application Specific Information:
Assertion failed: ([runtime isKindOfClass:[Mocha class]]), function Mocha_getProperty, file /Users/Shared/Jenkins/workspace/Stage/Modules/CocoaScript/src/framework/mocha/MochaRuntime.m, line 1016.

Just a quick question to see if I'm missing something. pluginCall is currently noted as a "hack", using the changing window.hash to signal stuff back up to the plugin, as that's the "only way". I'll outline what I tend to do, and let me know if that's not implemented for a technical reason, or just because it's not been worked on yet :)

The Webview already has a frameLoadDelegate https://github.com/skpm/sketch-module-web-view/blob/master/lib/webview-api.js#L47, and this can be used to insert a value into the windowScriptObject of the Webview every time it loads (using didClearWindowObject_forFrame).

This means you then have a window. object in javascript which gives access to an Objective C class and allows you to call chosen methods on it. The class can use isSelectorExcludedFromWebScript and webScriptNameForSelector to specify which methods. Argument passing works normally but JSON.stringifying everything in the javascript is simplest.

This means calling back to the plugin could be window.sketchPlugin.callNative(args) and this will call the relevant Objective C function

I’ve tried setting acceptsFirstClick to no avail. Do you happen to know if there is way to accept the first click event (maybe even the mouseover event)? Clicking twice is rather crippling to the experience in my case, since I use it to modify selected layer thus the panel is always blurred when accessed.

*I’m seriously grateful you took the time to craft and publish skpm by the way!

Sketch crushing after a while if I do
browserWindow.loadURL(‘https://github.com')

Error I'm getting:

Thread 0 Crashed:
0   libsystem_malloc.dylib               0x00007fff7e91ba8e nanov2_allocate_from_block + 622

1   libsystem_malloc.dylib               0x00007fff7e91b0f6 nanov2_allocate + 142

2   libsystem_malloc.dylib               0x00007fff7e91bf7e nanov2_calloc + 82
3   libsystem_malloc.dylib               0x00007fff7e910d3a malloc_zone_calloc + 99
4   libsystem_malloc.dylib               0x00007fff7e910cba calloc + 30
5   libobjc.A.dylib                      0x00007fff7d68383e class_createInstance + 83
6   CoreFoundation                       0x00007fff5155d989 __CFAllocateObject + 17
7   CoreFoundation                       0x00007fff5158dc41 +[__NSSingleObjectSetI __new::] + 21
8   CoreFoundation                       0x00007fff5158dc26 __createSet + 33
9   CoreFoundation                       0x00007fff5158dbf2 +[NSSet setWithObject:] + 38
10  AppKit                               0x00007fff4eb6d174 -[_NSViewLayoutInvalidator observeValueForKeyPath:ofObject:change:context:] + 433
11  Foundation                           0x00007fff538e4f96 NSKeyValueNotifyObserver + 346
12  Foundation                           0x00007fff538e4a02 NSKeyValueDidChange + 481
13  Foundation                           0x00007fff53a74028 NSKeyValueDidChangeWithPerThreadPendingNotifications.llvm.6933669911801571155 + 143
14  AppKit                               0x00007fff4eb1b5f3 -[NSView didChangeValueForKey:] + 144
15  Foundation                           0x00007fff538e39ef _NSSetObjectValueAndNotify + 164
16  AppKit                               0x00007fff4ebdcc72 -[NSButtonCell _updateBackgroundViewWithFrame:inView:] + 439
17  AppKit                               0x00007fff4eb74f08 -[NSButtonCell _updateSubviewsInView:includeTitleTextField:] + 146
18  AppKit                               0x00007fff4ece63b7 __35-[NSControl _windowChangedKeyState]_block_invoke + 46
19  AppKit                               0x00007fff4eb06436 +[NSAppearance _performWithCurrentAppearance:usingBlock:] + 84
20  AppKit                               0x00007fff4ece6192 -[NSControl _windowChangedKeyState] + 138
21  AppKit                               0x00007fff4ece629a -[NSView _windowChangedKeyState] + 253
22  AppKit                               0x00007fff4ed07bc3 -[NSToolbarItemViewer _windowChangedKeyState] + 42
23  AppKit                               0x00007fff4ece629a -[NSView _windowChangedKeyState] + 253
24  AppKit                               0x00007fff4ed07b1a -[NSToolbarView _windowChangedKeyState] + 44
25  AppKit                               0x00007fff4ece629a -[NSView _windowChangedKeyState] + 253
26  AppKit                               0x00007fff4ed076cd -[NSVisualEffectView _windowChangedKeyState] + 42
27  AppKit                               0x00007fff4ece629a -[NSView _windowChangedKeyState] + 253
28  AppKit                               0x00007fff4ece629a -[NSView _windowChangedKeyState] + 253
29  AppKit                               0x00007fff4ed0763f -[NSThemeFrame _windowChangedKeyState] + 46
30  AppKit                               0x00007fff4ec29a2c +[NSWindow _enableKeyStateChangeNotifications] + 355
31  AppKit                               0x00007fff4ed13251 _NXEndKeyAndMain + 297
32  AppKit                               0x00007fff4ed11e42 -[NSApplication _handleDeactivateEvent:] + 764
33  AppKit                               0x00007fff4eae0d74 -[NSApplication(NSEvent) sendEvent:] + 2588
34  AppKit                               0x00007fff4eacdcf1 -[NSApplication run] + 755
35  AppKit                               0x00007fff4eabd3f7 NSApplicationMain + 780
36  libdyld.dylib                        0x00007fff7e76108d start + 1

I have updated this module and I find that if I create two panels in one plugin, one of the webview panel did not get window.sketchObject method, does it mean I can only create one if I use new API? Or there is some way hacky to make it work?

I read the doc, yet still failed to make the example working. My code is as follows:

src/my-command.js

import BrowserWindow from 'sketch-module-web-view'
var sketch = require('sketch')

export default function(context) {
  
  const options = {
    identifier: 'unique.id',
    alwaysOnTop: true
  }
  const browserWindow = new BrowserWindow(options)
  browserWindow.loadURL('./index.htm')

  browserWindow.webContents.on('nativeLog', function(s) {
    context.document.showMessage(s)
    sketch.UI.message(s)
  })
}

assets/index.htm

<html>
    <body>
        <script type="module">
        import pluginCall from 'sketch-module-web-view/client'
        pluginCall('nativeLog', 'Called from the webview')
        </script>
    </body>
</html>

And to debug the WebView, I changed the default setting according to https://github.com/skpm/sketch-module-web-view/blob/master/docs/inspecting-the-webview.md, but it doesn't work –– there's only a "Reload" option in the right-click menu, no "Inspect". (macOS 10.13, Sketch v51.1)

let win = new BrowserWindow({ 
  frame: false,
  transparent: true
})
win.show()

yields

(weird note: this preview appears white background, but clicking on it should show black background)

Since you're re-thinking how things work in #24 I've got a proposal for you, since I don't believe this is possible in the current version. My panel, and I suspect others are as well, is the kind you want access to multiple times in a design session, with a persistent state. It'd be nice if the webview could be "dismissed" and recalled in the same state without reloading the view. Without knowing what's available via cocoa, my first guess would be to see if you can hide a window without removing it.

For mine, the user flow would look like:

• Hit key command, window pops up
• Do webview stuff
• Hit key command again, window goes away.
• Design, etc.
• Hit key command, window pops up again in same state without reload

I want to have the webview interact with a file I upload. However when I click on "Choose File" no window pop ups.

<input type="file"/>

Is there a setting in the BrowserWindow config I can use or anything like that?

Thanks!

Any idea why?