webContents

웹 페이지를 렌더링하고 제어합니다.

프로세스: 메인

webContents는 EventEmitter를 상속받았습니다. 웹 페이지의 렌더링과 관리를 책임지며 BrowserWindow의 속성입니다. 다음은 webContents 객체에 접근하는 예시입니다:

const {BrowserWindow} = require('electron')

let win = new BrowserWindow({width: 800, height: 1500})
win.loadURL('http://github.com')

let contents = win.webContents
console.log(contents)

Methods

다음 메서드는 webContents 모듈에서 접근할 수 있는 메서드입니다:

const {webContents} = require('electron')
console.log(webContents)

webContents.getAllWebContents()

Returns WebContents[] - 모든 WebContents 인스턴스의 배열. 이 배열은 윈도우, 웹뷰, 열린 개발자 도구 그리고 백그라운드 페이지의 개발자 도구 확장 기능의 모든 웹 콘텐츠를 포함합니다.

webContents.getFocusedWebContents()

Returns WebContents - 이 애플리케이션에서 포커스되어있는 웹 콘텐츠. 없을 경우 null 을 반환합니다.

webContents.fromId(id)

• id Integer

Returns WebContents - ID 에 해당하는 WebContens 인스턴스.

Class: WebContents

BrowserWindow 인스턴스의 콘텐츠를 표시하고 제어합니다.

프로세스: 메인

Instance Events

Event: 'did-finish-load'

탐색 작업이 끝났을 때 발생하는 이벤트입니다. 브라우저의 탭의 스피너가 멈추고 onload 이벤트가 발생했을 때를 말합니다.

Event: 'did-fail-load'

Returns:

• event Event
• errorCode Integer
• errorDescription String
• validatedURL String
• isMainFrame Boolean

이 이벤트는 did-finish-load와 비슷하나, 로드가 실패했거나 취소되었을 때 발생합니다. 예를 들면 window.stop()이 실행되었을 때 발생합니다. 발생할 수 있는 전체 에러 코드의 목록과 설명은 여기서 확인할 수 있습니다. 참고로 리다이렉트 응답은 errorCode -3과 함께 발생합니다; 이 에러는 명시적으로 무시할 수 있습니다.

Event: 'did-frame-finish-load'

Returns:

• event Event
• isMainFrame Boolean

프레임(Frame)이 탐색을 끝냈을 때 발생하는 이벤트입니다.

Event: 'did-start-loading'

브라우저 탭의 스피너가 회전을 시작한 때와 같은 시점에 대응하는 이벤트입니다.

Event: 'did-stop-loading'

브라우저 탭의 스피너가 회전을 멈추었을 때와 같은 시점에 대응하는 이벤트입니다.

Event: 'did-get-response-details'

Returns:

• event Event
• status Boolean
• newURL String
• originalURL String
• httpResponseCode Integer
• requestMethod String
• referrer String
• headers Object
• resourceType String

요청한 리소스에 관련된 자세한 정보를 사용할 수 있을 때 발생하는 이벤트입니다. status는 리소스를 다운로드하기 위한 소켓 연결을 나타냅니다.

Event: 'did-get-redirect-request'

Returns:

• event Event
• oldURL String
• newURL String
• isMainFrame Boolean
• httpResponseCode Integer
• requestMethod String
• referrer String
• headers Object

리소스를 요청하는 동안에 리다이렉트 응답을 받았을 때 발생하는 이벤트입니다.

Event: 'dom-ready'

Returns:

• event Event

주어진 프레임의 문서가 로드되었을 때 발생하는 이벤트입니다.

Event: 'page-favicon-updated'

Returns:

• event Event
• favicons String[] - URL 배열

페이지가 favicon(파비콘) URL을 받았을 때 발생하는 이벤트입니다.

Event: 'new-window'

Returns:

• event Event
• url String
• frameName String
• disposition String - default, foreground-tab, background-tab, new-window, save-to-disk, other중 하나일 수 있습니다.
• options Object - 새로운 BrowserWindow 객체를 만들 때 사용되는 옵션 객체입니다.
• additionalFeatures String[] - window.open() 에 주어진 (Chromium 또는 Electron 에 의해 처리되지 않는) 비표준 기능.

페이지가 url에 대하여 새로운 윈도우를 열기위해 요청한 경우 발생하는 이벤트입니다. window.open이나 <a target='_blank'>과 같은 외부 링크에 의해 요청될 수 있습니다.

기본값으로 BrowserWindow는 url을 기반으로 생성됩니다.

event.preventDefault()를 호출하면 새로운 창이 생성되는 것을 방지할 수 있습니다. 이 경우, event.newGuest 는 Electron 의 런타임에 의해 사용할 수 있게 BrowserWindow 인스턴스에 대한 참조를 설정할 수 있습니다.

Event: 'will-navigate'

Returns:

• event Event
• url String

사용자 또는 페이지가 새로운 페이지로 이동할 때 발생하는 이벤트입니다. window.location 객체가 변경되거나 사용자가 페이지의 링크를 클릭했을 때 발생합니다.

이 이벤트는 webContents.loadURL과 webContents.back 같은 API를 이용한 프로그램적으로 시작된 탐색에 대해서는 발생하지 않습니다.

