The goal
This boilerplate extension provides developers with a starting point for creating their own Chrome extensions using Manifest V3.
What's new
The biggest improvement in this version is the addition of a popup interface. Now, when users click the extension button in the browser's top bar, they're presented with an interactive popup instead of just logging a message to the console.
Features
This boilerplate demonstrates three key extension behaviors:
- Before page load: Print a message to DevTools console before the page loads.
- After page load: Print a message to DevTools console before the page loads.
- Popup interaction: Displays a popup when the user clicks the extension button, allowing for more complex user interactions.
The extension now provides a button within the popup that, when clicked, injects a script into the active tab to modify the DOM and log a message to the console.
Installation
- Clone or download the files from github.com/llagerlof/fresh-chrome-extension and place them in a directory.
- Open your browser's extension page: chrome://extensions
- Enable "Developer mode" in the top right corner.
- Click
Load Unpacked
and select the extension directory.
How to test it
- Open any website.
- Click the extension button on the browser's top bar. You'll see a popup with a button.
- Click the button in the popup labeled "Click this button to add an orange div to the page".
- Observe the following changes:
- An orange div appears at the top of the page with the message "DOM modified!"
- Open the developer tools (F12) and look at the console. You'll see the message "Action executed from popup!"
This boilerplate provides a solid foundation for building more complex Chrome extensions. Feel free to modify and extend it to suit your specific needs.
Happy coding!
Top comments (0)