A "New Way" to Pay Creators

#showdev #webdev #chrome #extension

A challenge content creators often face online is monetizing their content. Imagine a way to specify the preferred donation info without hefty fees and without annoying the site's visitors.

Introducing PayCreators: a Chrome Extension to facilitate the donation process. No more intrusive banners or pop-ups —just seamless contributions.

How It Works

...for people making donations

People wanting to make donations need to install the Chrome extension and then surf the web as they normally do. If the website's owner (the creator) has specified a donation method, then the extension icon will change from a silver coin:

To a hand with a golden coin.

After clicking the icon, a menu will appear presenting the different donation options. Once they pick one, they'll be redirected immediately. That's it! No mystery or anything complicated.

For example, I have specified three donation methods on my website: Patreon, Paypal, and Venmo. As shown in the following image.

...for content creators

Content creators require a little bit more work... but not much. They don't need to install the extension (unless they want to donate too) but they need to add a new meta tag in their pages' head:

<meta property="creator-payments" content="payments.json">

This meta tag links a file with the accepted donation methods. The file will be in JSON format, with a single object and the donation endpoints: the key is the donation method, and the value is the username.

{
  "buy-me-a-coffee": "alvaromontoro",
  "crowdfundly": "alvaromontoro",
  "ko-fi": "alvaromontoro",
  "patreon": "alvaromontoro",
  "paypal": "alvaromontoro",
  "tipeee": "comicss",
  "venmo": "Alvaro-Montoro"
}

And that's it! There's no need to sign in or share passwords or API keys. The extension will use your username to create links to the payment user pages. You never withhold control or need to grant any access.

Development Process

The extension is open source under the MIT license. You can find the code on this GitHub repository, and contribute with ideas and code.

From the start, I knew it would be a small-ish project. I had developed Chrome extensions in the past to accelerate some work tasks, and this time it would be something more public. I wanted to try the concept and learn about publishing in the Chrome Web Store.

I started with the basic skeleton for an extension:

the manifest.json, with the extension metadata;
an images folder with the extension icon;
a popup folder with three files (popup.html, popup.js, and popup.css) containing all the popup logic and styling;
and a scripts folder with the script to run on load.

From there, I would start building and scaling up. Maybe not in the best order, but in one that made it easy to progress and see the updates live on the browser.

I changed the manifest.json file so the extension would run on every page, independently of its URL. Then, I added some code searching for the meta tag and its value in the script. If it existed, I'd update the extension icon to notify in a non-invasive way that the creator accepted donations.

This is where I found my first challenge: I couldn't update the icon without a service worker, and even then, the icon changed for all the tabs and not exclusively for the active tab. Some research online, and questions on Stack Overflow yielded a solution.

Let's say that even for a small extension, I had to learn some new things about how they work and how to use more "complex" structures. It was a fun and interesting challenge for a weekend or two.

Once I was done, I reckoned the code could be prettier so I used AI to evaluate the code and obtain recommendations. I performed most of the things it suggested (mainly error handling, and some refactoring and modularization). And when I was happy with the result, I submitted the extension to the Chrome Web Store.

I had read online that it could take weeks to get the approval. Maybe because this is such a small extension, they approved it in 3-5 days. Even an upgrade I did later (the original icons were not great) took only 2-3 days for approval. It was a great experience overall.

Moving Forward

I'm realistic. This extension is more of a proof-of-concept. I like the idea and think it has potential, but without adoption —not only from creators and donors but from the community in general—, it's just that: a nice idea.

It may not be a successful project, but it made me learn and practice new things. And that counts as a success in my book.

I still want to continue developing it: adding more payment/donation options, and styling it more nicely —It's small, yet, it looks too basic. Time will tell.

Try the extension, check the code, and let me know your thoughts. I'm open to feedback, (constructive) criticism, and suggestions.

Top comments (6)

Khang • Sep 3

Honest feedback: Your solution sounds ideal for creators, but I doubt any readers/visitors will be willing to deal with the hassle of installing a new extension just for the sake of giving someone money.

Unless your extension is baked into the browser natively, that'd be another story.