이 이벤트는 앵커 링크를 클릭하거나 window.location.hash의 값을 변경하는 등의 페이지 내 탐색시엔 발생하지 않습니다. 대신 did-navigate-in-page 이벤트를 사용해야 합니다.

event.preventDefault()를 호출하면 탐색을 방지할 수 있습니다.

Event: 'did-navigate'

Returns:

• event Event
• url String

탐색이 완료되면 발생하는 이벤트입니다.

이 이벤트는 앵커 링크를 클릭하거나 window.location.hash의 값을 변경하는 등의 페이지 내 탐색시엔 발생하지 않습니다. 대신 did-navigate-in-page 이벤트를 사용해야 합니다.

Event: 'did-navigate-in-page'

Returns:

• event Event
• url String
• isMainFrame Boolean

페이지 내의 탐색이 완료되면 발생하는 이벤트입니다.

페이지 내의 탐색이 발생하면 페이지 URL이 변경되지만 페이지 밖으로의 탐색은 일어나지 않습니다. 예를 들어 앵커 링크를 클릭했을 때, 또는 DOM hashchange 이벤트가 발생했을 때로 볼 수 있습니다.

Event: 'crashed'

Returns:

• event Event
• killed Boolean

렌더러 프로세스가 충돌하거나 종료될 때 발생되는 이벤트입니다.

Event: 'plugin-crashed'

Returns:

• event Event
• name String
• version String

플러그인 프로세스가 예기치 못하게 종료되었을 때 발생되는 이벤트입니다.

Event: 'destroyed'

webContents가 소멸될 때 발생되는 이벤트입니다.

Event: 'devtools-opened'

개발자 도구가 열렸을 때 발생되는 이벤트입니다.

Event: 'devtools-closed'

개발자 도구가 닫혔을 때 발생되는 이벤트입니다.

Event: 'devtools-focused'

개발자 도구에 포커스가 가거나 개발자 도구가 열렸을 때 발생되는 이벤트입니다.

Event: 'certificate-error'

Returns:

• event Event
• url URL
• error String - 에러 코드
• certificate Certificate
• callback Function
  • isTrusted Boolean - 인증서가 신뢰할 수 있는 것으로 간주할 수 있는지 여부를 나타냅니다

url에 대한 certificate 인증서의 유효성 검증에 실패했을 때 발생하는 이벤트입니다.

사용법은 app의 certificate-error 이벤트와 같습니다.

Event: 'select-client-certificate'

Returns:

• event Event
• url URL
• certificateList Certificate[]
• callback Function
  • certificate Certificate - 인증서는 주어진 목록에 있어야합니다.

클라이언트 인증이 요청되었을 때 발생하는 이벤트입니다.

사용법은 app의 select-client-certificate 이벤트와 같습니다.

Event: 'login'

Returns:

• event Event

• request Object

  • method String
  • url URL
  • referrer URL

• authInfo Object

  • isProxy Boolean
  • scheme String
  • host String
  • port Integer
  • realm String

• callback Function

  • username String
  • password String

webContents가 기본 인증을 수행하길 원할 때 발생되는 이벤트입니다.

app의 login이벤트와 사용 방법은 같습니다.

Event: 'found-in-page'

Returns:

• event Event
• result Object
  • requestId Integer
  • finalUpdate Boolean - 더 많은 응답이 따르는 경우를 표시합니다.
  • activeMatchOrdinal Integer (optional) - 활성화 일치의 위치.
  • matches Integer (optional) - 일치하는 개수.
  • selectionArea Object (optional) - 첫 일치 부위의 좌표.

webContents.findInPage 요청의 결과를 사용할 수 있을 때 발생하는 이벤트입니다.

Event: 'media-started-playing'

미디어가 재생되기 시작할 때 발생하는 이벤트입니다.

Event: 'media-paused'

미디어가 중지되거나 재생이 완료되었을 때 발생하는 이벤트입니다.

Event: 'did-change-theme-color'

페이지의 테마 색이 변경될 때 발생하는 이벤트입니다. 이 이벤트는 보통 meta 태그에 의해서 발생합니다:

<meta name='theme-color' content='#ff0000'>

Event: 'update-target-url'

Returns:

• event Event
• url String

마우스나 키보드를 사용해 링크에 포커스할 때 발생하는 이벤트입니다.

Event: 'cursor-changed'

Returns:

• event Event
• type String
• image NativeImage (optional)
• scale Float (optional) - 커스텀 커서의 스케일링 수치

• size Object (optional) - image의 사이즈

  • width Integer
  • height Integer

• hotspot Object (optional) - 커스텀 커서의 핫스팟 좌표

  • x Integer - x 좌표
  • y Integer - y 좌표

커서 종류가 변경될 때 발생하는 이벤트입니다. type 인수는 다음 값이 될 수 있습니다: default, crosshair, pointer, text, wait, help, e-resize, n-resize, ne-resize, nw-resize, s-resize, se-resize, sw-resize, w-resize, ns-resize, ew-resize, nesw-resize, nwse-resize, col-resize, row-resize, m-panning, e-panning, n-panning, ne-panning, nw-panning, s-panning, se-panning, sw-panning, w-panning, move, vertical-text, cell, context-menu, alias, progress, nodrop, copy, none, not-allowed, zoom-in, zoom-out, grab, grabbing, custom.

