electron-findbar 1.0.1 → 2.0.0

package/README.md

@@ -1,7 +1,7 @@
 <p align='center'>
     <a href="https://github.com/ECRomaneli/handbook" style='text-decoration:none'>
-        <img src="https://i.postimg.cc/0QR0s0Z1/findbar-light.png" alt='Findbar Light Theme'>
-        <img src="https://i.postimg.cc/LXtB6g0Y/findbar-dark.png" alt='Findbar Dark Theme'>
+        <img src="https://i.postimg.cc/sXwqJP59/findbar-v2-light.png" alt='Findbar Light Theme'>
+        <img src="https://i.postimg.cc/j26XXRVV/findbar-v2-dark.png" alt='Findbar Dark Theme'>
     </a>
 </p>
 <p align='center'>
@@ -47,13 +47,35 @@ const Findbar = require('electron-findbar')
 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)
+// Create or retrieve the findbar associated to the browserWindow.webContents. If a new findbar is created, the browserWindow is used as parent.
+const findbar = Findbar.from(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 findable content:
 
 ```js
-const findbar = new Findbar(baseWindow, customWebContents)
+// Create or retrieve the findbar associated to the webContents. If a new findbar is created, the baseWindow is used as parent.
+const findbar = Findbar.from(baseWindow, webContents)
+```
+
+Is also possible to create a findbar without a parent window (even though it is not recommended):
+
+```js
+// Create or retrieve the findbar associated to the webContents. If a new findbar is created, it will be displayed in the middle of the screen without a parent to connect to.
+const findbar = Findbar.from(webContents)
+```
+
+**Note:** The findbar is ALWAYS linked to the webContents not the window. The parent is only the window to connect the events and stay on top. If the `.from(webContents)` is used to retrieve an existing findbar previously created with a parent, the findbar will stay connected to the parent.
+
+#### Retrieve if exists
+
+If there is no intention to create a new findbar in case it does not exist, use:
+
+```js
+// Get the existing findbar or undefined.
+const existingFindbar = Findbar.fromIfExists(browserWindow)
+/* OR */
+const existingFindbar = Findbar.fromIfExists(webContents)
 ```
 
 ### Configuring the Findbar
@@ -61,7 +83,7 @@ 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({ resizable: true, alwaysOnTop: true, height: 100 })
 ```
 
 To handle the Findbar window directly after it is opened, use the `setWindowHandler` method:
@@ -72,12 +94,14 @@ findbar.setWindowHandler(win => {
 });
 ```
 
-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.
+The findbar has a default position handler which moves the findbar to the top-right corner. To change the position handler, use the `setBoundsHandler` method. The bounds 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) => ({
+findbar.setBoundsHandler((parentBounds, findbarBounds) => ({
     x: parentBounds.x + parentBounds.width - findbarBounds.width - 20,
     y: parentBounds.y - ((findbarBounds.height / 4) | 0)
+    /* width: OPTIONAL, current value will be used */
+    /* height: OPTIONAL, current value will be used */
 }))
 ```
 
@@ -89,38 +113,6 @@ The Findbar is a child window of the `BaseWindow` passed during construction. To
 findbar.open()
 ```
 
-### 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:
-
-```js
-/**
- * Retrieve the last queried value.
- */
-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)
-
-/**
- * Select the previous match, if available.
- */
-findPrevious()
-
-/**
- * Select the next match, if available.
- */
-findNext()
-
-/**
- * Stop the find request.
- */
-stopFind()
-```
-
 ### Closing the Findbar
 
 When the Findbar is closed, its window is destroyed to free memory resources. Use the following method to close the Findbar:
@@ -144,21 +136,148 @@ app.whenReady().then(() => {
   window.loadURL('https://github.com/ECRomaneli/electron-findbar')
 
   // Create and configure the Findbar object
-  const findbar = new Findbar(window)
+  const findbar = Findbar.from(window)
 
   // [OPTIONAL] Customize window options
   findbar.setWindowOptions({ movable: true, resizable: true })
 
   // [OPTIONAL] Handle the window object when the Findbar is opened
-  findbar.setWindowHandler(win => {
-    win.webContents.openDevTools()
-  })
+  findbar.setWindowHandler(win => { win.webContents.openDevTools() })
 
   // Open the Findbar
   findbar.open()
 })
 ```
 
+### Configuring Keyboard Shortcuts
+
+The Findbar component can be controlled using keyboard shortcuts. Below are two implementation approaches to help you integrate search functionality seamlessly into your application's user experience.
+
+**Note:** The following examples demonstrate only the ideal (happy path) scenarios. For production use, make sure to thoroughly validate all inputs and handle edge cases appropriately.
+
+#### Using Before Input Event
+
+The `before-input-event` approach allows you to capture keyboard events directly in the main process before they're processed by the web contents, giving you precise control:
+
+```js
+window.webContents.on('before-input-event', (event, input) => {
+  // Detect Ctrl+F (Windows/Linux) or Command+F (macOS)
+  if ((input.control || input.meta) && input.key.toLowerCase() === 'f') {
+    // Prevent default browser behavior
+    event.preventDefault()
+    
+    // Access and open the findbar
+    const findbar = Findbar.from(window)
+    if (findbar) {
+      findbar.open()
+    }
+  }
+  
+  // Handle Escape key to close the findbar
+  if (input.key === 'Escape') {
+    const findbar = Findbar.from(window)
+    if (findbar && findbar.isOpen()) {
+      event.preventDefault()
+      findbar.close()
+    }
+  }
+})
+```
+
+#### Using Menu Accelerators
+
+For a more integrated approach, you can modify your application's menu system to include findbar controls with keyboard accelerators. This method makes shortcuts available throughout your application:
+
+```js
+// Get reference to the parent window
+const parent = currentBrowserWindowOrWebContents
+
+// Get or create application menu
+const appMenu = Menu.getApplicationMenu() ?? new Menu()
+
+// Add Findbar controls to menu
+appMenu.append(new MenuItem({
+  label: 'Find', 
+  submenu: [
+    { 
+      label: 'Find in Page', 
+      click: () => Findbar.from(parent)?.open(), 
+      accelerator: 'CommandOrControl+F' 
+    },
+    { 
+      label: 'Close Find', 
+      click: () => Findbar.from(parent)?.close(), 
+      accelerator: 'Esc' 
+    }
+  ]
+}))
+
+// Apply the updated menu
+Menu.setApplicationMenu(appMenu)
+```
+
+Both approaches have their advantages - the first offers fine-grained control over exactly when shortcuts are activated, while the second provides better integration with standard application menu conventions.
+
+### Finding Text using the main process
+
+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:
+
+```js
+/**
+ * Get the last state of the findbar.
+ * @returns {{ text: string, matchCase: boolean, movable: boolean }} Last state of the findbar.
+ */
+getLastState()
+
+/**
+ * Initiate a request to find all matches for the specified text on the page.
+ * @param {string} text - The text to search for.
+ * @param {boolean} [skipRendererEvent=false] - Skip update renderer event.
+ */
+startFind(text, skipRendererEvent)
+
+/**
+ * Whether the search should be case-sensitive.
+ * @param {boolean} status - Whether the search should be case-sensitive. Default is false.
+ * @param {boolean} [skipRendererEvent=false] - Skip update renderer event.
+ */
+matchCase(status, skipRendererEvent)
+
+/**
+ * Select the previous match, if available.
+ */
+findPrevious()
+
+/**
+ * Select the next match, if available.
+ */
+findNext()
+
+/**
+ * Stop the find request and clears selection.
+ */
+stopFind()
+
+/**
+ * Whether the findbar is opened.
+ * @returns {boolean} True if the findbar is open, otherwise false.
+ */
+isOpen()
+
+/**
+ * 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()
+
+/**
+ * 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()
+```
+
 ## 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.
@@ -169,12 +288,12 @@ If the `contextIsolation` is enabled, the `electron-findbar/remote` will not be
 
 ```js
 const $remote = (ipc => ({
-    getLastText: async () => ipc.invoke('electron-findbar/last-text'),
+    getLastState: async () => ipc.invoke('electron-findbar/last-state'),
     inputChange: (value) => { ipc.send('electron-findbar/input-change', value) },
+    matchCase: (value) => { ipc.send('electron-findbar/match-case', 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') },
+    close: () => { ipc.send('electron-findbar/close') }
 })) (require('electron').ipcRenderer)
 
 $remote.open()
@@ -198,5 +317,5 @@ Created by [Emerson Capuchi Romaneli](https://github.com/ECRomaneli) (@ECRomanel
 
 ## License
 
-This project is licensed under the [MIT License](https://github.com/ECRomaneli/handbook/blob/master/LICENSE).
+This project is licensed under the [MIT License](https://github.com/ECRomaneli/electron-findbar/blob/master/LICENSE).
 

package/index.js

@@ -1,5 +1,8 @@
 const { BaseWindow, BrowserWindow, WebContents, BrowserWindowConstructorOptions, Rectangle } = require('electron')
 
+/**
+ * Chrome-like findbar for Electron applications.
+ */
 class Findbar {
     /** @type {BaseWindow} */
     #parent
@@ -10,14 +13,14 @@ class Findbar {
     /** @type {WebContents} */
     #findableContents
 
-    /** */
+    /** @type { { active: number, total: number } } */
     #matches
 
     /** @type {(findbarWindow: BrowserWindow) => void} */
     #windowHandler
 
-    /** @type {{parentBounds: Rectangle, findbarBounds: Rectangle} => {x: number, y: number}} */
-    #positionHandler = Findbar.#setDefaultPosition
+    /** @type {{parentBounds: Rectangle, findbarBounds: Rectangle} => Rectangle} */
+    #boundsHandler = Findbar.#setDefaultPosition
 
     /** @type {BrowserWindowConstructorOptions} */
     #customOptions
@@ -25,6 +28,12 @@ class Findbar {
     /** @type {string} */
     #lastText = ''
 
+    /** @type {boolean} */
+    #matchCase = false
+
+    /** @type {boolean} */
+    #isMovable = false
+
     /**
      * Workaround to fix "findInPage" bug - double-click to loop
      * @type {boolean | null}
@@ -32,37 +41,56 @@ class Findbar {
     #fixMove = null
 
     /**
-     * Prepare the findbar.
-     * @param {BaseWindow} parent Parent window.
-     * @param {WebContents | void} webContents Searchable web contents. If not set and the parent is a BrowserWindow, 
-     * the web contents of the parent will be used. Otherwise, an error will be triggered.
+     * Configure the findbar and link to the web contents.
+     * 
+     * @overload
+     * @param {BrowserWindow} browserWindow Parent window.
+     * @param {WebContents} [customWebContents] Custom findable web contents. If not provided, the web contents of the BrowserWindow will be used.
+     * @returns {Findbar} The findbar instance if it exists.
+     *
+     * @overload
+     * @param {BaseWindow} baseWindow Parent window.
+     * @param {WebContents} webContents Findable web contents.
+     * @returns {Findbar} The findbar instance if it exists.
+     * @throws {Error} If no webContents is provided.
+     *     * 
+     * @overload
+     * @param {WebContents} webContents Findable web contents. The parent window will be undefined.
+     * @returns {Findbar} The findbar instance if it exists.
+     * @throws {Error} If no webContents is provided.
      */
     constructor (parent, webContents) {
-        this.#parent = parent
-        this.#findableContents = webContents ?? parent.webContents
-        this.#findableContents._findbar = this
-        
+        if (isFindable(parent)) {
+            this.#parent = void 0
+            this.#findableContents = parent
+        } else {
+            this.#parent = parent
+            this.#findableContents = webContents ?? parent.webContents
+        }
+
         if (!this.#findableContents) {
             throw new Error('There are no searchable web contents.')
         }
+
+        this.#findableContents._findbar = this
     }
     
     /**
      * Open the findbar. If the findbar is already opened, focus the input text.
+     * @returns {void}
      */
     open() {
         if (this.#window) {
             this.#focusWindowAndHighlightInput()
             return
         }
-        this.#window = new BrowserWindow(Findbar.#mergeStandardOptions(this.#customOptions, this.#parent))
+        const options = Findbar.#mergeStandardOptions(this.#customOptions, this.#parent)
+        this.#isMovable = options.movable
+        this.#window = new BrowserWindow(options)
         this.#window.webContents._findbar = this
 
         this.#registerListeners()
 
-        const pos = this.#positionHandler(this.#parent.getBounds(), this.#window.getBounds())
-        this.#window.setPosition(pos.x, pos.y)
-
         this.#windowHandler && this.#windowHandler(this.#window)
         
         this.#window.loadFile(`${__dirname}/web/findbar.html`)
@@ -70,59 +98,82 @@ class Findbar {
 
     /**
      * Close the findbar.
+     * @returns {void}
      */
     close() {
-        this.#window?.close()
+        if (!this.#window || this.#window.isDestroyed()) { return }
+        if (!this.#window.isVisible()) { this.#window.close(); return }
+        this.#window.on('hide', () => { this.#window.close() })
+        this.#window.hide()
     }
 
     /**
-     * Get last queried text.
+     * Get the last state of the findbar.
+     * @returns {{ text: string, matchCase: boolean, movable: boolean }} Last state of the findbar.
      */
-    getLastText() {
-        return this.#lastText
+    getLastState() {
+        return { text: this.#lastText, matchCase: this.#matchCase, movable: this.#isMovable }
     }
 
     /**
      * Starts a request to find all matches for the text in the page.
-     * @param {string} text Value to find in page.
-     * @param {boolean | void} skipInputUpdate Skip findbar input update.
+     * @param {string} text - Value to find in page.
+     * @param {boolean} [skipRendererEvent=false] - Skip update renderer event.
+     * @returns {void}
      */
-    startFind(text, skipInputUpdate) {
-        skipInputUpdate || this.#window?.webContents.send('electron-findbar/text-change', text)
+    startFind(text, skipRendererEvent) {
+        skipRendererEvent || this.#window?.webContents.send('electron-findbar/text-change', text)
         if (this.#lastText = text) {
-            this.isOpen() && this.#findableContents.findInPage(this.#lastText, { findNext: true })
+            this.isOpen() && this.#findInContent({ findNext: true })
         } else {
             this.stopFind()
         }
     }
 
+    /**
+     * Whether the search should be case-sensitive. If not set, the search will be case-insensitive.
+     * @param {boolean} status - Whether the search should be case-sensitive. Default is false.
+     * @param {boolean} [skipRendererEvent=false] - Skip update renderer event.
+     * @returns {void}
+     */
+    matchCase(status, skipRendererEvent) {
+        if (this.#matchCase === status) { return }
+        this.#matchCase = status
+        skipRendererEvent || this.#window?.webContents.send('electron-findbar/match-case-change', this.#matchCase)
+        this.#stopFindInContent()
+        this.startFind(this.#lastText, skipRendererEvent)
+    }
+
     /**
      * Select previous match if any.
+     * @returns {void}
      */
     findPrevious() {
         this.#matches.active === 1 && (this.#fixMove = false)
-        this.isOpen() && this.#findableContents.findInPage(this.#lastText, { forward: false })
+        this.isOpen() && this.#findInContent({ forward: false })
     }
 
     /**
      * Select next match if any.
+     * @returns {void}
      */
     findNext() {
         this.#matches.active === this.#matches.total && (this.#fixMove = true)
-        this.isOpen() && this.#findableContents.findInPage(this.#lastText, { forward: true })
+        this.isOpen() && this.#findInContent({ forward: true })
     }
 
     /**
-     * Stops the find request.
+     * Stops the find request and clears selection.
+     * @returns {void}
      */
     stopFind() {
         this.isOpen() && this.#sendMatchesCount(0, 0)
-        this.#findableContents.isDestroyed() || this.#findableContents.stopFindInPage("clearSelection")
+        this.#findableContents.isDestroyed() || this.#stopFindInContent()
     }
 
     /**
      * Whether the findbar is opened.
-     * @returns {boolean} True, if the findbar is open. Otherwise, false.
+     * @returns {boolean} True if the findbar is open, otherwise false.
      */
     isOpen() {
         return !!this.#window
@@ -130,15 +181,16 @@ class Findbar {
 
     /**
      * Whether the findbar is focused. If the findbar is closed, false will be returned.
-     * @returns {boolean} True, if the findbar is focused. Otherwise, false.
+     * @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.
+     * 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()
@@ -157,7 +209,9 @@ class Findbar {
      * - options.fullscreenable (value: false)
      * - options.webPreferences.nodeIntegration (value: true)
      * - options.webPreferences.contextIsolation (value: false)
-     * @param {BrowserWindowConstructorOptions} customOptions Custom window options.
+     * 
+     * @param {BrowserWindowConstructorOptions} customOptions - Custom window options.
+     * @returns {void}
      */
     setWindowOptions(customOptions) {
         this.#customOptions = customOptions
@@ -165,18 +219,32 @@ class Findbar {
 
     /**
      * Set a window handler capable of changing the findbar window settings after opening.
-     * @param {(findbarWindow: BrowserWindow) => void} windowHandler Window handler.
+     * @param {(findbarWindow: BrowserWindow) => void} windowHandler - Window handler function.
+     * @returns {void}
      */
     setWindowHandler(windowHandler) {
         this.#windowHandler = windowHandler
     }
 
     /**
-     * Set a bounds handler to calculate the findbar bounds when the parent resizes.
-     * @param {{parentBounds: Rectangle, findbarBounds: Rectangle} => Rectangle} boundsHandler Bounds handler.
+     * Set a bounds handler to calculate the findbar bounds when the parent window resizes. If width and/or height are not provided, the current value will be used.
+     * @param {(parentBounds: Rectangle, findbarBounds: Rectangle) => Rectangle} boundsHandler - Bounds handler function.
+     * @returns {void}
      */
     setBoundsHandler(boundsHandler) {
-        this.#positionHandler = boundsHandler
+        this.#boundsHandler = boundsHandler
+    }
+
+    /**
+     * @param {Electron.FindInPageOptions} options 
+     */
+    #findInContent(options) {
+        options.matchCase = this.#matchCase
+        this.#findableContents.findInPage(this.#lastText, options)
+    }
+
+    #stopFindInContent() {
+        this.#findableContents.stopFindInPage('clearSelection')
     }
 
     /**
@@ -185,25 +253,35 @@ class Findbar {
     #registerListeners() {
         const showCascade = () => this.#window.isVisible() || this.#window.show()
         const hideCascade = () => this.#window.isVisible() && this.#window.hide()
-        const positionHandler = () => {
-            const pos = this.#positionHandler(this.#parent.getBounds(), this.#window.getBounds())
-            this.#window.setPosition(pos.x, pos.y)
+        const boundsHandler = () => {
+            const currentBounds = this.#window.getBounds()
+            const newBounds = this.#boundsHandler(this.#parent.getBounds(), currentBounds)
+            if (!newBounds.width) { newBounds.width = currentBounds.width }
+            if (!newBounds.height) { newBounds.height = currentBounds.height }
+            this.#window.setBounds(newBounds, false)
         }
         
-        this.#parent.prependListener('show', showCascade)
-        this.#parent.prependListener('hide', hideCascade)
-        this.#parent.prependListener('resize', positionHandler)
-        this.#parent.prependListener('move', positionHandler)
+        if (this.#parent && !this.#parent.isDestroyed()) {
+            boundsHandler()
+            this.#parent.prependListener('show', showCascade)
+            this.#parent.prependListener('hide', hideCascade)
+            this.#parent.prependListener('resize', boundsHandler)
+            this.#parent.prependListener('move', boundsHandler)
+        }
 
         this.#window.once('close', () => {
-            this.#parent.off('show', showCascade)
-            this.#parent.off('hide', hideCascade)
-            this.#parent.off('resize', positionHandler)
-            this.#parent.off('move', positionHandler)
+            if (this.#parent && !this.#parent.isDestroyed()) {
+                this.#parent.off('show', showCascade)
+                this.#parent.off('hide', hideCascade)
+                this.#parent.off('resize', boundsHandler)
+                this.#parent.off('move', boundsHandler)
+            }
             this.#window = null
             this.stopFind()
         })
 
+        this.#window.prependOnceListener('ready-to-show', () => { this.#window.show() })
+
         this.#findableContents.prependOnceListener('destroyed', () => { this.close() })
         this.#findableContents.prependListener('found-in-page', (_e, result) => { this.#sendMatchesCount(result.activeMatchOrdinal, result.matches) })
     }
@@ -259,6 +337,7 @@ class Findbar {
         options.movable = options.movable ?? false
         options.acceptFirstMouse = options.acceptFirstMouse ?? true
         options.parent = parent
+        options.show = false
         options.frame = false
         options.roundedCorners = true
         options.transparent = process.platform === 'linux'
@@ -266,19 +345,60 @@ class Findbar {
         options.minimizable = false
         options.skipTaskbar = true
         options.fullscreenable = false
+        options.autoHideMenuBar = true
         if (!options.webPreferences) { options.webPreferences = {} }
-        options.webPreferences.nodeIntegration = true
-        options.webPreferences.contextIsolation = false
+        options.webPreferences.nodeIntegration = false
+        options.webPreferences.contextIsolation = true
+        options.webPreferences.preload = options.webPreferences.preload ?? `${__dirname}/web/preload.js`
         return options
     }
+
+    /**
+     * Get the findbar instance for a given BrowserWindow or WebContents. 
+     * If no findbar instance exists, it will return a new one linked to the web contents.
+     * 
+     * @overload
+     * @param {BrowserWindow} browserWindow Parent window.
+     * @param {WebContents} [customWebContents] Custom findable web contents. If not provided, the web contents of the BrowserWindow will be used.
+     * @returns {Findbar} The findbar instance if it exists.
+     * 
+     * @overload
+     * @param {WebContents} webContents Findable web contents. The parent window will be undefined.
+     * @returns {Findbar} The findbar instance if it exists.
+     * @throws {Error} If no webContents is provided.
+     * 
+     * @overload
+     * @param {BaseWindow} baseWindow Parent window.
+     * @param {WebContents} webContents Findable web contents.
+     * @returns {Findbar} The findbar instance if it exists.
+     * @throws {Error} If no webContents is provided.
+     */
+     static from(windowOrWebContents, customWebContents) {
+        let webContents = isFindable(windowOrWebContents) ?
+            windowOrWebContents : customWebContents ?? windowOrWebContents.webContents
+
+        return webContents._findbar || new Findbar(windowOrWebContents, customWebContents)
+    }
+
+    /**
+     * Get the findbar instance for a given BrowserWindow or WebContents. 
+     * @param {BrowserWindow | WebContents} windowOrWebContents
+     * @returns {Findbar | undefined} The findbar instance if it exists, otherwise undefined.
+     */
+    static fromIfExists(windowOrWebContents) {
+        return (isFindable(windowOrWebContents) ? windowOrWebContents : windowOrWebContents.webContents)._findbar
+    }
 }
 
+const isFindable = (obj) => obj && typeof obj.findInPage === 'function' && typeof obj.stopFindInPage === 'function';
+
 /**
  * Define IPC events.
  */
 (ipc => {
-    ipc.handle('electron-findbar/last-text', e => e.sender._findbar.getLastText())
+    ipc.handle('electron-findbar/last-state', e => e.sender._findbar.getLastState())
     ipc.on('electron-findbar/input-change', (e, text, skip) => e.sender._findbar.startFind(text, skip))
+    ipc.on('electron-findbar/match-case', (e, status, skip) => e.sender._findbar.matchCase(status, skip))
     ipc.on('electron-findbar/previous', e => e.sender._findbar.findPrevious())
     ipc.on('electron-findbar/next', e => e.sender._findbar.findNext())
     ipc.on('electron-findbar/open', e => e.sender._findbar.open())

package/package.json

@@ -1,8 +1,14 @@
 {
   "name": "electron-findbar",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "Chrome-like findbar for your Electron app.",
   "main": "index.js",
+  "files": [
+    "index.js",
+    "remote.js",
+    "LICENSE",
+    "web/**"
+  ],
   "scripts": {
     "sample": "electron test/sample.js"
   },

package/remote.js

@@ -3,19 +3,41 @@
  */
 const Remote = (ipc => ({
     /**
-     * Get last queried text.
-     * @returns {string}
+     * Get last queried text and the "match case" status.
+     * @returns {Promise<{ text: string, matchCase: boolean, movable: boolean }>}
      */
-    getLastText: async () => ipc.invoke('electron-findbar/last-text'),
+    getLastState: async () => ipc.invoke('electron-findbar/last-state'),
 
     /**
      * Change the input value and find it.
-     * @param {string} text 
+     * @param {string} text - The text to search for
      */
     inputChange: (text) => { ipc.send('electron-findbar/input-change', text) },
+    
+    /**
+     * Toggle case sensitive search
+     * @param {boolean} value - Whether to match case or not
+     */
+    matchCase: (value) => { ipc.send('electron-findbar/match-case', value) },
+    
+    /**
+     * Navigate to the previous match
+     */
     previous: () => { ipc.send('electron-findbar/previous') },
+    
+    /**
+     * Navigate to the next match
+     */
     next: () => { ipc.send('electron-findbar/next') },
+    
+    /**
+     * Open the findbar
+     */
     open: () => { ipc.send('electron-findbar/open') },
+    
+    /**
+     * Close the findbar
+     */
     close: () => { ipc.send('electron-findbar/close') },
 })) (require('electron').ipcRenderer)
 

package/web/app.css

@@ -11,28 +11,37 @@ body {
 
 nav {
     --bg-color: #fff;
-    --border: #eee;
+    --border: #ddd;
     --color: #626262;
-    --input-color: #1f1f1f;
+    --input-color: #111;
     --btn-hover-color: #ccc;
     --btn-active-color: #bbb;
     --font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
     --font-size: .75rem;
-    --spacing: .75rem;
+    --spacing: .5rem;
 }
 
 @media (prefers-color-scheme: dark) {
     nav {
         --bg-color: #1f1f1f;
-        --border: #2f2f2f;
+        --border: #3f3f3f;
         --color: #a9a9aa;
-        --input-color: #e3e3e3;
+        --input-color: #eee;
         --btn-hover-color: #333;
         --btn-active-color: #444;
     }
 }
 
-svg {
+#match-case {
+    fill: var(--color);
+    user-select: none;
+}
+
+#match-case > svg {
+    width: 20px;
+}
+
+#previous, #next, #close {
     fill: none;
     stroke: var(--color);
     stroke-width: 2;
@@ -48,14 +57,15 @@ nav {
     padding: var(--spacing);
     background-color: var(--bg-color);
     color: var(--color);
+}
+
+.linux nav {
     border-radius: 10px;
     border: 1px solid var(--border);
-    -webkit-app-region: drag;
 }
 
-nav > *:not(:last-child),
-.btn-group > *:not(:last-child) {
-    margin-right: var(--spacing);
+nav, .btn-group {
+    gap: var(--spacing);
 }
 
 span, input {
@@ -64,6 +74,7 @@ span, input {
 }
 
 span {
+    color: var(--input-color);
     user-select: none;
 }
 
@@ -74,7 +85,6 @@ input {
     font-weight: 500;
     border: none;
     outline: none;
-    -webkit-app-region: no-drag;
 }
 
 .divider {
@@ -87,26 +97,45 @@ input {
     display: flex;
 }
 
-.btn-group > div {
+button {
+    background-color: transparent;
+    border: none;
     border-radius: 50%;
     cursor: default;
     width: 26px;
     height: 26px;
     padding: 3px;
     text-align: center;
-    transition: .1s linear all;
-    -webkit-app-region: no-drag;
+    transition: .2s linear all;
 }
 
-.btn-group > div:hover {
+button:hover {
     background-color: var(--btn-hover-color);
 }
 
-.btn-group > div:active {
+button:active {
     background-color: var(--btn-active-color);
 }
 
-.btn-group > .disabled {
+button:focus {
+    outline: none;
+}
+
+button.disabled {
     opacity: .4;
+}
+
+#previous.disabled, #next.disabled {
     background-color: transparent !important;
+}
+
+.movable nav {
+    -webkit-app-region: drag;
+    app-region: drag;
+}
+
+input, button {
+    -webkit-app-region: no-drag;
+    app-region: no-drag;
+    
 }

package/web/findbar.html

@@ -4,34 +4,40 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Findbar</title>
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self'; style-src 'self'; default-src 'self'; connect-src 'none'; frame-src 'none'; object-src 'none'; font-src 'self'; img-src 'self'">
+    <title>Find in page</title>
     <link rel="stylesheet" href="app.css">
-<body>
+<body class="movable">
     <nav>
-        <input id='input' oninput="inputChange(event)" type="text" spellcheck="false">
+        <input id="input" type="text" spellcheck="false">
         <span id="matches"></span>
+        <button id="match-case" class="disabled" title="Match case">
+            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke="none">
+                <text x="4" y="15" font-size="14" font-family="monospace" font-weight="bold">A</text>
+                <text x="12" y="19" font-size="14" font-family="monospace">a</text>
+            </svg>
+        </button>
         <div class="divider"></div>
         <div class="btn-group">
-            <div onclick="move(false)" class="disabled">
+            
+            <button id="previous" class="disabled" title="Previous">
                 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                     <path d="M7 15L12 10L17 15"/>
                 </svg>
-            </div>
-            <div onclick="move(true)" class="disabled">
+            </button>
+            <button id="next" class="disabled" title="Next">
                 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                     <path d="M7 10L12 15L17 10"/>
                 </svg>
-            </div>
-            <div onclick="$remote.close()">
+            </button>
+            <button id="close" title="Close">
                 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                     <path d="M7 17.5L12 12.5L17 17.5"/>
                     <path d="M7 7.5L12 12.5L17 7.5"/>
                 </svg>
-            </div>
+            </button>
         </div>
     </nav>
-    
-    <script src="app.js"></script>
 </body>
 
 </html>

package/web/preload.js

@@ -0,0 +1,82 @@
+const $remote = (ipc => ({
+    getLastState: async () => ipc.invoke('electron-findbar/last-state'),
+    inputChange: (value) => { ipc.send('electron-findbar/input-change', value, true) },
+    matchCase: (value) => { ipc.send('electron-findbar/match-case', value, true) },
+    previous: () => { ipc.send('electron-findbar/previous') },
+    next: () => { ipc.send('electron-findbar/next') },
+    close: () => { ipc.send('electron-findbar/close') },
+    onMatchesChange: (listener) => { ipc.on('electron-findbar/matches', listener) },
+    onInputFocus: (listener) => { ipc.on('electron-findbar/input-focus', listener) },
+    onTextChange: (listener) => { ipc.on('electron-findbar/text-change', listener) },
+    onMatchCaseChange: (listener) => { ipc.on('electron-findbar/match-case-change', listener) }
+})) (require('electron').ipcRenderer)
+
+let canRequest = true, canMove = false
+
+function inputChange(e) {
+    canRequest = false
+    $remote.inputChange(e.target.value)
+}
+
+function matchCaseChange(btn) {
+    const newStatus = buttonIsDisabled(btn)
+    toggleButton(btn, newStatus)
+    $remote.matchCase(newStatus)
+}
+
+function move(next) {
+    if (canRequest && canMove) {
+        canRequest = false
+        next ? $remote.next() : $remote.previous()
+    }
+}
+
+function toggleButton(btn, status) {
+    btn.classList[status ? 'remove' : 'add']('disabled')
+}
+
+function buttonIsDisabled(btn) {
+    return btn.classList.contains('disabled')
+}
+
+document.addEventListener('DOMContentLoaded', async () => {
+    const inputEl = document.getElementById('input')
+    const matchCaseBtn = document.getElementById('match-case')
+    const previousBtn = document.getElementById('previous')
+    const nextBtn = document.getElementById('next')
+    const closeBtn = document.getElementById('close')
+    const matchesEl = document.getElementById('matches')
+    const moveBtns = [previousBtn, nextBtn]
+
+    matchCaseBtn.addEventListener('click', () => matchCaseChange(matchCaseBtn))
+    previousBtn.addEventListener('click', () => move(false))
+    nextBtn.addEventListener('click', () => move(true))
+    closeBtn.addEventListener('click', () => $remote.close())
+    inputEl.addEventListener('input', inputChange)
+
+    $remote.onTextChange((_, text) => { inputEl.value = text })
+
+    $remote.onInputFocus(() => {
+        inputEl.setSelectionRange(0, inputEl.value.length)
+        inputEl.focus()
+    })
+
+    $remote.onMatchCaseChange((_, status) => { console.log('Match case:', status);toggleButton(matchCaseBtn, status) })
+
+    $remote.onMatchesChange((_, m) => {
+        canRequest = true
+        matchesEl.innerText = inputEl.value ? m.active + '/' + m.total : ''
+        for (var moveBtn of moveBtns) { toggleButton(moveBtn, canMove = m.total > 1) }
+    })
+    
+    const lastState = await $remote.getLastState()
+    inputEl.value = lastState.text || ''
+    lastState.movable || document.body.classList.remove('movable')
+    if (process.platform === 'linux') {
+        document.body.classList.add('linux')
+    }
+    toggleButton(matchCaseBtn, lastState.matchCase)
+    $remote.inputChange(inputEl.value)
+    inputEl.setSelectionRange(0, inputEl.value.length)
+    inputEl.focus()
+})

package/.vscode/launch.json

@@ -1,17 +0,0 @@
-{
-    "version": "0.2.0",
-    "configurations": [
-      {
-        "name": "Debug Main Process",
-        "type": "node",
-        "request": "launch",
-        "cwd": "${workspaceFolder}",
-        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
-        "windows": {
-          "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
-        },
-        "args" : ["test/sample.js"],
-        "outputCapture": "std"
-      }
-    ]
-}

package/test/sample.html

@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Sample</title>
-</head>
-<body>
-    <input type="text" oninput="$remote.inputChange(event.target.value)">
-    <button onclick="$remote.open()">Open</button>
-    <button onclick="$remote.previous()">Previous</button>
-    <button onclick="$remote.next()">Next</button>
-    <button onclick="$remote.close()">Close</button>
-    <br>
-    <span>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat massa et suscipit tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam dictum massa id sapien tristique, in venenatis neque sollicitudin. Fusce accumsan augue arcu, sed rhoncus libero pretium vitae. Phasellus sed imperdiet ante. Maecenas ultrices, elit vitae aliquet tincidunt, elit enim maximus libero, id lacinia ex enim consequat justo. Sed sodales tristique augue sed maximus. Integer tincidunt mi ac arcu tempus, sed accumsan lorem bibendum. Sed in dictum nibh. Pellentesque posuere dui pulvinar sodales scelerisque. Ut nisi magna, vulputate ornare bibendum pharetra, accumsan sed tortor. Proin rhoncus interdum tincidunt. Suspendisse diam eros, ultrices eu volutpat in, vestibulum quis nunc.
-
-Sed sit amet dapibus eros. Quisque porttitor mi a nisl pretium molestie. Praesent tellus dui, vehicula a ex sed, faucibus congue mauris. Cras dictum, sapien tempus consequat luctus, dolor magna vestibulum risus, nec blandit diam nulla eget est. Curabitur vitae posuere dolor, accumsan vulputate felis. Cras eget iaculis ante. Nulla velit felis, aliquet vitae convallis nec, vehicula et nunc. Fusce dapibus vel eros non viverra. Fusce elit arcu, tempus eu enim in, rutrum mattis justo.
-
-Cras justo tellus, imperdiet et felis sed, iaculis varius lacus. Pellentesque posuere feugiat nisl, eu vulputate tortor. Proin volutpat tortor erat, feugiat pretium justo aliquam non. Maecenas nec neque ultricies diam rhoncus ullamcorper a vitae mauris. Integer ultricies euismod leo, nec facilisis diam volutpat et. Nulla eleifend ante egestas, imperdiet elit at, malesuada velit. Donec tincidunt eleifend libero. Integer congue pharetra scelerisque. In egestas lacus erat. Quisque aliquam massa lectus, eu semper massa ornare auctor. Cras sit amet auctor sem. Curabitur vitae tellus eu risus ultrices accumsan. Curabitur egestas eu lorem et efficitur. Sed nec turpis felis.
-
-Suspendisse vel euismod ante. Nunc sagittis quam ut gravida pulvinar. Sed at semper nisl, eu porttitor ante. Cras vitae dolor massa. Fusce tincidunt turpis at egestas pharetra. Donec vitae vestibulum ante. Cras erat dolor, finibus vitae auctor vel, varius dictum arcu. Nam porta arcu consectetur, posuere tellus at, laoreet metus. Ut faucibus tincidunt mi placerat fermentum.
-
-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 = require('../remote')
-    </script>
-</body>
-</html>

package/test/sample.js

@@ -1,43 +0,0 @@
-const { BrowserWindow, app, Menu, MenuItem } = require('electron')
-const Findbar = require('../index')
-
-app.whenReady().then(() => {  
-  const window = setupWindow()
-  const findbar = setupFindbar(window)
-  setupApplicationMenu(findbar)
-})
-
-function setupWindow() {
-  const window = new BrowserWindow({
-    webPreferences: {
-      nodeIntegration: true,
-      contextIsolation: false
-    }
-  })
-  window.loadFile(`${__dirname}/sample.html`)
-  return window
-}
-
-function setupFindbar(window) {
-  const findbar = new Findbar(window)
-  findbar.setWindowOptions({ movable: true, resizable: true })
-  findbar.setWindowHandler(win => { /* handle the findbar window */ })
-  return findbar
-}
-
-function setupApplicationMenu(findbar) {
-  const appMenu = Menu.getApplicationMenu()
-  appMenu.append(new MenuItem({ label: 'Findbar', submenu: [
-    { label: 'Open', click: () => findbar.open(), accelerator: 'CommandOrControl+F' },
-    { label: 'Close', click: () => findbar.isOpen() && findbar.close(), accelerator: 'Esc' },
-    { role: 'toggleDevTools', accelerator: 'CommandOrControl+Shift+I' },
-    { label: 'Test input propagation', click: () => {
-      let count = 0
-      setInterval(() => {
-        findbar.startFind('count: ' + count++)
-        findbar.startFind('cannot show this', true)
-      }, 1000)
-    }}
-  ]}))
-  Menu.setApplicationMenu(appMenu)
-}

package/web/app.js

@@ -1,53 +0,0 @@
-const $remote = (ipc => ({
-    getLastText: async () => ipc.invoke('electron-findbar/last-text'),
-    inputChange: (value) => { ipc.send('electron-findbar/input-change', value, true) },
-    previous: () => { ipc.send('electron-findbar/previous') },
-    next: () => { ipc.send('electron-findbar/next') },
-    close: () => { ipc.send('electron-findbar/close') },
-    onMatchesChange: (listener) => { ipc.on('electron-findbar/matches', listener) },
-    onInputFocus: (listener) => { ipc.on('electron-findbar/input-focus', listener) },
-    onTextChange: (listener) => { ipc.on('electron-findbar/text-change', listener) }
-})) (require('electron').ipcRenderer)
-
-let canRequest = true, canMove = false
-
-function inputChange(e) {
-    canRequest = false
-    $remote.inputChange(e.target.value)
-}
-
-function move(next) {
-    if (canRequest && canMove) {
-        canRequest = false
-        next ? $remote.next() : $remote.previous()
-    }
-}
-
-document.addEventListener('DOMContentLoaded', async () => {
-    const inputEl = document.getElementById('input')
-    const matchesEl = document.getElementById('matches')
-    const moveBtns = [...document.getElementsByClassName('disabled')]
-
-    $remote.onMatchesChange((_, m) => {
-        canRequest = true
-        matchesEl.innerText = inputEl.value ? m.active + '/' + m.total : ''
-
-        for (var moveBtn of moveBtns) {
-            (canMove = m.total > 1) ? 
-                moveBtn.classList.remove('disabled') :
-                moveBtn.classList.add('disabled')
-        }
-    })
-
-    $remote.onInputFocus(() => {
-        inputEl.setSelectionRange(0, inputEl.value.length)
-        inputEl.focus()
-    })
-
-    $remote.onTextChange((_, text) => { inputEl.value = text })
-
-    inputEl.value = await $remote.getLastText()
-    $remote.inputChange(inputEl.value)
-    inputEl.setSelectionRange(0, inputEl.value.length)
-    inputEl.focus()
-})