electron in page search
1.0.0
Este pacote fornece o recurso de pesquisa na página nativa do Chrome para aplicativos Electron. Electron expõe a API nativa do Chrome ao JavaScript. Mas a API de pesquisa nativa na página tem algumas armadilhas e informações de estado. Portanto, este pacote envolve tudo e fornece APIs mais fáceis e sem armadilhas.
A pesquisa na página pode ser usada para janela do navegador ou webview (instância BrowserWindow ou tag <webview> ) no aplicativo Electron. Você pode usar apenas uma função para ambos no processo de renderização.
// 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 ( ) ;Este pacote funciona em várias plataformas (macOS, Linux e Windows) com execução de CI neles (Travis CI para macOS e Linux, AppVeyor para Windows).
$ npm install --save electron-in-page-search
Dois exemplos são adicionados. Então, por favor, veja o código do aplicativo funcional lá.
<webview>Você pode experimentá-los clonando este repositório.
$ 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
Você também pode ver o exemplo do mundo real.
Para conhecer as APIs deste pacote, você pode ver as definições de tipo do TypeScript.
Quando você quiser usar a pesquisa in-page no aplicativo, chame a função searchInPage para criar uma instância 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 ( ) ;
} ) ; Ao chamar searchInPage , ele cria um elemento <webview> para a janela de pesquisa. Este <webview> pode evitar que a pesquisa na página encontre o texto na janela de pesquisa.
O webview tem uma propriedade de classe electron-in-page-search-window search-inactive por padrão. Em seguida, openSearchWindow é chamado, o webview tem uma propriedade de classe electron-in-page-search-window search-active durante a pesquisa. Assim, você pode definir o estilo da webview da janela de pesquisa por CSS como abaixo:
. 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;
} Você pode controlar a cor de fundo da janela de pesquisa adicionando background-color (acima, white é especificado). Você pode personalizar ainda mais o CSS (veja a seção 'Personalização' abaixo).
Por favor, veja o estilo do exemplo para ver um exemplo ao vivo.
A janela de pesquisa contém botão 'voltar', botão 'avançar', botão 'fechar' e formulário de consulta. Os usuários do aplicativo podem inserir uma consulta e clicar nela (ou pressionar a tecla Enter no formulário) para iniciar a pesquisa na página. Repetir para pressionar a tecla Enter ou clicar nos botões 'voltar'/'avançar' move o foco nas palavras atingidas. Finalmente, os usuários podem fechar uma janela de pesquisa clicando no botão 'fechar' para interromper a pesquisa.
Após o fechamento de uma janela de pesquisa, a propriedade de classe da janela ficará electron-in-page-search-window search-inactive .
A janela de pesquisa <webview> é montada em document.body (ou em um elemento especificado com a opção searchWindowParent ). Quando você quiser destruir a instância InPageSearch , certifique-se de chamar o método .finalize() . Isso desmontará a janela de pesquisa <webview> do DOM.
Se você quiser ver uma janela de pesquisa do DevTools, passe a propriedade openDevToolsOfSearchWindow para a função searchInPage conforme abaixo.
searchInPage ( webContents , { openDevToolsOfSearchWindow : true } ) ;Ele abre o DevTools com modo desanexado.
E este pacote também suporta registro. Quando a variável de ambiente $ELECTRON_IN_PAGE_SEARCH_DEBUG não está vazia, ela gera logs com console.log no processo de renderização.
Este pacote foi escrito em TypeScript e pronto para TypeScript. Você não precisa preparar o arquivo de definição de tipo para este pacote porque index.d.ts já está neste pacote.
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 ( ) ;
}
} ) ;Estou testando este pacote com o sistema operacional abaixo
Se quiser usar uma janela de pesquisa padrão, mas não quiser usar um CSS padrão, você pode usar seu próprio arquivo CSS.
por exemplo
const path = require ( 'path' ) ;
searchInPage ( webview , {
customCssPath : path . join ( __dirname , 'my_awesome_styles.css' )
} ) ; Abaixo está uma lista de propriedades class de cada parte na janela de pesquisa. Por favor, escreva seus estilos CSS para as classes abaixo.
| nome da classe | descrição | elemento |
|---|---|---|
inpage-search-body | Corpo de toda a janela de pesquisa | <div> |
inpage-search-input | Formulário de consulta | <input> |
inpage-search-matches | Contagem de pesquisa 'N/M' | <div> |
inpage-search-back | botão 'voltar' | <div> |
inpage-search-forward | botão 'avançar' | <div> |
inpage-search-close | botão 'fechar' | <div> |
Se quiser controlar toda a janela de pesquisa, você pode passar um caminho para seu próprio arquivo HTML.
const path = require ( 'path' ) ;
searchInPage ( webview , {
customCssPath : path . join ( __dirname , 'my_awesome_styles.css' ) ,
customSearchWindowHtmlPath : path . join ( __dirname , 'my_awesome_search_window.html' )
} ) ; O pacote Electron-in-page-search injeta a tag <script> para configurar mensagens IPC entre uma janela de pesquisa <webview> e um processo de renderização. Ele encontra cada elemento e define ouvintes por meio de nomes de classes.
Portanto, você precisa manter os nomes das classes acima também em sua própria janela de pesquisa HTML.
A instância InPageSearch (retornada de searchInPage ) estende EventEmitter . Ele emite alguns eventos em alguns horários. Você pode conectá-los para executar seu código em alguns pontos.
Abaixo está uma lista de nomes de ganchos.
| nome do gancho | descrição | argumentos do ouvinte |
|---|---|---|
| 'abrir' | Na janela aberta | () |
| 'começar' | Na pesquisa na página iniciada | (query: string) |
| 'próximo' | Ao encontrar a próxima partida | (query: string, forward: boolean) |
| 'entrada de foco' | Sobre focar na janela de pesquisa | () |
| 'encontrado' | Em alguma palavra correspondente à consulta de pesquisa | (activeMatch: number, allMatch: number) |
Você pode usar animação CSS para animação da janela de pesquisa. Se você não quiser animar uma janela de pesquisa quando o webview for montado, use o nome da classe search-firstpaint conforme abaixo:
. 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;
} A classe search-firstpaint será removida ao abrir a janela de pesquisa pela primeira vez.
A instância InPageSearch atrasa a criação do elemento <webview> para uma janela de pesquisa até que openSearchWindow seja chamado primeiro. Isso é melhor em termos de eficiência de memória porque <webview> bifurca um novo processo.
Se você deseja carregar uma janela de pesquisa antecipadamente, defina preloadSearchWindow: true como o segundo argumento da chamada searchInPage() .
Distribuído sob a licença MIT