만약 type 인수가 custom 이고 image 인수가 NativeImage를 통한 커스텀 커서를 지정했을 때, 해당 이미지로 커서가 변경됩니다. 또한 scale, size 그리고 hotspot 인수는 커스텀 커서의 추가적인 정보를 포함합니다.

Event: 'context-menu'

Returns:

• event Event

• params Object

  • x Integer - x 좌표
  • y Integer - y 좌표
  • linkURL String - 컨텍스트 메뉴가 호출된 노드를 둘러싸는 링크의 URL.
  • linkText String - 링크에 연관된 텍스트. 콘텐츠의 링크가 이미지인 경우 빈 문자열이 됩니다.
  • pageURL String - 컨텍스트 메뉴가 호출된 상위 수준 페이지의 URL.
  • frameURL String - 컨텍스트 메뉴가 호출된 서브 프레임의 URL.
  • srcURL String - 컨텍스트 메뉴가 호출된 요소에 대한 소스 URL. 요소와 소스 URL은 이미지, 오디오, 비디오입니다.
  • mediaType String - 컨텍스트 메뉴가 호출된 노드의 종류. 값은 none, image, audio, video, canvas, file 또는 plugin이 될 수 있습니다.
  • hasImageContents Boolean - 컨텍스트 메뉴가 내용이 있는 이미지에서 호출되었는지 여부.
  • isEditable Boolean - 컨텍스트를 편집할 수 있는지 여부.
  • selectionText String - 컨텍스트 메뉴가 호출된 부분에 있는 선택된 텍스트.
  • titleText String - 컨텍스트 메뉴가 호출된 선택된 제목 또는 알림 텍스트.
  • misspelledWord String - 만약 있는 경우, 커서가 가르키는 곳에서 발생한 오타.
  • frameCharset String - 메뉴가 호출된 프레임의 문자열 인코딩.
  • inputFieldType String - 컨텍스트 메뉴가 입력 필드에서 호출되었을 때, 그 필드의 종류. 값은 none, plainText, password, other 중 한 가지가 될 수 있습니다.
  • menuSourceType String - 컨텍스트 메뉴를 호출한 입력 소스. 값은 none, mouse, keyboard, touch, touchMenu 중 한 가지가 될 수 있습니다.

  • mediaFlags Object - 컨텍스트 메뉴가 호출된 미디어 요소에 대한 플래그.

    • inError Boolean - 미디어 객체가 크래시되었는지 여부.
    • isPaused Boolean - 미디어 객체가 일시중지되었는지 여부.
    • isMuted Boolean - 미디어 객체가 음소거되었는지 여부.
    • hasAudio Boolean - 미디어 객체가 오디오를 가지고 있는지 여부.
    • isLooping Boolean - 미디어 객체가 루프중인지 여부.
    • isControlsVisible Boolean - 미디어 객체의 컨트롤이 보이는지 여부.
    • canToggleControls Boolean - 미디어 객체의 컨트롤을 토글할 수 있는지 여부.
    • canRotate Boolean - 미디어 객체를 돌릴 수 있는지 여부.

  • editFlags Object - 이 플래그는 렌더러가 어떤 행동을 이행할 수 있는지 여부를 표시합니다.

    • canUndo Boolean - 렌더러에서 실행 취소할 수 있는지 여부.
    • canRedo Boolean - 렌더러에서 다시 실행할 수 있는지 여부.
    • canCut Boolean - 렌더러에서 잘라내기를 실행할 수 있는지 여부.
    • canCopy Boolean - 렌더러에서 복사를 실행할 수 있는지 여부.
    • canPaste Boolean - 렌더러에서 붙여넣기를 실행할 수 있는지 여부.
    • canDelete Boolean - 렌더러에서 삭제를 실행할 수 있는지 여부.
    • canSelectAll Boolean - 렌더러에서 모두 선택을 실행할 수 있는지 여부.

새로운 컨텍스트 메뉴의 제어가 필요할 때 발생하는 이벤트입니다.

Event: 'select-bluetooth-device'

Returns:

• event Event
• devices BluetoothDevice[]
• callback Function
  • deviceId String

navigator.bluetooth.requestDevice의 호출에 의해 블루투스 기기가 선택되어야 할 때 발생하는 이벤트입니다. navigator.bluetooth API를 사용하려면 webBluetooth가 활성화되어 있어야 합니다. 만약 event.preventDefault이 호출되지 않으면, 첫 번째로 사용 가능한 기기가 선택됩니다. callback은 반드시 선택될 deviceId와 함께 호출되어야 하며, 빈 문자열을 callback에 보내면 요청이 취소됩니다.

const {app, webContents} = require('electron')
app.commandLine.appendSwitch('enable-web-bluetooth')

app.on('ready', () => {
  webContents.on('select-bluetooth-device', (event, deviceList, callback) => {
    event.preventDefault()
    let result = deviceList.find((device) => {
      return device.deviceName === 'test'
    })
    if (!result) {
      callback('')
    } else {
      callback(result.deviceId)
    }
  })
})

Event: 'paint'

Returns:

• event Event

• dirtyRect Object

  • x Integer - 이미지의 x 좌표.
  • y Integer - 이미지의 y 좌표.
  • width Integer - Dirty 영역의 너비.
  • height Integer - Dirty 영역의 높이.

