electron-findbar 0.5.0 → 0.6.5

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 Emerson Capuchi Romaneli
+Copyright (c) 2025 Emerson Capuchi Romaneli
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -8,18 +8,10 @@
     Chrome-like findbar for your Electron application
 </p>
 <p align='center'>
-    <a href="https://github.com/ECRomaneli/electron-findbar/tags" style='text-decoration:none'>
-        <img src="https://img.shields.io/github/v/tag/ecromaneli/electron-findbar?label=version&sort=semver&style=for-the-badge" alt="Version">
-    </a>
-    <a href="https://github.com/ECRomaneli/electron-findbar/commits/master" style='text-decoration:none'>
-        <img src="https://img.shields.io/github/last-commit/ecromaneli/electron-findbar?style=for-the-badge" alt="Last Commit">
-    </a>
-    <a href="https://github.com/ECRomaneli/electron-findbar/blob/master/LICENSE" style='text-decoration:none'>
-        <img src="https://img.shields.io/github/license/ecromaneli/electron-findbar?style=for-the-badge" alt="License">
-    </a>
-    <a href="https://github.com/ECRomaneli/electron-findbar/issues" style='text-decoration:none'>
-        <img src="https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=for-the-badge" alt="Contributions Welcome">
-    </a>
+    <a href="https://github.com/ECRomaneli/electron-findbar/tags"><img src="https://img.shields.io/github/v/tag/ecromaneli/electron-findbar?label=version&sort=semver&style=for-the-badge" alt="Version"></a>
+    <a href="https://github.com/ECRomaneli/electron-findbar/commits/master"><img src="https://img.shields.io/github/last-commit/ecromaneli/electron-findbar?style=for-the-badge" alt="Last Commit"></a>
+    <a href="https://github.com/ECRomaneli/electron-findbar/blob/master/LICENSE"><img src="https://img.shields.io/github/license/ecromaneli/electron-findbar?style=for-the-badge" alt="License"></a>
+    <a href="https://github.com/ECRomaneli/electron-findbar/issues"><img src="https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=for-the-badge" alt="Contributions Welcome"></a>
 </p>
 
 ## Installation
@@ -47,21 +39,21 @@ All public methods are documented with JSDoc and can be referenced during import
 To import the Findbar class:
 
 ```js
-const { Findbar } = require('electron-findbar');
+const { Findbar } = require('electron-findbar')
 ```
 
 ### Creating the Findbar Instance
 
-You can pass a `BrowserWindow` instance as a single parameter to use it as the parent window. The `BrowserWindow.WebContents` will be used as the searchable content:
+You can pass a `BrowserWindow` instance as a single parameter to use it as the parent window. The `BrowserWindow.WebContents` will be used as the findable content:
 
 ```js
-const findbar = new Findbar(browserWindow);
+const findbar = new Findbar(browserWindow)
 ```
 
-Alternatively, you can provide a custom `WebContents` as the second parameter. In this case, the first parameter can be any `BaseWindow`, and the second parameter will be the searchable content:
+Alternatively, you can provide a custom `WebContents` as the second parameter. In this case, the first parameter can be any `BaseWindow`, and the second parameter will be the findable content:
 
 ```js
-const findbar = new Findbar(baseWindow, customWebContents);
+const findbar = new Findbar(baseWindow, customWebContents)
 ```
 
 ### Configuring the Findbar
@@ -69,16 +61,24 @@ const findbar = new Findbar(baseWindow, customWebContents);
 You can customize the Findbar window options using the `setWindowOptions` method:
 
 ```js
-findbar.setWindowOptions({ movable: true, resizable: true, alwaysOnTop: true });
+findbar.setWindowOptions({ movable: true, resizable: true, alwaysOnTop: true })
 ```
 
-The findbar has a default position handler which moves the findbar to the top-right corner. To change the position handler, use the `setPositionHandler`. The position handler is called when the parent window moves or resizes and provides both the parent and findbar bounds as parameters.
+To handle the Findbar window directly after it is opened, use the `setWindowHandler` method:
+
+```js
+findbar.setWindowHandler(win => {
+    win.setVisibleOnAllWorkspaces(true, { visibleOnFullScreen: true })
+});
+```
+
+The findbar has a default position handler which moves the findbar to the top-right corner. To change the position handler, use the `setPositionHandler` method. The position handler is called when the parent window moves or resizes and provides both the parent and findbar bounds as parameters.
 
 ```js
 findbar.setPositionHandler((parentBounds, findbarBounds) => ({
     x: parentBounds.x + parentBounds.width - findbarBounds.width - 20,
     y: parentBounds.y - ((findbarBounds.height / 4) | 0)
-}));
+}))
 ```
 
 ### Opening the Findbar
