electron in page search
1.0.0
이 패키지는 Electron 애플리케이션에 Chrome의 기본 페이지 내 검색 기능을 제공합니다. Electron은 Chrome의 기본 API를 JavaScript에 노출합니다. 그러나 기본 인페이지 검색 API에는 몇 가지 함정과 상태 저장 기능이 있습니다. 따라서 이 패키지는 이를 래핑하여 보다 쉽고 함정이 없는 API를 제공합니다.
페이지 내 검색은 Electron 앱의 브라우저 창이나 웹뷰( BrowserWindow 인스턴스 또는 <webview> 태그)에 사용할 수 있습니다. 렌더러 프로세스에서는 둘 다에 대해 하나의 기능만 사용할 수 있습니다.
// Pass current browser window's WebContents instance
const searchInWindow = searchInPage ( remote . getCurrentWebContents ( ) ) ;
// Pass <webview> instance
const searchInWebview = searchInPage ( document . getElementById ( 'my-webview' ) ) ;
// Open inner window made with <webview> for in-page search
// Search some text in the browser window
searchInWindow . openSearchWindow ( ) ;
// Search some text in the webview
searchInWebview . openSearchWindow ( ) ;이 패키지는 CI(macOS 및 Linux용 Travis CI, Windows용 AppVeyor)를 실행하여 크로스 플랫폼(macOS, Linux 및 Windows)에서 작동합니다.
$ npm install --save electron-in-page-search
두 가지 예시가 추가되었습니다. 그러니 거기에서 작동하는 앱의 코드를 확인하세요.
<webview> 에서 검색이 저장소를 복제하여 사용해 볼 수 있습니다.
$ git clone https://github.com/rhysd/electron-in-page-search.git
$ cd electron-in-page-search
$ npm install
$ npm run build
$ npm run example # Run browser window example
$ cd example/webview/
$ npm start # Run webview example
실제 사례도 볼 수 있습니다.
이 패키지의 API를 알아보려면 TypeScript의 유형 정의를 참조하세요.
앱에서 페이지 내 검색을 사용하려면 searchInPage 함수를 호출하여 InPageSearch 인스턴스를 생성하세요.
import searchInPage from 'electron-in-page-search' ;
// or
const searchInPage = require ( 'electron-in-page-search' ) . default ;
import { remote } from 'electron' ;
const inPageSearch = searchInPage ( remote . getCurrentWebContents ( ) ) ;
document . getElementById ( 'some-button' ) . addEventListener ( 'click' , ( ) => {
inPageSearch . openSearchWindow ( ) ;
} ) ; searchInPage 호출하면 검색창에 대한 <webview> 요소가 생성됩니다. 이 <webview> 페이지 내 검색이 검색창에서 텍스트를 찾는 것을 방지할 수 있습니다.
웹뷰에는 기본적으로 electron-in-page-search-window search-inactive 클래스 속성이 있습니다. 그런 다음 openSearchWindow 호출되고 webview는 검색하는 동안 electron-in-page-search-window search-active 클래스 속성을 갖습니다. 따라서 CSS를 사용하여 검색 창 웹뷰의 스타일을 아래와 같이 지정할 수 있습니다.
. electron-in-page-search-window {
width : 300 px ;
height : 36 px ;
background-color : white;
}
. electron-in-page-search-window . search-inactive {
visibility : hidden;
}
. electron-in-page-search-window . search-active {
visibility : visible;
} background-color 추가하여 검색창의 배경색을 제어할 수 있습니다. (위에서는 white 지정했습니다.) CSS를 추가로 사용자 정의할 수 있습니다(아래 '사용자 정의' 섹션 참조).
실제 예제는 예제 스타일을 참조하세요.
검색 창에는 '뒤로' 버튼, '앞으로' 버튼, '닫기' 버튼 및 쿼리 양식이 포함되어 있습니다. 애플리케이션 사용자는 쿼리를 입력하고 이를 클릭하거나 양식에서 Enter 키를 눌러 페이지 내 검색을 시작할 수 있습니다. Enter 키를 반복해서 누르거나 '뒤로'/'앞으로' 버튼을 클릭하면 히트 단어에 초점이 이동됩니다. 마지막으로 사용자는 '닫기' 버튼을 클릭하여 검색 창을 닫고 검색을 중지할 수 있습니다.
검색 창이 닫히면 창의 클래스 속성이 다시 electron-in-page-search-window search-inactive 가 됩니다.
검색 창 <webview> 는 document.body (또는 searchWindowParent 옵션으로 지정된 요소)에 마운트됩니다. InPageSearch 인스턴스를 삭제하려면 .finalize() 메서드를 호출해야 합니다. DOM에서 검색 창 <webview> 마운트 해제합니다.
검색 창의 DevTools를 보려면 아래와 같이 openDevToolsOfSearchWindow 속성을 searchInPage 함수에 전달하세요.
searchInPage ( webContents , { openDevToolsOfSearchWindow : true } ) ;분리 모드로 DevTools를 엽니다.
그리고 이 패키지는 로깅도 지원합니다. $ELECTRON_IN_PAGE_SEARCH_DEBUG 환경 변수가 비어 있지 않으면 렌더 프로세스에서 console.log 로 로그를 출력합니다.
이 패키지는 TypeScript로 작성되었으며 TypeScript를 사용할 수 있습니다. 이 패키지에는 index.d.ts가 이미 있으므로 이 패키지에 대한 유형 정의 파일을 준비할 필요가 없습니다.
import searchInPage , { InPageSearch } from 'electron-in-page-search' ;
let search : InPageSearch ;
const elem = document . createElement ( 'webview' ) ;
elem . src = 'https://example.com' ;
document . getElementById ( 'main' ) . appendChild ( elem ) ;
elem . on ( 'dom-ready' , ( ) => {
search = searchInPage ( elem ) ;
} ) ;
document . getElementById ( 'search-button' ) . addEventListener ( 'click' , ( ) => {
if ( search ) {
search . openSearchWindow ( ) ;
}
} ) ;아래 OS에서 이 패키지를 테스트하고 있습니다.
기본 검색 창을 사용하고 싶지만 기본 CSS는 사용하고 싶지 않은 경우 자체 CSS 파일을 사용할 수 있습니다.
예를 들어
const path = require ( 'path' ) ;
searchInPage ( webview , {
customCssPath : path . join ( __dirname , 'my_awesome_styles.css' )
} ) ; 아래는 검색창에 나타나는 각 파트의 class 속성 목록입니다. 아래 클래스에 대한 CSS 스타일을 작성해 주세요.
| 수업 이름 | 설명 | 요소 |
|---|---|---|
inpage-search-body | 전체 검색창 본문 | <div> |
inpage-search-input | 쿼리 양식 | <input> |
inpage-search-matches | 'N/M' 검색 횟수 | <div> |
inpage-search-back | '뒤로' 버튼 | <div> |
inpage-search-forward | '앞으로' 버튼 | <div> |
inpage-search-close | '닫기' 버튼 | <div> |
전체 검색 창을 제어하려면 자신의 HTML 파일에 대한 경로를 전달할 수 있습니다.
const path = require ( 'path' ) ;
searchInPage ( webview , {
customCssPath : path . join ( __dirname , 'my_awesome_styles.css' ) ,
customSearchWindowHtmlPath : path . join ( __dirname , 'my_awesome_search_window.html' )
} ) ; electronic-in-page-search 패키지는 <script> 태그를 삽입하여 검색 창 <webview> 와 렌더러 프로세스 간의 IPC 메시징을 설정합니다. 각 요소를 찾고 클래스 이름을 통해 리스너를 설정합니다.
따라서 자신의 검색 창 HTML에서도 위의 클래스 이름을 유지해야 합니다.
InPageSearch 인스턴스( searchInPage 에서 반환됨)는 EventEmitter 확장합니다. 특정 타이밍에 일부 이벤트를 발생시킵니다. 특정 지점에서 코드를 실행하기 위해 이를 연결할 수 있습니다.
다음은 후크 이름 목록입니다.
| 후크 이름 | 설명 | 리스너 인수 |
|---|---|---|
| '열려 있는' | 창문이 열렸을 때 | () |
| '시작' | 페이지 내 검색이 시작되었습니다. | (query: string) |
| '다음' | 다음 경기를 찾는 중 | (query: string, forward: boolean) |
| '포커스 입력' | 검색창에 집중하다 | () |
| '설립하다' | 검색어와 일치하는 일부 단어에 대해 | (activeMatch: number, allMatch: number) |
검색 창의 애니메이션에 CSS 애니메이션을 사용할 수 있습니다. Webview가 마운트될 때 검색 창에 애니메이션을 적용하지 않으려면 아래와 같이 search-firstpaint 클래스 이름을 사용하세요.
. electron-in-page-search-window . search-firstpaint {
visibility : hidden;
}
. electron-in-page-search-window . search-inactive {
animation-duration : 0.2 s ;
animation-name : yourAwesomeAnimationOnClosing;
}
. electron-in-page-search-window . search-active {
animation-duration : 0.2 s ;
animation-name : yourAwesomeAnimationOnOpening;
} 처음 검색 창을 열면 search-firstpaint 클래스가 제거됩니다.
InPageSearch 인스턴스는 처음 openSearchWindow 호출될 때까지 검색 창에 대한 <webview> 요소 생성을 지연합니다. <webview> 새로운 프로세스를 포크하기 때문에 메모리 효율성 측면에서 더 좋습니다.
검색창을 미리 로드하고 싶다면 searchInPage() 호출의 두 번째 인자에 preloadSearchWindow: true 설정해주세요.
MIT 라이선스에 따라 배포됨