• image NativeImage - 전체 프레임의 이미지 데이터.

새 프레임이 생성되었을 때 발생하는 이벤트입니다. Dirty 영역만이 버퍼로 전달됩니다.

const {BrowserWindow} = require('electron')

let win = new BrowserWindow({webPreferences: {offscreen: true}})
win.webContents.on('paint', (event, dirty, image) => {
  // updateBitmap(dirty, image.toBitmap())
})
win.loadURL('http://github.com')

Instance Methods

contents.loadURL(url[, options])

• url URL
• options Object (optional)
  • httpReferrer String - HTTP 레퍼러 url.
  • userAgent String - 요청을 시작한 유저 에이전트.
  • extraHeaders String - "\n"로 구분된 Extra 헤더들.

윈도우에 웹 페이지 url을 로드합니다. url은 http://, file://과 같은 프로토콜 접두사를 가지고 있어야 합니다. 만약 반드시 http 캐시를 사용하지 않고 로드해야 하는 경우 pragma 헤더를 사용할 수 있습니다.

const {webContents} = require('electron')
const options = {extraHeaders: 'pragma: no-cache\n'}
webContents.loadURL(url, options)

contents.downloadURL(url)

• url URL

url의 리소스를 탐색 없이 다운로드를 시작합니다. session의 will-download 이벤트가 발생합니다.

contents.getURL()

현재 웹 페이지의 URL을 반환합니다.

const {BrowserWindow} = require('electron')
let win = new BrowserWindow({width: 800, height: 600})
win.loadURL('http://github.com')

let currentURL = win.webContents.getURL()
console.log(currentURL)

contents.getTitle()

현재 웹 페이지의 제목을 반환합니다.

win.isDestroyed()

윈도우가 소멸되었는지 여부를 반환합니다.

contents.isFocused()

웹 페이지가 포커스되어있는지 여부를 반환합니다.

contents.isLoading()

현재 웹 페이지가 리소스를 로드중인지 여부를 반환합니다.

contents.isLoadingMainFrame()

메인 프레임이 여전히 로딩중인지 여부를 반환합니다. (내부 iframe 또는 frame 포함)

contents.isWaitingForResponse()

현재 웹 페이지가 페이지의 메인 리소스로부터 첫 응답을 기다리고있는지 여부를 반환합니다.

contents.stop()

대기중인 탐색 작업을 모두 멈춥니다.

contents.reload()

현재 웹 페이지를 새로고침합니다.

contents.reloadIgnoringCache()

현재 웹 페이지의 캐시를 무시한 채로 새로고침합니다.

contents.canGoBack()

브라우저가 이전 웹 페이지로 돌아갈 수 있는지 여부를 반환합니다.

contents.canGoForward()

브라우저가 다음 웹 페이지로 이동할 수 있는지 여부를 반환합니다.

contents.canGoToOffset(offset)

• offset Integer

웹 페이지가 offset로 이동할 수 있는지 여부를 반환합니다.

contents.clearHistory()

탐색 기록을 삭제합니다.

contents.goBack()

브라우저가 이전 웹 페이지로 이동하게 합니다.

contents.goForward()

브라우저가 다음 웹 페이지로 이동하게 합니다.

contents.goToIndex(index)

• index Integer

브라우저가 지정된 절대 웹 페이지 인덱스로 탐색하게 합니다.

contents.goToOffset(offset)

• offset Integer

"current entry"에서 지정된 offset으로 탐색합니다.

contents.isCrashed()

렌더러 프로세스가 예기치 않게 종료되었는지 여부를 반환합니다.

contents.setUserAgent(userAgent)

• userAgent String

현재 웹 페이지의 유저 에이전트를 덮어씌웁니다.

contents.getUserAgent()

현재 웹 페이지의 유저 에이전트 문자열을 반환합니다.

contents.insertCSS(css)

• css String

CSS 코드를 현재 웹 페이지에 삽입합니다.

contents.executeJavaScript(code[, userGesture, callback])

• code String
• userGesture Boolean (optional)
• callback Function (optional) - 스크립트의 실행이 완료되면 호출됩니다.
  • result Any

Returns Promise - 프로미스는 실행된 코드의 결과와 함께 해결되거나 코드의 결과가 거절된 프로미스라면 거절된다.

페이지의 code 를 실행합니다.

브라우저 창에서 requestFullScreen 같은 일부 HTML API 들은 사용자 조작에 의해서만 호출될 수 있습니다. userGesture 를 true 로 설정하면 이러한 제약을 없앨 수 있습니다.

실행된 코드의 결과가 프로미스라면 콜백 결과는 프로미스의 결과 값입니다. 프로미스의 반환된 결과 코드를 처리하기위해 반환된 프로미스를 사용하는 것이 좋습니다.

contents.executeJavaScript('fetch("https://jsonplaceholder.typicode.com/users/1").then(resp => resp.json())', true)
  .then((result) => {
    console.log(result) // fetch 호출의 결과인 JSON 객체가 올 것 입니다
  })

contents.setAudioMuted(muted)

• muted Boolean

현재 웹 페이지의 소리를 음소거합니다.

contents.isAudioMuted()

현재 페이지가 음소거 되어있는지 여부를 반환합니다.

