electron in page search下载 - electron in page search源代码下载

electron in page search

其他源码

1.0.0

下载

Electron 应用程序的页内搜索

该软件包为 Electron 应用程序提供了 Chrome 的本机页内搜索功能。 Electron 将 Chrome 的原生 API 暴露给 JavaScript。但本机页内搜索 API 存在一些缺陷和状态。所以这个包包装了它并提供了更简单、无陷阱的 API。

页内搜索可用于 Electron 应用程序中的浏览器窗口或 webview（ BrowserWindow实例或<webview>标签）。在渲染器进程中，您只能对它们使用一个函数。

 // 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（适用于 macOS 和 Linux 的 Travis CI，适用于 Windows 的 AppVeyor）。

安装

 $ 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 。因此，您可以通过 CSS 设置搜索窗口 webview 的样式，如下所示：

. 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 键或单击“后退”/“前进”按钮可将焦点移至热门单词上。最后，用户可以通过单击“关闭”按钮来关闭搜索窗口以停止搜索。

搜索窗口关闭后，窗口的类属性将再次变为electron-in-page-search-window search-inactive 。

搜索窗口<webview>安装到document.body （或使用searchWindowParent选项指定的元素）。当您想要销毁InPageSearch实例时，请确保调用.finalize()方法。它将从 DOM 中卸载搜索窗口<webview> 。

发展

调试

如果您想查看 DevTools 的搜索窗口，请将openDevToolsOfSearchWindow属性传递给searchInPage函数，如下所示。

 searchInPage ( webContents , { openDevToolsOfSearchWindow : true } ) ;

它以分离模式打开 DevTools。

而且这个包还支持日志记录。当$ELECTRON_IN_PAGE_SEARCH_DEBUG环境变量不为空时，它会在rendrer进程中以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 ( ) ;
    }
} ) ;

我的环境

我正在使用以下操作系统测试这个包

macOS 10.12、OS X 10.11.6
Ubuntu Linux 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>标签来设置搜索窗口<webview>和渲染器进程之间的 IPC 消息传递。它查找每个元素并通过类名设置侦听器。

因此，您还需要在自己的搜索窗口 HTML 中维护上述类名称。

搜索的终身挂钩

InPageSearch实例（从searchInPage返回）扩展了EventEmitter 。它在某些时间发出一些事件。您可以挂钩它们在某些时候执行您的代码。

下面是钩子名称的列表。

钩子名称	描述	监听器参数
'打开'	窗户打开时	`()`
'开始'	页内搜索开始	`(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;
}