Cloudflare Magic Linker: Chrome Extension Project

Beginning as a personal project, over Christmas, I decided to create a Chrome extension to make copying deep or magic links from the Cloudflare dashboard easier. In this post, I discuss the need for this tool, my process of building it, and how to install it yourself.

What Are "Magic" Links?

The Cloudflare dashboard supports several deep link variables (affectionately known as magic links by the community) to make sharing links into the dashboard easier. These links work by replacing various IDs found within the dashboard's URLs with variables that are intercepted by the deep linker. When a user visits a link like in the example found below, they're shown a selection screen to choose the Cloudflare account they would like to use, then directed to select the zone they'd like to use.

💡 Read all about Accounts vs. Zones vs. Profiles here.

After making both selections, they're redirected, in this case, to the Zaraz tools configuration page.

https://dash.cloudflare.com/?to=/:account/:zone/zaraz/tools-config/tools

...converts into...

https://dash.cloudflare.com/1234567890poiuytrewq/bogus.studio/zaraz/tools-config/tools

This feature of the dashboard is extremely useful for sharing links in blog posts like this, helping others in GitHub issues or forums, or sharing links with coworkers. But before now, the only way to create them was to manually replace the values or to use a bot within the Cloudflare Discord community.

Building the Extension

I've built several extensions before (mostly for removing ads on random sites and other random customizations that Arc could probably replace), but never have I published one of the Chrome Webstore. The process itself isn't hard; you mostly just have to pay $5 to create a developer account and fill out some paperwork saying you're not loading remote code and that you're not doing anything sketchy with user data.

Still, the documentation leaves much to be desired. The manifest v3 migration, which I have heard lots of rumors suggesting is designed to make tools like adblockers less effective, seems to have caused a bit of chaos as far as documentation goes. The documentation is there, but it's hard to tell what version it's for; I found several broken links within Google's own help docs, and the general process feels chaotic. Thankfully, the actual functionality of my extension is relatively basic, with a simple manifest, a small bit of HTML+ CSS, and straightforward JavaScript.

{
    "manifest_version": 3,
    "name": "Cloudflare Magic Linker",
    "version": "1.0.0",
    "description": "Create magic deep links for the Cloudflare dashboard.",
    "icons": {
        "128": "src/images/icon128.png"
    },
    "action": {
        "default_popup": "src/popup.html"
    },
    "host_permissions": [
        "https://dash.cloudflare.com/*",
        "https://one.dash.cloudflare.com/*"
    ]
}

I think the most challenging part was creating the extension's icon, but ChatGPT was able to come to the rescue and, on the first try, generated an icon that looked exactly as I wanted.

ChatGPT Generating Icon

Community Feedback and Collaboration

One of the most valuable parts of Cloudflare as a company is its community of users. After creating a quick MVP of the extension, I decided to make it public and ask the community for feedback and if anyone was aware of any more deep link variables that could be used (I don't think they're documented anywhere, at least publically). Within the community Discord, I created a post asking for feedback where several community members quickly added helpful comments and suggestions. A big shoutout to James, Chaika, and Erisa for bringing up the :pages-deployment variable and that Zero Trust supports :account.

Using the Extension

To try out the extension yourself, you can either install it from the Chrome Webstore like a normal Chrome extension or load it unpacked from the source using developer mode by cloning the repository to your local machine. The source code is licensed under the GPL-3.0 license and is open to issues and PRs.

Once installed, simply go to a page within the Cloudflare dashboard or Zero Trust dashboard, click on the extension, and copy the link. I would recommend testing the link first. At the time of writing, support for magic links in Zero Trust isn't complete, and some pages in the regular dashboard, like Workers, don't have full support for deep links. I hope to update the extension in the future, if wider support is added to the magic link system by the Cloudflare team.

Using the Extension to Copy and Link

If you've found this post or extension valuable, I'd love it if you gave it a star, and subscribed to my blog. In addition, you can sponsor me on GitHub, or get in touch about career opportunities on my personal site. Thank you for reading this far, and happy coding! 🔥