contents.setZoomFactor(factor)

• factor Number - 줌 수치.

지정한 수치로 줌 수치를 변경합니다. 줌 수치는 100으로 나눈 값이며 300%는 3.0이 됩니다.

contents.getZoomFactor(callback)

• callback Function
  • zoomFactor Number

현재 줌 수치 값을 요청합니다. callback은 callback(zoomFactor) 형태로 호출됩니다.

contents.setZoomLevel(level)

• level Number - 줌 레벨.

지정한 수준으로 줌 수준을 변경합니다. 원본 크기는 0이고 각 값의 증가와 감소는 현재 줌을 20% 크거나 작게 표현하고 각 크기는 원본 크기의 300%와 50%로 제한됩니다.

contents.getZoomLevel(callback)

• callback Function
  • zoomLevel Number

현재 줌 수준 값을 요청합니다. callback은 callback(zoomLevel) 형태로 호출됩니다.

contents.setZoomLevelLimits(minimumLevel, maximumLevel)

• minimumLevel Number
• maximumLevel Number

최대와 최소 값의 줌 수준 값을 지정합니다.

contents.undo()

웹 페이지에서 undo 편집 커맨드를 실행합니다.

contents.redo()

웹 페이지에서 redo 편집 커맨드를 실행합니다.

contents.cut()

웹 페이지에서 cut 편집 커맨드를 실행합니다.

contents.copy()

웹 페이지에서 copy 편집 커맨드를 실행합니다.

contents.copyImageAt(x, y)

• x Integer
• y Integer

주어진 위치에 있는 이미지를 클립보드로 복사합니다.

contents.paste()

웹 페이지에서 paste 편집 커맨드를 실행합니다.

contents.pasteAndMatchStyle()

웹 페이지에서 pasteAndMatchStyle 편집 커맨드를 실행합니다.

contents.delete()

웹 페이지에서 delete 편집 커맨드를 실행합니다.

contents.selectAll()

웹 페이지에서 selectAll 편집 커맨드를 실행합니다.

contents.unselect()

웹 페이지에서 unselect 편집 커맨드를 실행합니다.

contents.replace(text)

• text String

웹 페이지에서 replace 편집 커맨드를 실행합니다.

contents.replaceMisspelling(text)

• text String

웹 페이지에서 replaceMisspelling 편집 커맨드를 실행합니다.

contents.insertText(text)

• text String

포커스된 요소에 text를 삽입합니다.

contents.findInPage(text[, options])

• text String - 찾을 콘텐츠, 반드시 공백이 아니여야 합니다.
• options Object (optional)
  • forward Boolean - 앞에서부터 검색할지 뒤에서부터 검색할지 여부입니다. 기본값은 true입니다.
  • findNext Boolean - 작업을 계속 처리할지 첫 요청만 처리할지 여부입니다. 기본값은 false입니다.
  • matchCase Boolean - 검색이 대소문자를 구분할지 여부입니다. 기본값은 false입니다.
  • wordStart Boolean - 단어의 시작 부분만 볼 지 여부입니다. 기본값은 false입니다.
  • medialCapitalAsWordStart Boolean - wordStart와 합쳐질 때, 소문자 또는 비문자가 따라붙은 대문자로 일치가 시작하는 경우 단어 중간의 일치를 허용합니다. 여러가지 다른 단어 내의 일치를 허용합니다. 기본값은 false입니다.

웹 페이지에서 text에 일치하는 모든 대상을 찾는 요청을 시작하고 요청에 사용된 요청을 표현하는 정수(integer)를 반환합니다. 요청의 결과는 found-in-page 이벤트를 통해 취득할 수 있습니다.

contents.stopFindInPage(action)

• action String - webContents.findInPage 요청이 종료되었을 때 일어날 수 있는 작업을 지정합니다.
  • clearSelection - 선택을 취소합니다.
  • keepSelection - 선택을 일반 선택으로 변경합니다.
  • activateSelection - 포커스한 후 선택된 노드를 클릭합니다.

제공된 action에 대한 webContents의 모든 findInPage 요청을 중지합니다.

const {webContents} = require('electron')
webContents.on('found-in-page', (event, result) => {
  if (result.finalUpdate) webContents.stopFindInPage('clearSelection')
})

const requestId = webContents.findInPage('api')
console.log(requestId)

contents.capturePage([rect, ]callback)

• rect Object (optional) - 캡쳐할 페이지의 영역

  • x Integer
  • y Integer
  • width Integer
  • height Integer

• callback Function

페이지의 스크린샷을 rect에 설정한 만큼 캡처합니다. 캡처가 완료되면 callback이 callback(image) 형식으로 호출됩니다. image는 NativeImage의 인스턴스이며 스크린샷 데이터를 담고있습니다. rect를 생략하면 페이지 전체를 캡처합니다.

contents.hasServiceWorker(callback)

• callback Function
  • hasWorker Boolean

ServiceWorker가 등록되어있는지 확인하고 callback에 대한 응답으로 boolean 값을 반환합니다.

contents.unregisterServiceWorker(callback)

• callback Function
  • success Boolean

ServiceWorker가 존재하면 모두 등록을 해제하고 JS Promise가 만족될 때 callback에 대한 응답으로 boolean을 반환하거나 JS Promise가 만족되지 않을 때 false를 반환합니다.

