Browser extensions are powerful tools that can enhance user productivity and provide custom functionality. In this tutorial, we’ll walk through creating your first browser extension that works across Chrome, Firefox, and Edge.
\n\nBefore we begin, make sure you have:
\n\nCreate a new folder for your extension:
\n\nmkdir my-first-extension\ncd my-first-extension\nEvery browser extension starts with a manifest.json file that describes your extension:
{\n \"manifest_version\": 3,\n \"name\": \"My First Extension\",\n \"version\": \"1.0.0\",\n \"description\": \"A simple extension tutorial\",\n \"permissions\": [\"activeTab\"],\n \"action\": {\n \"default_popup\": \"popup.html\",\n \"default_icon\": {\n \"16\": \"icons/icon16.png\",\n \"48\": \"icons/icon48.png\",\n \"128\": \"icons/icon128.png\"\n }\n }\n}\nCreate a popup.html file:
<!DOCTYPE html>\n<html>\n <head>\n <style>\n body {\n width: 300px;\n padding: 20px;\n font-family: Arial, sans-serif;\n }\n button {\n background: #007cba;\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: 5px;\n cursor: pointer;\n }\n </style>\n </head>\n <body>\n <h2>CodEnity Extension</h2>\n <p>Welcome to your first browser extension!</p>\n <button id=\"clickButton\">Click Me!</button>\n <script src=\"popup.js\"></script>\n </body>\n</html>\nCreate popup.js:
document.addEventListener(\"DOMContentLoaded\", function () {\n const button = document.getElementById(\"clickButton\");\n\n button.addEventListener(\"click\", function () {\n // Get current tab\n chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {\n // Send message to content script\n chrome.tabs.sendMessage(tabs[0].id, {\n action: \"highlight\",\n message: \"Hello from CodEnity Extension!\",\n });\n });\n });\n});\nTo make your extension work across browsers, use the WebExtension API standard:
\n\n{\n \"browser_specific_settings\": {\n \"gecko\": {\n \"id\": \"your-extension@codenity.com\",\n \"strict_min_version\": \"91.0\"\n }\n }\n}\nEdge uses the same Manifest V3 format as Chrome, making porting straightforward.
\n\nchrome://extensions/, enable Developer mode, click “Load unpacked”about:debugging, click “This Firefox”, click “Load Temporary Add-on”edge://extensions/, enable Developer mode, click “Load unpacked”Once your extension is ready:
\n\nIn our next tutorial, we’ll cover:
\n\nFound this tutorial helpful? Check out our other development guides and don’t forget to subscribe to our YouTube channel for video tutorials!
\n", "summary": "Learn how to create powerful browser extensions from scratch with our step-by-step tutorial covering all major browsers.", "date_published": "2026-02-02T10:00:00+00:00", "date_modified": "2026-02-02T10:00:00+00:00", "authors": [ { "name": "CodEnity Team" } ], "image": "https://codenity-dev.github.io/assets/images/blog/browser-extension-guide.jpg", "tags": [ "tutorial","browser-extensions" ,"javascript","chrome","firefox","development" ], "language": "en-US" }, { "id": "https://codenity-dev.github.io/2026/01/28/researcher-extension-major-update/", "url": "https://codenity-dev.github.io/2026/01/28/researcher-extension-major-update/", "title": "The Researcher Extension: New Features & Updates", "content_html": "We’re excited to announce a major update to The Researcher extension! This release brings powerful new features designed to supercharge your research workflow across Chrome, Firefox, and Edge browsers.
\n\nBased on your feedback, we’ve added:
\n\n// New shortcut commands\nCtrl+Shift+R - Quick research mode\nCtrl+Shift+N - Create new note\nCtrl+Shift+S - Save current session\nWe’ve improved compatibility across all major browsers:
\n\n| Feature | \nChrome | \nFirefox | \nEdge | \n
|---|---|---|---|
| Core Functionality | \n✅ | \n✅ | \n✅ | \n
| AI Suggestions | \n✅ | \n✅ | \n✅ | \n
| Export Options | \n✅ | \n✅ | \n✅ | \n
| Sync Support | \n✅ | \n✅ | \n✅ | \n
Get The Researcher extension from your browser’s official store:
\n\nThe update will be automatically pushed to all users over the next 24-48 hours. You can also manually check for updates in your browser’s extension settings.
\n\n# Research Session Template\n\n## Objective: [Your research goal]\n\n## Sources: [Primary sources list]\n\n## Key Findings: [Main discoveries]\n\n## Next Steps: [Action items]\n\n## References: [Citations and links]\nWe’re actively working on:
\n\nThis release addresses several user-reported issues:
\n\nOur testing shows significant improvements:
\n\nWe love hearing from our users! Share your thoughts:
\n\nCheck out our latest video showcasing the new features:
\n\nVideo tutorial coming soon on our YouTube channel!
\n\nReady to supercharge your research? Download The Researcher extension today and experience the power of intelligent research assistance!
\n\nStay tuned for more updates and don’t forget to subscribe to our newsletter for the latest CodEnity news.
\n", "summary": "The Researcher extension gets major upgrades including AI-powered search suggestions and enhanced note-taking capabilities.", "date_published": "2026-01-28T14:30:00+00:00", "date_modified": "2026-01-28T14:30:00+00:00", "authors": [ { "name": "CodEnity Team" } ], "image": "https://codenity-dev.github.io/assets/images/blog/researcher-update.jpg", "tags": [ "updates","releases" ,"the-researcher","chrome-extension","firefox","edge" ], "language": "en-US" }, { "id": "https://codenity-dev.github.io/2026/01/15/welcome-to-codenity-blog/", "url": "https://codenity-dev.github.io/2026/01/15/welcome-to-codenity-blog/", "title": "Introduction to CodEnity Blog - Welcome to Our Development Journey", "content_html": "Welcome to the official CodEnity Blog! We’re excited to launch this platform where we’ll share insights, tutorials, updates, and our development journey as we work to bridge the gap between code and craft.
\n\n\n\nCodEnity is a team passionate about creating tools that enhance the developer experience. From browser extensions that boost productivity to educational content that helps developers grow their skills, we’re committed to building solutions that matter to the coding community.
\n\nOur blog will cover a wide range of topics:
\n\nWe’re currently focused on several key projects:
\n\nWe believe in building in public and sharing our knowledge with the community. Here’s how you can connect with us:
\n\nIn the coming weeks, you can expect:
\n\nThis blog is for the developer community, and we want to create content that truly helps. If you have:
\n\nPlease don’t hesitate to reach out! We read every comment and email.
\n\nTo never miss an update:
\n\n/feed.xml/blog/Thank you for joining us on this journey. We’re excited to share what we’re building and learning, and we hope our content helps you on your own development path.
\n\nHappy coding! 🚀
\n\nThe CodEnity Team
\n\nP.S. This blog is built with Jekyll and hosted on GitHub Pages. We’ll be sharing the technical details of how we built this platform in an upcoming post. Stay tuned!
\n", "summary": "Welcome to the official CodEnity Blog! We’re excited to launch this platform where we’ll share insights, tutorials, updates, and our development journey as we work to bridge the gap between code and craft.\n\n", "date_published": "2026-01-15T10:00:00+00:00", "date_modified": "2026-01-15T10:00:00+00:00", "authors": [ { "name": "CodEnity Team" } ], "image": "https://codenity-dev.github.ioassets/images/blog/codenity-welcome-banner.jpg", "tags": [ "announcements" ,"welcome","blog-launch","codenity","development" ], "language": "en-US" } ] }