問題

Electronの webContents.executeJavascript は、stringでjavascriptコードを受け取る。
例えば IDとパスワードを渡してログインしたい と思った時にこれがちょっと工夫が必要だった。

結論

こんな関数を用意するだけでいけた！

const wrap = (fn, ...args) => `(${fn.toString()})(${args.map( arg => `"${arg}"` ).join(',')})`

使い方はこんな具合


const webview = document.querySelector("#browser")

// webviewで実行したい関数
const input = (name, pass) => {
  document.querySelector("#username").value = name
  document.querySelector("#password").value = pass
  document.querySelector("#login").click()
}

// wrap!
const scr = wrap(input, "my-name", "my-password")

webview.addEventListener('did-finish-load', (e) => {
	// execute!
    webview.executeJavaScript(scr, () => {
     ....
    }) 
}

解説など

ワンライナーって言いたかっただけの理由で一行で書いてみたが、わかりやすく書くとこんな感じになる。

const wrap = (fn, ...args) => {
  const callArgs = args.map( arg => `"${arg}"` ).join(',')
  const functionString = fn.toString()
  return `(${functionString})(${callArgs})`
}

wrapで作られたscrの変数はこんな感じになっている。

((name, pass) => {
  document.querySelector("#username").value = name
  document.querySelector("#password").value = pass
  document.querySelector("#login").click()
})("my-name", "my-password")

(function(){})()みたいな即時関数で囲む
Function.toString()で関数の文字列を取り出している
ES2015構文大活躍
- ...argsでその後の引数をquoteで囲んで、即時関数の引数にしている。
  - spread演算子で受け取っているのはわりと好み。別に第二引数を配列にしてても良かったとは思う。
- templateリテラリ大活躍

下記あたりを参考に思いついた