Chrome Extension Boilerplate with Popup Interaction (Manifest V3)

This content originally appeared on DEV Community and was authored by Lawrence Lagerlof

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:

1. Before page load: Print a message to DevTools console before the page loads.
2. After page load: Print a message to DevTools console before the page loads.
3. 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

1. Clone or download the files from github.com/llagerlof/fresh-chrome-extension and place them in a directory.
2. Open your browser's extension page: chrome://extensions
3. Enable "Developer mode" in the top right corner.
4. Click Load Unpacked and select the extension directory.

How to test it

1. Open any website.
2. Click the extension button on the browser's top bar. You'll see a popup with a button.
3. Click the button in the popup labeled "Click this button to add an orange div to the page".
4. 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!

This content originally appeared on DEV Community and was authored by Lawrence Lagerlof

Print Share Comment Cite Upload Translate Updates

APA

Lawrence Lagerlof | Sciencx (2024-09-04T19:20:18+00:00) Chrome Extension Boilerplate with Popup Interaction (Manifest V3). Retrieved from https://www.scien.cx/2024/09/04/chrome-extension-boilerplate-with-popup-interaction-manifest-v3/

MLA

" » Chrome Extension Boilerplate with Popup Interaction (Manifest V3)." Lawrence Lagerlof | Sciencx - Wednesday September 4, 2024, https://www.scien.cx/2024/09/04/chrome-extension-boilerplate-with-popup-interaction-manifest-v3/

HARVARD

Lawrence Lagerlof | Sciencx Wednesday September 4, 2024 » Chrome Extension Boilerplate with Popup Interaction (Manifest V3)., viewed ,<https://www.scien.cx/2024/09/04/chrome-extension-boilerplate-with-popup-interaction-manifest-v3/>

VANCOUVER

Lawrence Lagerlof | Sciencx - » Chrome Extension Boilerplate with Popup Interaction (Manifest V3). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/04/chrome-extension-boilerplate-with-popup-interaction-manifest-v3/

CHICAGO

" » Chrome Extension Boilerplate with Popup Interaction (Manifest V3)." Lawrence Lagerlof | Sciencx - Accessed . https://www.scien.cx/2024/09/04/chrome-extension-boilerplate-with-popup-interaction-manifest-v3/

IEEE

" » Chrome Extension Boilerplate with Popup Interaction (Manifest V3)." Lawrence Lagerlof | Sciencx [Online]. Available: https://www.scien.cx/2024/09/04/chrome-extension-boilerplate-with-popup-interaction-manifest-v3/. [Accessed: ]

rf:citation

» Chrome Extension Boilerplate with Popup Interaction (Manifest V3) | Lawrence Lagerlof | Sciencx | https://www.scien.cx/2024/09/04/chrome-extension-boilerplate-with-popup-interaction-manifest-v3/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.