electron in page search
1.0.0
Paket ini menyediakan fitur pencarian dalam halaman asli Chrome untuk aplikasi Electron. Electron memaparkan API asli Chrome ke JavaScript. Namun API pencarian dalam halaman asli memiliki beberapa kendala dan stateful. Jadi paket ini membungkusnya dan menyediakan API yang lebih mudah dan bebas jebakan.
Pencarian dalam halaman dapat digunakan untuk jendela browser atau tampilan web (contoh BrowserWindow atau tag <webview> ) di aplikasi Electron. Anda hanya dapat menggunakan satu fungsi untuk keduanya dalam proses penyaji.
// 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 ( ) ;Paket ini bekerja lintas platform (macOS, Linux dan Windows) dengan menjalankan CI di dalamnya (Travis CI untuk macOS dan Linux, AppVeyor untuk Windows).
$ npm install --save electron-in-page-search
Dua contoh ditambahkan. Jadi silakan lihat kode aplikasi yang berfungsi di sana.
<webview>Anda dapat mencobanya dengan mengkloning repositori ini.
$ 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
Anda juga dapat melihat contoh dunia nyata.
Untuk mengetahui API untuk paket ini, Anda dapat melihat definisi tipe TypeScript.
Saat Anda ingin menggunakan pencarian dalam halaman di aplikasi, panggil fungsi searchInPage untuk membuat instance 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 ( ) ;
} ) ; Saat memanggil searchInPage , ini membuat elemen <webview> untuk jendela pencarian. <webview> ini dapat menghindari pencarian dalam halaman menemukan teks di jendela pencarian.
Tampilan web memiliki properti kelas pencarian electron-in-page-search-window search-inactive secara default. Kemudian openSearchWindow dipanggil, tampilan web memiliki properti kelas pencarian electron-in-page-search-window search-active saat mencari. Jadi Anda dapat menata tampilan web jendela pencarian dengan CSS seperti di bawah ini:
. 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;
} Anda dapat mengontrol warna latar belakang jendela pencarian dengan menambahkan background-color (di atas, white ditentukan). Anda dapat menyesuaikan CSS lebih lanjut (silakan lihat bagian 'Kustomisasi' di bawah).
Silakan lihat gaya contoh untuk contoh langsung.
Jendela pencarian berisi tombol 'kembali', tombol 'maju', tombol 'tutup' dan formulir kueri. Pengguna aplikasi dapat memasukkan kueri dan mengkliknya (atau menekan tombol enter di formulir) untuk memulai pencarian dalam halaman. Mengulangi penekanan tombol enter atau mengklik tombol 'kembali'/'maju' akan memindahkan fokus pada kata-kata yang tepat. Akhirnya pengguna dapat menutup jendela pencarian dengan mengklik tombol 'tutup' untuk menghentikan pencarian.
Setelah jendela pencarian ditutup, properti kelas jendela akan menjadi electron-in-page-search-window search-inactive lagi.
Jendela pencarian <webview> dipasang ke document.body (atau elemen yang ditentukan dengan opsi searchWindowParent ). Saat Anda ingin menghancurkan instance InPageSearch , pastikan untuk memanggil metode .finalize() . Ini akan melepas jendela pencarian <webview> dari DOM.
Jika Anda ingin melihat jendela pencarian DevTools, berikan properti openDevToolsOfSearchWindow ke fungsi searchInPage seperti di bawah ini.
searchInPage ( webContents , { openDevToolsOfSearchWindow : true } ) ;Ini membuka DevTools dengan mode pelepasan.
Dan paket ini juga mendukung logging. Ketika variabel lingkungan $ELECTRON_IN_PAGE_SEARCH_DEBUG tidak kosong, ia akan mengeluarkan log dengan console.log dalam proses rendrer.
Paket ini ditulis dalam TypeScript dan siap untuk TypeScript. Anda tidak perlu menyiapkan file definisi tipe untuk paket ini karena index.d.ts sudah ada dalam paket ini.
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 ( ) ;
}
} ) ;Saya sedang menguji paket ini dengan OS di bawah ini
Jika Anda ingin menggunakan jendela pencarian default tetapi tidak ingin menggunakan CSS default, Anda dapat menggunakan file CSS Anda sendiri.
misalnya
const path = require ( 'path' ) ;
searchInPage ( webview , {
customCssPath : path . join ( __dirname , 'my_awesome_styles.css' )
} ) ; Di bawah ini adalah daftar properti class masing-masing bagian di jendela pencarian. Silakan tulis gaya CSS Anda untuk kelas di bawah ini.
| nama kelas | keterangan | elemen |
|---|---|---|
inpage-search-body | Isi seluruh jendela pencarian | <div> |
inpage-search-input | Formulir pertanyaan | <input> |
inpage-search-matches | Jumlah pencarian 'N/M' | <div> |
inpage-search-back | tombol 'kembali' | <div> |
inpage-search-forward | tombol 'maju' | <div> |
inpage-search-close | tombol 'tutup' | <div> |
Jika Anda ingin mengontrol seluruh jendela pencarian, Anda dapat memberikan jalur ke file HTML Anda sendiri.
const path = require ( 'path' ) ;
searchInPage ( webview , {
customCssPath : path . join ( __dirname , 'my_awesome_styles.css' ) ,
customSearchWindowHtmlPath : path . join ( __dirname , 'my_awesome_search_window.html' )
} ) ; paket pencarian elektron-dalam-halaman memasukkan tag <script> untuk mengatur pesan IPC antara jendela pencarian <webview> dan proses penyaji. Ia menemukan setiap elemen dan menetapkan pendengar melalui nama kelas.
Jadi, Anda perlu mempertahankan nama kelas di atas juga di jendela pencarian HTML Anda sendiri.
Instance InPageSearch (dikembalikan dari searchInPage ) memperluas EventEmitter . Ini memancarkan beberapa peristiwa pada waktu tertentu. Anda dapat menghubungkan mereka untuk mengeksekusi kode Anda di beberapa titik.
Di bawah ini adalah daftar nama kait.
| nama kait | keterangan | argumen pendengar |
|---|---|---|
| 'membuka' | Di jendela terbuka | () |
| 'awal' | Pencarian dalam halaman dimulai | (query: string) |
| 'Berikutnya' | Saat menemukan pertandingan berikutnya | (query: string, forward: boolean) |
| 'input fokus' | Tentang fokus pada jendela pencarian | () |
| 'ditemukan' | Pada beberapa kata yang cocok dengan permintaan pencarian | (activeMatch: number, allMatch: number) |
Anda dapat menggunakan animasi CSS untuk animasi jendela pencarian. Jika Anda tidak ingin menganimasikan jendela pencarian saat tampilan web dipasang, silakan gunakan nama kelas search-firstpaint seperti di bawah ini:
. 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;
} Kelas search-firstpaint akan dihapus saat membuka jendela pencarian pertama kali.
Instance InPageSearch menunda pembuatan elemen <webview> untuk jendela pencarian hingga openSearchWindow pertama kali dipanggil. Ini lebih baik dalam hal efisiensi memori karena <webview> melakukan proses baru.
Jika Anda ingin memuat jendela pencarian terlebih dahulu, setel preloadSearchWindow: true ke argumen kedua panggilan searchInPage() .
Didistribusikan di bawah Lisensi MIT
