Cloudflare Magic Linker: Chrome Extension Project
Tags: chromeextension, cloudflare, cloudflaremagiclinke, chromewebstore
Published: 2023-12-31 06:21:30

---
title: Cloudflare Magic Linker: Chrome Extension Project
published: true
date: 2023-12-30 23:43:42 UTC
tags: ChromeExtension,Cloudflare,CloudflareMagicLinke,ChromeWebstore
canonical_url: https://crtv.dev/cloudflare-magic-linker-chrome-extension-project/
---

 ![Cloudflare Magic Linker: Chrome Extension Project](https://images.unsplash.com/photo-1515165562839-978bbcf18277?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDV8fHRyYWlufGVufDB8fHx8MTcwMzk3NjU2NHww&ixlib=rb-4.0.3&q=80&w=2000)

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](https://crtv.dev/how-to-add-users-to-a-cloudflare-account/#:~:text=As%20a%20prerequisite%2C%20let%27s%20take%20a%20quick%20moment%20to%20look%20at%20three%20different%20Cloudflare%20terms%20that%20will%20be%20important%3A%20Zones%2C%20Profiles%2C%20and%20Accounts.).

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](https://discord.gg/cloudflaredev?ref=crtv.dev).

## Building the Extension

I've built several extensions before (mostly for removing ads on random sites and other random customizations that [Arc](https://arc.net/?ref=crtv.dev) 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](https://github.com/mackenly/cloudflare-magic-linker/blob/main/manifest.json?ref=crtv.dev), a small bit of [HTML](https://github.com/mackenly/cloudflare-magic-linker/blob/main/src/popup.html?ref=crtv.dev)+ [CSS](https://github.com/mackenly/cloudflare-magic-linker/blob/main/src/styles/popup.css?ref=crtv.dev), and straightforward [JavaScript](https://github.com/mackenly/cloudflare-magic-linker/blob/main/src/scripts/popup.js?ref=crtv.dev).

```
{
    "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.

![Cloudflare Magic Linker: Chrome Extension Project](https://crtv.dev/content/images/2023/12/image.png)
_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](https://discord.com/channels/595317990191398933/1190097743167893524?ref=crtv.dev) asking for feedback where several community members quickly added helpful comments and suggestions. A big shoutout to [James](https://github.com/Cherry?ref=crtv.dev), [Chaika](https://github.com/Tyler-OBrien?ref=crtv.dev), and [Erisa](https://github.com/Erisa?ref=crtv.dev) 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](https://chromewebstore.google.com/detail/fongdcpejhfehpdcahcjncgfhkepoico?ref=crtv.dev) like a normal Chrome extension or load it unpacked from the source using developer mode by [cloning the repository](https://github.com/mackenly/cloudflare-magic-linker?ref=crtv.dev) to your local machine. The source code is licensed under the [GPL-3.0 license](https://github.com/mackenly/cloudflare-magic-linker/blob/main/LICENSE?ref=crtv.dev) 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.

![Cloudflare Magic Linker: Chrome Extension Project](https://github.com/mackenly/cloudflare-magic-linker/blob/main/src/images/cloudflare-magic-linker-screenshot.png?raw=true)
_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](https://github.com/mackenly/cloudflare-magic-linker?ref=crtv.dev), and subscribed to my blog. In addition, you can [sponsor me on GitHub](https://github.com/sponsors/mackenly/?ref=crtv.dev), or get in touch about career opportunities on [my personal site](https://mackenly.com/?ref=crtv.dev). Thank you for reading this far, and happy coding! 🔥