contents.print([options])

options Object (optional)

• silent Boolean - 사용자에게 프린트 설정을 묻지 않습니다. 기본값을 false입니다.
• printBackground Boolean - 웹 페이지의 배경 색과 이미지를 출력합니다. 기본값은 false입니다.

윈도우의 웹 페이지를 프린트합니다. silent가 true로 지정되어있을 땐, Electron이 시스템의 기본 프린터와 기본 프린터 설정을 가져옵니다.

웹 페이지에서 window.print()를 호출하는 것은 webContents.print({silent: false, printBackground: false})를 호출하는 것과 같습니다.

contents.printToPDF(options, callback)

• options Object

  • marginsType Integer - 사용할 마진의 종류를 지정합니다. 0 부터 2 사이 값을 사용할 수 있고 각각 기본 마진, 마진 없음, 최소 마진입니다.
  • pageSize String - 생성되는 PDF의 페이지 크기를 지정합니다. 값은 A3, A4, A5, Legal, Letter, Tabloid 또는 마이크론 단위의 height & width가 포함된 객체를 사용할 수 있습니다.
  • printBackground Boolean - CSS 배경을 프린트할지 여부를 정합니다.
  • printSelectionOnly Boolean - 선택된 영역만 프린트할지 여부를 정합니다.
  • landscape Boolean - landscape을 위해선 true를, portrait를 위해선 false를 사용합니다.

• callback Function - (error, data) => {}

  • error Error
  • data Buffer

Chromium의 미리보기 프린팅 커스텀 설정을 이용하여 윈도우의 웹 페이지를 PDF로 프린트합니다.

callback은 작업이 완료되면 callback(error, data) 형식으로 호출됩니다. data는 생성된 PDF 데이터를 담고있는 Buffer입니다.

기본으로 비어있는 options은 다음과 같이 여겨지게 됩니다:

{
  marginsType: 0,
  printBackground: false,
  printSelectionOnly: false,
  landscape: false
}

다음은 webContents.printToPDF의 예시입니다:

const {BrowserWindow} = require('electron')
const fs = require('fs')

let win = new BrowserWindow({width: 800, height: 600})
win.loadURL('http://github.com')

win.webContents.on('did-finish-load', () => {
  // 기본 프린트 옵션을 사용합니다
  win.webContents.printToPDF({}, (error, data) => {
    if (error) throw error
    fs.writeFile('/tmp/print.pdf', data, (error) => {
      if (error) throw error
      console.log('Write PDF successfully.')
    })
  })
})

contents.addWorkSpace(path)

• path String

특정 경로를 개발자 도구의 워크스페이스에 추가합니다. 반드시 개발자 도구의 생성이 완료된 이후에 사용해야 합니다.

const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.webContents.on('devtools-opened', () => {
  win.webContents.addWorkSpace(__dirname)
})

contents.removeWorkSpace(path)

• path String

특정 경로를 개발자 도구의 워크스페이스에서 제거합니다.

contents.openDevTools([options])

• options Object (optional)
  • detach Boolean - 새 창에서 개발자 도구를 엽니다.
  • mode String - 개발자 도구 표시 상태를 지정합니다. 옵션은 "right", "bottom", "undocked", "detach"가 될 수 있습니다. 기본값은 마지막 표시 상태를 사용합니다. undocked 모드에선 다시 도킹할 수 있습니다. 하지만 detach 모드에선 할 수 없습니다.

개발자 도구를 엽니다.

contents.closeDevTools()

개발자 도구를 닫습니다.

contents.isDevToolsOpened()

개발자 도구가 열려있는지 여부를 반환합니다.

contents.isDevToolsFocused()

개발자 도구에 포커스 되어있는지 여부를 반환합니다.

contents.toggleDevTools()

개발자 도구를 토글합니다.

contents.inspectElement(x, y)

• x Integer
• y Integer

(x, y)위치의 요소를 조사합니다.

contents.inspectServiceWorker()

서비스 워커 컨텍스트(service worker context)를 위한 개발자 도구를 엽니다.

contents.send(channel[, arg1][, arg2][, ...])

• channel String

channel을 통하여 렌더러 프로세스에 비동기 메시지를 보냅니다. 임의의 인수를 보낼수도 있습니다. 인수들은 내부적으로 JSON 포맷으로 직렬화 되며, 이후 함수와 프로토타입 체인은 포함되지 않게 됩니다.

렌더러 프로세스는 ipcRenderer 모듈을 통하여 channel를 리스닝하여 메시지를 처리할 수 있습니다.

메인 프로세스에서 렌더러 프로세스로 메시지를 보내는 예시 입니다:

// In the main process.
const {app, BrowserWindow} = require('electron')
let win = null
app.on('ready', () => {
  win = new BrowserWindow({width: 800, height: 600})
  win.loadURL(`file://${__dirname}/index.html`)
  win.webContents.on('did-finish-load', () => {
    win.webContents.send('ping', 'whoooooooh!')
  })
})

<!-- index.html -->
<html>
<body>
  <script>
    require('electron').ipcRenderer.on('ping', (event, message) => {
      console.log(message)  // "whoooooooh!" 출력
    });
  </script>
</body>
</html>

