🔄 简体中文

Starting Point

Starting about 3 years ago, I have been using the Arc browser as my main browser. Even when Arc later made it clear that there would be no more feature updates and only kernel security updates, I persisted in using it for a long time, intermittently trying Dia during this period (which didn’t impress me as much as Arc). Until Atlassian announced the acquisition of The Browser Company, I planned to completely abandon using Arc and Dia, and after going around in circles, I returned to Chrome.

However, there was always a problem that gave me a headache: Chrome couldn’t copy URLs via keyboard shortcuts. I was especially used to using Arc’s cmd+shift+C to copy URLs, and after switching to Chrome, I would open Chrome Developer Tools at least a dozen times daily when I wanted to copy URLs.

I was well aware that there must be browser extensions that had already solved this problem, but after trying several, they were either ugly, clunky, or hard to use. It’s also possible that I just wanted to write one myself, so I quickly developed Arclet Copier v0.1.0 using Claude Code - one-click copying of the current webpage’s URL, supporting configurable shortcuts, and cleaning URL tracking parameters by default.

During this process, I felt a strong joy of creation, as well as Claude Code’s intelligence, so I began designing more features:

• Copy Markdown format
• Integrate URL shortening services
• Generate QR codes, copy QR codes
• URL cleaning mode switching, custom cleaning parameters
• Custom copy format templates
• Batch copying
• More…

I began treating Arclet Copier like a formal product, continuously improving features, polishing UI/UX, listing it on app stores, and promoting it. Now Arclet Copier has been developed to v1.6.7, most of the features I designed have been launched, and I can finally write this article to record this development journey.

Features I Love

Copy Reliability

The success rate of copying URLs is Arclet Copier’s most core metric. Initially, I used the most common solution - Content Script Injection, injecting a JavaScript script into the webpage DOM to get the webpage URL and copy it to the user’s clipboard. Most extensions I had tried used this approach, but this has a huge problem: when the webpage DOM is not ready, or on browser system pages, the script cannot be successfully injected, causing URL copying to fail.

I wanted to achieve a near-native copying effect, where users should be able to successfully copy URLs using Arclet Copier on any page. This problem stumped Claude Code and me for a long time. Eventually, I had Claude Code search Chrome’s latest APIs and extensively search web content to understand possible solutions. Finally, we discovered the Offscreen Document API, which is a new API introduced in Chrome Manifest V3, specifically designed for performing operations that require a DOM environment in the background.

The traditional Content Script approach relies on the webpage’s DOM environment, which leads to three main problems:

1. DOM readiness issues: When the webpage DOM is not ready, scripts cannot be successfully injected;
2. CSP restrictions: Many websites’ Content Security Policy blocks external script execution;
3. System page limitations: Scripts cannot be injected on browser system pages like chrome:// or edge://.

The Offscreen Document API works by:

// Create a hidden document in the background service worker
await chrome.offscreen.createDocument({
  url: 'offscreen/offscreen.html',
  reasons: ['CLIPBOARD'],
  justification: 'Copy text to clipboard'
});

// Send content to the offscreen document via message passing
chrome.runtime.sendMessage({
  action: 'copy',
  text: urlToCopy
});

This hidden document has complete DOM environment and clipboard access permissions, but is not restricted by webpage CSP because it runs in the extension’s independent context. This way, regardless of what page the user is on, Arclet Copier can stably complete copy operations.

URL Parameter Cleaning

I designed three cleaning modes:

• Off: Keep all parameters, suitable for technical scenarios
• Smart: Only remove tracking parameters, keep functional parameters
• Aggressive: Remove all parameters, pursuing the cleanest URL

Furthermore, I also allow users to customize parameter rules. You can mark a parameter as a “tracking parameter” or “functional parameter,” and the system will remember your preferences.

Custom Copy Templates

Initially, only URL and Markdown format copying was provided, but users’ copying needs are very diverse:

• Some want [title](URL) Markdown format
• Some want title - URL plain text format
• Some want archived format with timestamps
• Others want various strange custom formats

So I implemented a template engine that supports some common variables, allowing users to create their own templates, such as:

{{title}} 👉 {{url}}

Arc-style Toast

Since I really love the Arc browser (obviously reflected in the name Arclet), some UI designs in Arclet Copier reference Arc, wanting to achieve that Arc-like quality, though obviously I didn’t achieve it. I really want to learn UI design.

Initially, I synchronized URL copy results through Chrome system notifications. For multi-screen users, this notification was very annoying - users copy webpages on screen A, but notifications appear from screen B (because screen B is the main screen). So I used content script injection again to inject an Arc-style notification toast in the top-right corner of the current webpage. I really love this little toast.

But this approach is still limited by whether the webpage DOM is ready and cannot display on some special pages (like browser built-in pages). I haven’t found a perfect solution yet, so I have to bear with it for now. 😭

From Personal Tool to Product

Initially, Arclet Copier was just a small tool to solve my own pain points, but during development, I gradually treated it as a formal product to polish:

• Internationalization
• Theme system
• Performance optimization

To ensure code quality, I also introduced (though this was done quite late in development, early stages mainly focused on piling up features):

• Vitest testing framework: unit test coverage for core modules
• ESLint code standards: maintaining consistent code style
• esbuild build tool: fast packaging and development experience

Claude Code Collaboration Insights

Over 99% of Arclet Copier’s code was written by Claude Code, mainly using Claude and GLM models. The entire project development has consumed about 500 million tokens so far, which really isn’t cheap. I’ve also practiced several suggestions I can share:

• Keep single conversation topics focused: Avoid developing completely unrelated different features in one context environment, which will interfere with AI. But you can open multiple conversations to develop different features simultaneously.
• Use \init command to create CLAUDE.md: After completing a development phase or feature design, have AI consolidate documentation into the project. This CLAUDE.md will serve as project documentation in subsequent conversations, helping AI quickly understand project architecture.
• Make good use of web search: For complex problems or issues that can’t be solved after multiple attempts, directly have AI proactively conduct web searches. For example, the Offscreen API was found by searching the latest Chrome documentation.
• Analyze first, then act: Have AI analyze problems first and provide solutions for your confirmation, then have AI proceed with development. This can avoid taking detours.
• Break down large tasks into TODOs: For large tasks, you can have AI create a TODO List for your confirmation, then have AI develop while updating the TODO List until all tasks are completed.
• Maintain code review awareness: Although AI-written code is usually good most of the time, you should still review it, especially critical parts involving security and performance. You can start another conversation to have AI review it.

Additionally:

• Using Custom Model Services in Claude Code
• Using Claude Code Router to Manage Custom Models in Claude Code

Arclet Copier has been listed on Chrome Web Store and Edge Add-ons, completely free. For more information, visit the official website.

Welcome to download and use it. For any bug reports or feature suggestions, please contact me through GitHub Issues or email. If you find it useful, feel free to give the project a Star ⭐️ or leave a five-star review on the app store. ❤️