electron-in-page-search
electron-in-page-search copied to clipboard
rhysd
Not working?
I tried using it in my app and like in this example: https://ourcodeworld.com/articles/read/486/how-to-enable-the-search-menu-to-quickly-find-a-word-or-phrase-in-the-application-in-electron-framework
The search input opens just fine, but nothing happens when entering text or clicking on the buttons.
Please try to enable DevTools in the search window:
https://github.com/rhysd/electron-in-page-search#debugging
Can you see any error in console tab?
None actually. Also setting the debugging env variable does show no output
Well that's not true, but the output appears in the regular console, not in the one opened when toggling the search bars focus.
Some example output:
Set focus on search window
index.ts:211 Query from search window webview: bla
index.ts:305 Set focus on search window
index.ts:226 Found: Object {}
index.ts:305 Set focus on search window
index.ts:226 Found: Object {}
index.ts:305 Set focus on search window
index.ts:226 Found: Object {}
index.ts:305 Set focus on search window
index.ts:226 Found: Object {}
index.ts:305 Set focus on search window
index.ts:226 Found: Object {}
index.ts:305 Set focus on search window
index.ts:226 Found: Object {}
index.ts:305 Set focus on search window
index.ts:226 Found: Object {}
index.ts:305 Set focus on search window
index.ts:226 Found: Object {}
index.ts:305 Set focus on search window
index.ts:226 Found: Object {}
index.ts:305 Set focus on search window
index.ts:226 Found: Object {}
Needless to say, there is matching text in the doc.
Seems like that it is somehow not correctly connected to the right context.
I tried the latest repo and it looks to work. Could you try the example in your local? Does it work?
https://github.com/rhysd/electron-in-page-search#examples
And let me confirm your environment.
- OS
- Electron version
- BrowserWindow or WebView (which are you using this library in?)
It's important to reproduce the issue in my environment to solve it. Please provide more information.
OS is Ubuntu 17.10 with a Gnome Desktop. Electron Version is 1.8.2 I tried both browser window (which would be my use case) and web view. Both doesn't seem to work.
Here is the code I used (it's from the example above):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<style>
/*
* .electron-in-page-search-window is a class specified to default
* <webview> element for search window.
*/
.electron-in-page-search-window {
position: fixed;
top: 0;
right: 0;
border: solid grey 1px;
background-color: white;
width: 300px;
height: 36px;
}
/*
* .search-inactive is added to search window <webview> when the window
* is inactive.
*/
.search-inactive {
visibility: hidden;
}
/*
* .search-inactive is added to search window <webview> when the window
* is active.
*/
.search-active {
visibility: visible;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Hello, some demo text.</p>
<p>Click on the following button to search for text on the document.</p>
<input type="button" id="trigger-search" value="Search on document"/>
<p>
Text example. Try to find "esternocleidomastoideo" in the document and the word will be highlighted in the same way as the browser.
</p>
</body>
<script>
// Retrieve the electron in page search module
const searchInPage = require('electron-in-page-search').default;
const remote = require('electron').remote;
// or
// import searchInPage from 'electron-in-page-search';
// Create an instance with the current window
const inPageSearch = searchInPage(remote.getCurrentWebContents());
// Attach an event listener to open the search menu
document.getElementById('trigger-search').addEventListener('click', () => {
inPageSearch.openSearchWindow();
});
// Alternatively add the key event listener [CTRL+F]
window.addEventListener("keydown", (e) => {
if ((e.ctrlKey || e.metaKey) && e.keyCode === 70) {
inPageSearch.openSearchWindow();
}
}, false);
</script>
</html>
Can confirm this error.
Problem is incorrect path definition for loaded content in webview. It tries to load a) search-window from a path where it does not exist b) file:///C:/UsersusernameDocumentsgitfolderdistdefault-style.css
in b) all / are missing.
Defining customSearchWindowHtmlPath and customCssPath seems to help.
In your method 'fixPathSlashes' you use 'process.platform' which is undefined on my machine. This leads to unloadable search-window.js.
I second that. Nothing is able to load unless I specify a custom path. Windows with latest Node/Electron/React