@@ -86,17 +86,9 @@ findbar.setPositionHandler((parentBounds, findbarBounds) => ({
 The Findbar is a child window of the `BaseWindow` passed during construction. To open it use:
 
 ```js
-findbar.open();
+findbar.open()
 ```
 
-On MacOS, the findbar will follow the relative movement of the parent window by default and there is no way to change it. On Windows and Linux, this behavior is not default and is simulated by using the `move` event of the parent and can be disabled by using:
-
-```js
-findbar.followParentWindow(false)
-```
-
-> Enabled by default.
-
 ### Finding Text in the Page
 
 Once open, the Findbar appears by default in the top-right corner of the parent window and can be used without additional coding. Alternatively, you can use the following methods to trigger `findInPage` and navigate through matches in the main process:
@@ -105,28 +97,28 @@ Once open, the Findbar appears by default in the top-right corner of the parent
 /**
  * Retrieve the last queried value.
  */
-getLastValue();
+getLastValue()
 
 /**
  * Initiate a request to find all matches for the specified text on the page.
  * @param {string} text - The text to search for.
  */
-startFind(text);
+startFind(text)
 
 /**
  * Select the previous match, if available.
  */
-findPrevious();
+findPrevious()
 
 /**
  * Select the next match, if available.
  */
-findNext();
+findNext()
 
 /**
  * Stop the find request.
  */
-stopFind();
+stopFind()
 ```
 
 ### Closing the Findbar
@@ -134,7 +126,7 @@ stopFind();
 When the Findbar is closed, its window is destroyed to free memory resources. Use the following method to close the Findbar:
 
 ```js
-findbar.close();
+findbar.close()
 ```
 
 A new internal window will be created the next time the `open` method is called. There is no need to instantiate another Findbar for the same parent window.
@@ -144,32 +136,36 @@ A new internal window will be created the next time the `open` method is called.
 Here is a quick example demonstrating how to use the `electron-findbar`:
 
 ```js
-const { app, BrowserWindow } = require('electron');
-const { Findbar } = require('electron-findbar');
+const { app, BrowserWindow } = require('electron')
+const { Findbar } = require('electron-findbar')
 
 app.whenReady().then(() => {  
-  const window = new BrowserWindow();
-  window.loadURL('https://github.com/ECRomaneli/electron-findbar');
+  const window = new BrowserWindow()
+  window.loadURL('https://github.com/ECRomaneli/electron-findbar')
 
   // Create and configure the Findbar object
-  const findbar = new Findbar(window);
+  const findbar = new Findbar(window)
 
   // [OPTIONAL] Customize window options
-  findbar.setWindowOptions({ movable: true, resizable: true });
+  findbar.setWindowOptions({ movable: true, resizable: true })
 
   // [OPTIONAL] Handle the window object when the Findbar is opened
   findbar.setWindowHandler(win => {
-    win.webContents.openDevTools();
-  });
+    win.webContents.openDevTools()
+  })
 
   // Open the Findbar
-  findbar.open();
-});
+  findbar.open()
+})
 ```
 
 ## IPC Events
 
-As an alternative, the findbar can be controlled using IPC events in the `renderer` process of the `WebContents` provided during the findbar construction. Example:
+As an alternative, the findbar can be controlled using IPC events in the `renderer` process of the `WebContents` provided during the findbar construction.
+
+### ipcRenderer
+
+If the `contextIsolation` is enabled, the `electron-findbar/remote` will not be available, but the IPC events can be used directly through the preload script:
 
 ```js
 const $remote = (ipc => ({
@@ -185,9 +181,16 @@ $remote.open()
 $remote.inputChange('findIt')
 ```
 
-## Notes
+### Remote module
+
+With the `contextIsolation` disabled, the remote library is available to use:
 
-There are some intentional differences from the Chrome findbar, such as the horizontal margins of the divider and the input text, which has been replaced by a search input to include a clear button (the "x" on the right side).
+```js
+const FindbarRemote = require('electron-findbar/remote')
+
+FindbarRemote.open()
+FindbarRemote.inputChange('findIt')
+```
 
 ## Author
 

package/index.js

@@ -40,6 +40,7 @@ class Findbar {
     constructor (parent, webContents) {
         this.#parent = parent
         this.#findableContents = webContents ?? parent.webContents
+        this.#findableContents._findbar = this
         
         if (!this.#findableContents) {
             throw new Error('There are no searchable web contents.')
@@ -56,7 +57,6 @@ class Findbar {
         }
         this.#window = new BrowserWindow(Findbar.#mergeStandardOptions(this.#customOptions, this.#parent))
         this.#window.webContents._findbar = this
-        this.#findableContents._findbar = this
 
         this.#registerListeners()
 
@@ -90,7 +90,7 @@ class Findbar {
     startFind(text, skipInputUpdate) {
         skipInputUpdate || this.#window?.webContents.send('electron-findbar/text-change', text)
         if (this.#lastText = text) {
-            this.#findableContents.findInPage(this.#lastText, { findNext: true })
+            this.isOpen() && this.#findableContents.findInPage(this.#lastText, { findNext: true })
         } else {
             this.stopFind()
         }
@@ -101,7 +101,7 @@ class Findbar {
      */
     findPrevious() {
         this.#matches.active === 1 && (this.#fixMove = false)
-        this.#findableContents.findInPage(this.#lastText, { forward: false })
+        this.isOpen() && this.#findableContents.findInPage(this.#lastText, { forward: false })
     }
 
     /**
@@ -109,7 +109,7 @@ class Findbar {
      */
     findNext() {
         this.#matches.active === this.#matches.total && (this.#fixMove = true)
-        this.#findableContents.findInPage(this.#lastText, { forward: true })
+        this.isOpen() && this.#findableContents.findInPage(this.#lastText, { forward: true })
     }
 
     /**
@@ -121,13 +121,29 @@ class Findbar {
     }
 
     /**
-     * Return if the findbar is open or not.
+     * Whether the findbar is opened.
      * @returns {boolean} True, if the findbar is open. Otherwise, false.
      */
     isOpen() {
         return !!this.#window
     }
 
+    /**
+     * Whether the findbar is focused. If the findbar is closed, false will be returned.
+     * @returns {boolean} True, if the findbar is focused. Otherwise, false.
+     */
+    isFocused() {
+        return !!this.#window?.isFocused()
+    }
+
+    /**
+     * Whether the findbar is visible to the user in the foreground of the app. If the findbar is closed, false will be returned.
+     * @returns {boolean} True, if the findbar is visible. Otherwise, false.
+     */
+    isVisible() {
+        return !!this.#window?.isVisible()
+    }
+
     /**
      * Provides a customized set of options to findbar window before open. Note
      * that the options below are necessary for the correct functioning and cannot
@@ -244,7 +260,8 @@ class Findbar {
         options.acceptFirstMouse = options.acceptFirstMouse ?? true
         options.parent = parent
         options.frame = false
-        options.transparent = true
+        options.roundedCorners = true
+        options.transparent = process.platform === 'linux'
         options.maximizable = false
         options.minimizable = false
         options.skipTaskbar = true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "electron-findbar",
-  "version": "0.5.0",
+  "version": "0.6.5",
   "description": "Chrome-like findbar for your Electron app.",
   "main": "index.js",
   "scripts": {
@@ -13,10 +13,15 @@
   },
   "keywords": [
     "findbar",
+    "find-bar",
+    "find bar",
     "electron-findbar",
+    "electron-find-bar",
     "electron",
     "chrome-findbar",
-    "search"
+    "chrome-find-bar",
+    "search",
+    "search-bar"
   ],
   "author": "ECRomaneli",
   "license": "MIT",

package/remote.js

@@ -0,0 +1,22 @@
+/**
+ * Remote IPC events to control the findbar through the renderer.
+ */
+const Remote = (ipc => ({
+    /**
+     * Get last queried text.
+     * @returns {string}
+     */
+    getLastText: async () => ipc.invoke('electron-findbar/last-text'),
+
+    /**
+     * Change the input value and find it.
+     * @param {string} text 
+     */
+    inputChange: (text) => { ipc.send('electron-findbar/input-change', text) },
+    previous: () => { ipc.send('electron-findbar/previous') },
+    next: () => { ipc.send('electron-findbar/next') },
+    open: () => { ipc.send('electron-findbar/open') },
+    close: () => { ipc.send('electron-findbar/close') },
+})) (require('electron').ipcRenderer)
+
+module.exports = Remote

package/test/sample.html

@@ -22,14 +22,7 @@ Suspendisse vel euismod ante. Nunc sagittis quam ut gravida pulvinar. Sed at sem
 Aliquam ut pellentesque tellus, quis vulputate nisl. Phasellus vitae blandit nunc, eu sodales velit. Duis enim tellus, faucibus id arcu vitae, consectetur tempus mauris. Praesent commodo commodo dolor non malesuada. Donec sed dolor eget arcu tincidunt efficitur sit amet vel nisi. Sed consectetur tincidunt molestie. Nam at magna a odio rhoncus convallis id eu nunc. Nam luctus ut leo et viverra. Proin tempor libero vitae arcu laoreet, sed pharetra sapien rutrum. Nam nunc orci, aliquet sit amet dignissim nec, aliquet quis quam. Nulla facilisi.
     </span>
     <script>
-        const $remote = (ipc => ({
-            getLastText: async () => ipc.invoke('electron-findbar/last-text'),
-            inputChange: (value) => { ipc.send('electron-findbar/input-change', value) },
-            previous: () => { ipc.send('electron-findbar/previous') },
-            next: () => { ipc.send('electron-findbar/next') },
-            open: () => { ipc.send('electron-findbar/open') },
-            close: () => { ipc.send('electron-findbar/close') },
-        })) (require('electron').ipcRenderer)
+        const $remote = require('../remote')
     </script>
 </body>
 </html>

package/test/sample.js

@@ -22,7 +22,6 @@ function setupFindbar(window) {
   const findbar = new Findbar(window)
   findbar.setWindowOptions({ movable: true, resizable: true })
   findbar.setWindowHandler(win => { /* handle the findbar window */ })
-  findbar.open()
   return findbar
 }