Peter Pal is a tiny Chrome extension that provides a command palette for effortless, user-friendly, keyboard-focused search on web pages. It allows quick search of elements by text and highlights them for improved visibility. The extension aims to streamline navigation and enhance productivity for users interacting with content-heavy web pages.
Note
This is work in progress and my first open-source project I built using AI tools. I am not a software developer. This is educational project helping me to learn how to build web apps. Expect bugs and mistakes in code 🐞
Note
I will appreciate your feedback. Feel free to submit your bug report of feature request. Click this link. I hope this repo will be helpful for other people.
Check out my YouTube channel for more info.
- 🎨 Command Palette Interface: An intuitive keyboard-driven interface using a command palette for efficient text-based searches.
- 🔍 Fuzzy Text Search: Super-fast fuzzy search capability that matches elements based on their textual content, even with partial or misspelled queries.
- ⌨️ Keyboard navigation: Ability to select search result items and navigate through results in the command palette using up/down arrow keys.
- 🎯 Automatic focus on element: Ability to scroll to view selected search results using the Enter key, so that users can quickly move through matches without using their mouse.
- 🌟 Dynamic Highlighting: After pressing Enter or Ctr+Enter selected element is instantly highlighted on the web page with dynamic visual effects, making it easier for users to spot the targeted elements amid a large number of fields and components.
- 🌓 Theme Toggle: Switch between light and dark themes for comfortable usage in different environments.
To work on Peter Pal, you'll need:
- Node.js (latest LTS version recommended)
- npm (comes with Node.js)
- Google Chrome browser
-
Clone the repository:
git clone https://github.com/your-username/peter-pal.git cd peter-pal -
Install dependencies:
npm install -
Build the extension:
- For production:
npm run build - For development:
npm run build:dev - To watch for changes during development:
npm run watch
- For production:
-
Load the extension in Chrome:
- Open Chrome and navigate to
chrome://extensions - Enable "Developer mode" in the top right corner
- Click "Load unpacked" and select the
distdirectory in your project folder
- Open Chrome and navigate to
-
Start developing!
Common recommendations for Chrome extension development:
- Always test your changes in an actual Chrome environment
- Use the Chrome Developer Tools for debugging
- Familiarize yourself with the Chrome Extension Documentation
- Keep security in mind and follow best practices for extension development
To install Peter Pal as an end user:
- Visit the Chrome Web Store (link to be provided once the extension is published)
- Click on "Add to Chrome"
- Confirm the installation when prompted
- The Peter Pal icon should now appear in your Chrome toolbar
Peter Pal is designed to be intuitive and keyboard-friendly. Here are the main keyboard shortcuts:
Alt+Shift+I: Toggle the command paletteAlt+Shift+T: Toggle between light and dark themes
To use Peter Pal:
- Press
Alt+Shift+Ito open the command palette - Start typing to search for elements on the page
- Use up/down arrow keys to navigate through search results
- Press
Ctr+Enterto focus on the selected element. This does not close palette - Press
Enterto focus on the selected element and close palette
For a more detailed guide on usage and features, please refer to our documentation (link to be added).
We welcome contributions to Peter Pal! If you'd like to contribute, please:
- Fork the repository
- Create a new branch for your feature or bug fix
- Make your changes
- Submit a pull request with a clear description of your changes
For more information on contributing, please see our contribution guidelines (link to be added).
This project is licensed under the Apache-2.0 license. See the LICENSE file for details.