contents.enableDeviceEmulation(parameters)

• parameters Object

  • screenPosition String - 에뮬레이트 할 화면 종료를 지정합니다 (기본값: desktop)

    • desktop String - Desktop screen type
    • mobile String - Mobile screen type

  • screenSize Object - 에뮬레이트 화면의 크기를 지정합니다 (screenPosition == mobile)

    • width Integer - 에뮬레이트 화면의 너비를 지정합니다
    • height Integer - 에뮬레이트 화면의 높이를 지정합니다

  • viewPosition Object - 화면에서 뷰의 위치 (screenPosition == mobile) (기본값: {x: 0, y: 0})

    • x Integer - 좌상단 모서리로부터의 x 축의 오프셋
    • y Integer - 좌상단 모서리로부터의 y 축의 오프셋

  • deviceScaleFactor Float - 디바이스의 스케일 팩터(scale factor)를 지정합니다. (0일 경우 기본 디바이스 스케일 팩터를 기본으로 사용합니다. 기본값: 0)

  • viewSize Object - 에뮬레이트 된 뷰의 크기를 지정합니다 (빈 값은 덮어쓰지 않는 다는 것을 의미합니다)

    • width Integer - 에뮬레이트 된 뷰의 너비를 지정합니다
    • height Integer - 에뮬레이트 된 뷰의 높이를 지정합니다

  • fitToView Boolean - 에뮬레이트의 뷰가 사용 가능한 공간에 맞추어 스케일 다운될지를 지정합니다 (기본값: false)

    • offset Object - 사용 가능한 공간에서 에뮬레이트 된 뷰의 오프셋을 지정합니다 (fit to view 모드 외에서) (기본값: {x: 0, y: 0})
    • x Float - 좌상단 모서리에서 x 축의 오프셋을 지정합니다
    • y Float - 좌상단 모서리에서 y 축의 오프셋을 지정합니다

  • scale Float - 사용 가능한 공간에서 에뮬레이드 된 뷰의 스케일 (fit to view 모드 외에서, 기본값: 1)

parameters로 디바이스 에뮬레이션을 사용합니다.

contents.disableDeviceEmulation()

webContents.enableDeviceEmulation로 활성화된 디바이스 에뮬레이선을 비활성화 합니다.

contents.sendInputEvent(event)

• event Object
  • type String (required) - 이벤트의 종류. 다음 값들을 사용할 수 있습니다: mouseDown, mouseUp, mouseEnter, mouseLeave, contextMenu, mouseWheel, mouseMove, keyDown, keyUp, char.
  • modifiers String[] - 이벤트의 수정자(modifier)들에 대한 배열. 다음 값들을 포함 할 수 있습니다: shift, control, alt, meta, isKeypad, isAutoRepeat, leftButtonDown, middleButtonDown, rightButtonDown, capsLock, numLock, left, right.

Input event를 웹 페이지로 전송합니다.

키보드 이벤트들에 대해서는 event 객체는 다음 속성들을 사용할 수 있습니다:

• keyCode String (required) - 키보드 이벤트가 발생할 때 보내질 문자. Accelerator의 올바른 키 코드만 사용해야 합니다.

마우스 이벤트들에 대해서는 event 객체는 다음 속성들을 사용할 수 있습니다:

• x Integer (required)
• y Integer (required)
• button String - 눌린 버튼. 다음 값들이 가능합니다. left, middle, right
• globalX Integer
• globalY Integer
• movementX Integer
• movementY Integer
• clickCount Integer

mouseWheel 이벤트에 대해서는 event 객체는 다음 속성들을 사용할 수 있습니다:

• deltaX Integer
• deltaY Integer
• wheelTicksX Integer
• wheelTicksY Integer
• accelerationRatioX Integer
• accelerationRatioY Integer
• hasPreciseScrollingDeltas Boolean
• canScroll Boolean

contents.beginFrameSubscription([onlyDirty ,]callback)

• onlyDirty Boolean (optional) - 기본값은 false입니다.
• callback Function
  • frameBuffer Buffer
  • dirtyRect Rectangle

캡처된 프레임과 프레젠테이션 이벤트를 구독하기 시작합니다. callback은 프레젠테이션 이벤트가 발생했을 때 callback(frameBuffer, dirtyRect) 형태로 호출됩니다.

frameBuffer는 raw 픽셀 데이터를 가지고 있는 Buffer 객체입니다. 많은 장치에서 32비트 BGRA 포맷을 사용하여 효율적으로 픽셀 데이터를 저장합니다. 하지만 실질적인 데이터 저장 방식은 프로세서의 엔디안 방식에 따라서 달라집니다. (따라서 현대의 많은 프로세서에선 little-endian 방식을 사용하므로 위의 포맷을 그대로 표현합니다. 하지만 몇몇 프로세서는 big-endian 방식을 사용하는데, 이 경우 32비트 ARGB 포맷을 사용합니다)

dirtyRect는 페이지의 어떤 부분이 다시 그려졌는지를 표현하는 x, y, width, height 속성을 포함하는 객체입니다. 만약 onlyDirty가 true로 지정되어 있으면, frameBuffer가 다시 그려진 부분만 포함합니다. onlyDirty의 기본값은 false입니다.

contents.endFrameSubscription()

