electron in page search
1.0.0
Этот пакет предоставляет встроенную функцию поиска Chrome в приложениях Electron. Electron предоставляет собственный API Chrome для JavaScript. Но встроенный API поиска на странице имеет некоторые подводные камни и требует отслеживания состояния. Таким образом, этот пакет оборачивает его и предоставляет более простые и безошибочные API.
Поиск на странице можно использовать для окна браузера или веб-просмотра (экземпляр BrowserWindow или тег <webview> ) в приложении Electron. Вы можете использовать только одну функцию для них обоих в процессе рендеринга.
// 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 ( ) ;Этот пакет работает кроссплатформенно (macOS, Linux и Windows) с запуском на них CI (Travis CI для macOS и Linux, AppVeyor для 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 , у веб-просмотра есть свойство класса 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 (см. раздел «Настройка» ниже).
Пожалуйста, посмотрите стиль примера для живого примера.
Окно поиска содержит кнопку «Назад», кнопку «Вперед», кнопку «Закрыть» и форму запроса. Пользователи приложения могут ввести запрос и щелкнуть его (или нажать клавишу ввода в форме), чтобы начать поиск на странице. Повторное нажатие клавиши ввода или нажатие кнопок «назад» и «вперед» перемещает фокус на найденные слова. Наконец, пользователи могут закрыть окно поиска, нажав кнопку «закрыть», чтобы остановить поиск.
После закрытия окна поиска свойство класса окна снова станет electron-in-page-search-window search-inactive .
Окно поиска <webview> монтируется к document.body (или элементу, указанному с помощью параметра searchWindowParent ). Если вы хотите уничтожить экземпляр InPageSearch , обязательно вызовите метод .finalize() . Он отключит окно поиска <webview> от DOM.
Если вы хотите увидеть окно поиска 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 ( ) ;
}
} ) ;Я тестирую этот пакет с ОС ниже
Если вы хотите использовать окно поиска по умолчанию, но не хотите использовать 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 | Число поисков «Н/М» | <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' )
} ) ; Пакет Electron-in-Page-Search внедряет тег <script> для настройки обмена сообщениями IPC между окном поиска <webview> и процессом рендеринга. Он находит каждый элемент и устанавливает прослушиватели по именам классов.
Поэтому вам необходимо сохранить приведенные выше имена классов также в HTML-коде вашего собственного окна поиска.
Экземпляр InPageSearch (возвращенный из searchInPage ) расширяет EventEmitter . Он генерирует некоторые события в определенные моменты времени. Вы можете подключить их для выполнения вашего кода в некоторых моментах.
Ниже приведен список названий хуков.
| имя крючка | описание | аргументы слушателя |
|---|---|---|
| 'открыть' | В открытом окне | () |
| 'начинать' | Начался внутристраничный поиск | (query: string) |
| 'следующий' | При нахождении следующего совпадения | (query: string, forward: boolean) |
| 'фокус-ввод' | О фокусировке на окне поиска | () |
| 'найденный' | По некоторому слову, соответствующему поисковому запросу | (activeMatch: number, allMatch: number) |
Вы можете использовать CSS-анимацию для анимации окна поиска. Если вы не хотите анимировать окно поиска при подключении веб-просмотра, используйте имя класса 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 откладывает создание элемента <webview> для окна поиска до тех пор, пока сначала не будет вызван openSearchWindow . Это лучше с точки зрения эффективности использования памяти, поскольку <webview> создает новый процесс.
Если вы хотите загрузить окно поиска заранее, установите preloadSearchWindow: true для второго аргумента вызова searchInPage() .
Распространяется по лицензии MIT.
