electron in page search

การค้นหาในเพจสำหรับแอปพลิเคชันอิเล็กตรอน

แพ็คเกจนี้นำเสนอคุณลักษณะการค้นหาในหน้าเว็บดั้งเดิมของ Chrome สำหรับแอปพลิเคชัน Electron Electron เปิดเผย API ดั้งเดิมของ Chrome เป็น JavaScript แต่ API การค้นหาในหน้าเว็บแบบเนทีฟมีข้อผิดพลาดและสถานะอยู่บางประการ ดังนั้นแพ็คเกจนี้จึงห่อหุ้มและมอบ API ที่ง่ายกว่าและปราศจากข้อผิดพลาด

การค้นหาในหน้าเว็บสามารถใช้กับหน้าต่างเบราว์เซอร์หรือ webview (อินสแตนซ์ 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> นี้สามารถหลีกเลี่ยงไม่ให้การค้นหาในหน้าเว็บพบข้อความในหน้าต่างค้นหา

webview มีคุณสมบัติคลาส electron-in-page-search-window search-inactive โดยค่าเริ่มต้น จากนั้นเรียกว่า openSearchWindow webview มีคุณสมบัติคลาส electron-in-page-search-window search-active ในขณะที่ค้นหา ดังนั้นคุณจึงสามารถจัดสไตล์ webview ของหน้าต่างค้นหาด้วย 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() มันจะยกเลิกการต่อเชื่อมหน้าต่างค้นหา <webview> จาก DOM

การพัฒนา

การดีบัก

หากคุณต้องการดู DevTools ของหน้าต่างค้นหา โปรดส่งคุณสมบัติ openDevToolsOfSearchWindow ไปยังฟังก์ชัน searchInPage ดังด้านล่างนี้

 searchInPage ( webContents , { openDevToolsOfSearchWindow : true } ) ;

จะเปิด DevTools ด้วยโหมดแยกออก

และแพ็คเกจนี้ยังรองรับการบันทึกด้วย เมื่อตัวแปรสภาพแวดล้อม $ELECTRON_IN_PAGE_SEARCH_DEBUG ไม่ว่างเปล่า ตัวแปรจะแสดงเอาต์พุตบันทึกด้วย console.log ในกระบวนการเรนเดอร์

TypeScript

แพ็คเกจนี้เขียนด้วย 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 ( ) ;
    }
} ) ;

สิ่งแวดล้อมของฉัน

ฉันกำลังทดสอบแพ็คเกจนี้ด้วยระบบปฏิบัติการด้านล่าง

• macOS 10.12, OS X 10.11.6
• อูบุนตู ลินุกซ์ 16.04 LTS
• วินโดวส์ 8.1

การปรับแต่ง

ใช้ CSS ของฉันเองสำหรับหน้าต่างค้นหา

หากคุณต้องการใช้หน้าต่างค้นหาเริ่มต้น แต่ไม่ต้องการใช้ 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 ของฉันเองสำหรับหน้าต่างค้นหา

หากคุณต้องการควบคุมหน้าต่างการค้นหาทั้งหมด คุณสามารถส่งเส้นทางไปยังไฟล์ HTML ของคุณเองได้

 const path = require ( 'path' ) ;

searchInPage ( webview , {
    customCssPath : path . join ( __dirname , 'my_awesome_styles.css' ) ,
    customSearchWindowHtmlPath : path . join ( __dirname , 'my_awesome_search_window.html' )
} ) ;

แพ็คเกจการค้นหาอิเล็กตรอนในเพจจะแทรกแท็ก <script> เพื่อตั้งค่าการส่งข้อความ IPC ระหว่างหน้าต่างค้นหา <webview> และกระบวนการเรนเดอร์ ค้นหาแต่ละองค์ประกอบและตั้งค่าผู้ฟังผ่านชื่อคลาส

ดังนั้นคุณต้องรักษาชื่อคลาสด้านบนไว้ใน HTML ของหน้าต่างค้นหาของคุณเอง

hooks ตลอดชีวิตสำหรับการค้นหา

อินสแตนซ์ InPageSearch (ส่งคืนจาก searchInPage ) ขยาย EventEmitter มันส่งเสียงเหตุการณ์บางอย่างในเวลาที่กำหนด คุณสามารถขอให้พวกเขารันโค้ดของคุณได้ในบางจุด

ด้านล่างเป็นรายการชื่อ hook

ชื่อเบ็ด	คำอธิบาย	ข้อโต้แย้งของผู้ฟัง
'เปิด'	บนหน้าต่างที่เปิดอยู่	()
'เริ่ม'	ในการค้นหาในหน้าเริ่มต้นขึ้น	(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 ชะลอการสร้างองค์ประกอบ <webview> สำหรับหน้าต่างการค้นหาจนกระทั่งมีการเรียก openSearchWindow แรกในตอนแรก ซึ่งจะดีกว่าในแง่ของประสิทธิภาพของหน่วยความจำเนื่องจาก <webview> แยกกระบวนการใหม่

หากคุณต้องการโหลดหน้าต่างการค้นหาล่วงหน้า โปรดตั้งค่า preloadSearchWindow: true เป็นอาร์กิวเมนต์ที่สองของการเรียก searchInPage()

ใบอนุญาต

เผยแพร่ภายใต้ใบอนุญาต MIT