Thoughts, ideas, and tutorials on web development, design, and technology.
While adding Safari support to a browser extension, I ran into a strange problem — scrolling inside the popup felt sluggish, with zero inertia. It turned out to be one of four seemingly unrelated Safari popup bugs, all tracing back to the same root cause — the popup's native window auto-resizing based on content height.
After automating Safari extension publishing with GitHub Actions, I hit two signing failures that cost me real debugging time. Both produce error messages with almost no useful search results, so I'm documenting the symptoms, causes, and fixes here.
I've previously written two blog posts about Safari extensions covering how to get things working the first time. But as I've accumulated more Safari extensions, the manual release process for each one has become increasingly unbearable. Here's how I automated the entire build, sign, upload, and submit cycle with GitHub Actions.
In this final chapter of the series, we'll walk through the complete process of publishing a browser extension to the Chrome Web Store, from setting up a developer account to submitting for review.
In this chapter, we'll explore Popup UI, a dedicated panel for browser extensions that's completely isolated from web pages. We'll build a Markdown editor popup that lets users preview and edit content before copying.
In this chapter, we'll explore on-demand script injection, a technique that doesn't slow down websites and shows no security warnings when installed from the Chrome Web Store. We'll build an extension that copies webpage content as Markdown with a single click.
In this chapter, we'll explore how to store data and configuration options in browser extensions using the Storage API, and how to create an options page to let users customize extension settings.
In this chapter, we'll explore Background Scripts, a core component of browser extensions. We'll build an auto-sleep tabs extension to demonstrate how Background Scripts can access all extension APIs, remain globally unique, and communicate with other parts of the extension.
In this chapter, we'll demonstrate how to inject complex UI into web pages using React, Tailwind CSS, shadcn, and npm packages. We'll build a YouTube video screenshot extension that injects a button into the video player toolbar.
In this chapter, we'll rebuild our Chrome extension using WXT, a modern development framework built on Vite. WXT provides TypeScript support, hot reloading, cross-browser builds, and convention-over-configuration patterns that streamline extension development.
Have you ever been frustrated with a website's features? Through browser extensions, you can customize your browsing experience. This article introduces the basic concepts of browser extension development using a simple example that hides the AI Mode button on Google Search.
After developing an extension for Chrome, the natural next step is porting it to other browsers. Firefox is generally considered the first choice since both browsers use similar Browser Extension APIs. This should be straightforward, right?
Since the beginning of this year, I've started publishing Safari extensions to the App Store. As I don't use an iPhone, I only released Mac versions. This month, I began practicing cross-platform browser extension development—publishing the same extensions for all major desktop browsers (Chrome/Safari/Edge/Firefox) and all mobile browsers that support extensions (Kiwi/Edge/Safari/Firefox).
I've recently developed several applications that include both frontend and backend components. Starting with Next.js, then moving to SvelteKit, and finally to Tanstack Router, none have proven as reliable as the familiar Hono framework. While all web meta-frameworks are attempting to incorporate server-side functionality, none have done it particularly well. For instance, Cloudflare offers numerous official services, and as a server-side framework, Hono's integration is excellent, but the same cannot be said for web meta-frameworks.
I switched to an M2 MacBook, and as a long-term Windows user, I have encountered many problems and confusion up to this point. Some have been resolved, while others currently remain unsolved. I'm recording and sharing them here.
While implementing the Chrome extension Mass Block Twitter, I needed to block Twitter spam users in bulk. Twitter's request headers contain authentication information that appears to be dynamically generated via JavaScript. Rather than investigating how Twitter generates these authentication details
Recently, I've been using Cloudflare D1 as the server database and chose Prisma as the ORM, which is recommended by many people. However, I encountered several issues during use, including
I initially noticed a Reddit post from someone seeking a Firefox extension that could extract ZIP files. Curious about this need, I discovered the author was using a restricted computer environment that prevented installation of local programs. This prompted me to examine existing online decompression tools, only to find that the top five online extraction tools failed to fully support
Recently, I've been working on server-side projects using Cloudflare Workers with D1 database. During this process, I encountered several database-related challenges. Since databases are quite unfamiliar territory for frontend developers, I decided to document my experiences.
I recently attempted to convert a Chrome extension to Safari—something I had postponed due to Xcode's poor development experience. This article documents the conversion process for Redirector, which is already available on Chrome/Firefox/Edge, into my first Safari extension on the App Store.
Svelte5 was released in October last year, touted as the best version of Svelte to date. The team was particularly proud of "runes," a reactive state system built on proxies. However, after experiencing Vue3's Composition API and SolidJS signals, I didn't feel particularly excited.
No posts found matching your search.