프레임 프레젠테이션 이벤트들에 대한 구독을 중지합니다.

contents.startDrag(item)

• item Object
  • file String
  • icon NativeImage

현재 진행중인 드래그-드롭에 item을 드래그 중인 아이템으로 설정합니다. file은 드래그될 파일의 절대 경로입니다. 그리고 icon은 드래그 도중 커서 밑에 표시될 이미지입니다.

contents.savePage(fullPath, saveType, callback)

• fullPath String - 전체 파일 경로.

• saveType String - 저장 종류를 지정합니다.

  • HTMLOnly - 페이지의 HTML만 저장합니다.
  • HTMLComplete - 페이지의 완성된 HTML을 저장합니다.
  • MHTML - 페이지의 완성된 HTML을 MHTML로 저장합니다.

• callback Function - (error) => {}.

  • error Error

만약 페이지를 저장하는 프로세스가 성공적으로 끝났을 경우 true를 반환합니다.

const {BrowserWindow} = require('electron')
let win = new BrowserWindow()

win.loadURL('https://github.com')

win.webContents.on('did-finish-load', () => {
  win.webContents.savePage('/tmp/test.html', 'HTMLComplete', (error) => {
    if (!error) console.log('Save page successfully')
  })
})

contents.showDefinitionForSelection() macOS

페이지에서 선택된 단어에 대한 사전 검색 결과 팝업을 표시합니다.

contents.isOffscreen()

오프 스크린 렌더링 이 활성화되었는지 여부를 표시합니다.

contents.startPainting()

오프 스크린 렌더링 이 활성화되었고 페인팅 상태가 아니라면 페인팅을 시작합니다.

contents.stopPainting()

오프 스크린 렌더링 이 활성화되었고 페인팅 상태라면 페인팅을 중지합니다.

contents.isPainting()

오프 스크린 렌더링 이 활성화된 경우 현재 패인팅 상태를 반환합니다.

contents.setFrameRate(fps)

• fps Integer

오프 스크린 렌더링 이 활성화된 경우 프레임 레이트를 지정한 숫자로 지정합니다. 1과 60 사이의 값만 사용할 수 있습니다.

contents.getFrameRate()

오프 스크린 렌더링 이 활성화된 경우 현재 프레임 레이트를 반환합니다.

contents.invalidate()

오프 스크린 렌더링 이 활성화된 경우 프레임을 무효화 하고 'paint' 이벤트를 통해 새로 만듭니다.

Instance Properties

contents.id

이 WebContents의 유일 ID.

contents.session

이 webContents에서 사용하는 session 객체를 반환합니다.

contents.hostWebContents

현재 WebContents를 소유하는 WebContents를 반환합니다.

contents.devToolsWebContents

이 WebContents에 대한 개발자 도구의 WebContents를 가져옵니다.

참고: 사용자가 절대로 이 객체를 저장해서는 안 됩니다. 개발자 도구가 닫혔을 때, null이 반환될 수 있습니다.

contents.debugger

현재 webContents에 대한 디버거 인스턴스를 가져옵니다.

Class: Debugger

Chrome의 원격 디버깅 프로토콜에 대한 대체 접근자입니다.

프로세스: 메인

const {BrowserWindow} = require('electron')
let win = new BrowserWindow()

try {
  win.webContents.debugger.attach('1.1')
} catch (err) {
  console.log('Debugger attach failed : ', err)
}

win.webContents.debugger.on('detach', (event, reason) => {
  console.log('Debugger detached due to : ', reason)
})

win.webContents.debugger.on('message', (event, method, params) => {
  if (method === 'Network.requestWillBeSent') {
    if (params.request.url === 'https://www.github.com') {
      win.webContents.debugger.detach()
    }
  }
})

win.webContents.debugger.sendCommand('Network.enable')

Instance Methods

debugger.attach([protocolVersion])

• protocolVersion String (optional) - 요청할 디버깅 프로토콜의 버전.

webContents에 디버거를 부착합니다.

debugger.isAttached()

디버거가 webContents에 부착되어 있는지 여부를 반환합니다.

debugger.detach()

webContents로부터 디버거를 분리시킵니다.

debugger.sendCommand(method[, commandParams, callback])

• method String - 메서드 이름, 반드시 원격 디버깅 프로토콜에 의해 정의된 메서드중 하나가 됩니다.
• commandParams Object (optional) - 요청 인수를 표현한 JSON 객체.
• callback Function (optional) - 응답
  • error Object - 커맨드의 실패를 표시하는 에러 메시지.
  • result Object - 원격 디버깅 프로토콜에서 커맨드 설명의 'returns' 속성에 의해 정의된 응답

지정한 커맨드를 디버깅 대상에게 전송합니다.

Instance Events

Event: 'detach'

• event Event
• reason String - 디버거 분리 사유.

디버깅 세션이 종료될 때 발생하는 이벤트입니다. webContents가 닫히거나 개발자 도구가 부착된 webContents에 대해 호출될 때 발생합니다.

Event: 'message'

• event Event
• method String - 메서드 이름.
• params Object - 원격 디버깅 프로토콜의 'parameters' 속성에서 정의된 이벤트 인수

디버깅 타겟이 관련 이벤트를 발생시킬 때 마다 발생하는 이벤트입니다.