Recent content in Blog on aabidk.dev
Introduction This post assumes you are familiar with Laravel, Inertia and have a basic understanding of Docker. To follow along, you can create a new blank Laravel project with React. There are some complexities around file permissions, health checks, and volumes that we will address in this post. Note Reddit discussion around this post is available here . There were some suggestions, I’ve…
In the previous post , we explored the background scripts and the messaging in extensions, as well as using @webext-core/messaging for a robust and type-safe messaging system. In this part, we will use the same concepts to build the core functionality of our extension. Basic Commands We want to add actions to the extension such as opening a new tab, a new window as well as state based actions such…
In the previous post , we explored how to work with content scripts and build isolated UIs for our extension. In this post, we will learn how to work with background scripts as well as about the communication process between the content scripts and the background scripts. Background Scripts Background scripts enable us to listen to browser events (such as opening/closing tabs, bookmarking a page,…
In the previous post , we installed WXT, TailwindCSS and Shadcn and explored the project structure. In this post, we will explore how to work with content scripts and build isolated UIs for our extension as well as discuss some issues with UI and how to resolve them. We will build a Command Palette for quick browser actions, such as creating new tabs/windows, muting/unmuting tabs, and more over…
In the previous post , we discussed the basics of Web Extensions and the tools we will be using to build our extension. Out of the three mentioned frameworks, we will be using WXT . In this post, we will set up the project and install the necessary dependencies and get an overview of the project structure. Edit 2025/02/03 : The source code for the extension we will be building in this series is…
If you are already familiar with web extensions and want to jump directly to the implementation, you can skip this post and go to the next one Introduction Extensions have become an integral part of modern browsers. While web development has evolved vastly over the last few years, development of extensions has mostly remained the same. This multi-post series will explore the development of cross…