electron in page search

البحث داخل الصفحة عن تطبيقات الإلكترون

توفر هذه الحزمة ميزة البحث الأصلية داخل الصفحة من Chrome لتطبيقات Electron. يعرض Electron واجهة برمجة تطبيقات Chrome الأصلية لجافا سكريبت. لكن واجهة برمجة تطبيقات البحث الأصلية داخل الصفحة بها بعض المخاطر والحالة. لذا فإن هذه الحزمة تغلفها وتوفر واجهات برمجة تطبيقات أكثر سهولة وخالية من الأخطاء.

يمكن استخدام البحث داخل الصفحة لنافذة المتصفح أو عرض الويب (مثيل 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

يمكنك أيضًا رؤية مثال العالم الحقيقي.

لمعرفة واجهات برمجة التطبيقات لهذه الحزمة، يمكنك رؤية تعريفات النوع الخاصة بـ 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 ( ) ;
    }
} ) ;

بيئتي

أقوم باختبار هذه الحزمة مع نظام التشغيل أدناه

• ماك أو إس 10.12، أو إس إكس 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' )
} ) ;

تقوم حزمة Electro-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() .

رخصة

وزعت بموجب ترخيص معهد ماساتشوستس للتكنولوجيا