Patreon Doesn’t Show Your Total Spending. So I Did.

patreon-doesn’t-show-your-total-spending-so-i-did.

I like supporting small creators on Patreon. A few euros here, a few bucks there — no problem. But one day, I looked at my Memberships page and thought:

“Wait… how much is this costing me per year?”

Patreon doesn’t tell you.
No total. No filters. No export. No API. It’s like they don’t want you to know.

Here’s a Challenge for You

Go to https://patreon.com/settings/memberships and check how much you’re spending yearly on creator support. Go ahead, I’ll wait.

Back? Was it easy?

If you only support a couple of people, maybe.
But if you’re like me — supporting multiple creators in different currencies and on different billing periods — it turns into a bit of a chore. Right?

Since I want a clear view of all my subscriptions (and Patreon doesn’t offer it), I had to build it myself.

This is Part 3 in My “Why Doesn’t This Site Show a Total?” Series.

id name follow code
1 Total cost of an Amazon wishlist article gist
2 Total time of a YouTube playlist article gist
3 Total cost of my Patreon memberships this one gist

Each one is a quick userscript using vanilla JavaScript and the User JavaScript and CSS browser extension. Drop the code in, refresh the page, and boom — feature unlocked.

What This One Does

  • Scans the Patreon Memberships page
  • Finds prices like $4.99 per month or €50 per year
  • Groups them by:
    • Currency (USD, EUR, etc.)
    • Billing cycle (monthly, yearly)
  • Adds everything up
  • Shows the result in a popup with:
    • Monthly and yearly breakdowns
    • A bold total per year, in green for dollars and blue for euros

How It Works

The script waits for the page to load fully, then:

  1. Injects a styled modal
  2. Hooks into the second

    on the page and makes it clickable

  3. When clicked, it scrapes all relevant elements
  4. Extracts price, frequency, and currency
  5. Totals everything and shows it in a popup

Before vs. After

Before After
Before screenshot After screenshot

So there’s my answer: 90.24 $ and 252 € per year going to creators I like and like supporting! – less than 1€ per day

Why This Script Exists

I like being generous — but I don’t like being blind.

If a big platform like Patreon hides something as basic as “how much am I spending?”, then I’ll just write it myself.

This script gave me back visibility. No tracking, no login, no API — just a plain overview.

No Plugin? No Problem

If you don’t like to install extensions (even if these are extremely useful) you still can use this script as such:

  • Open the browser dev tools → Console tab
  • Paste the full code and hit Enter
  • Totals will appear when you click the second

    on the page

Or turn it into a bookmarklet if you want a fun little challenge and another alternative to installing extensions.

Enjoy!
Vio, Out!

Total
0
Shares
Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post
how-we-built-zero-knowledge-encryption-in-the-browser-(so-we-can’t-read-your-notes)

How We Built Zero-Knowledge Encryption in the Browser (So We Can’t Read Your Notes)

Next Post
how-to-set-colors-and-backgrounds-in-css:-from-named-colors-to-gradients

How to Set Colors and Backgrounds in CSS: From Named Colors to Gradients

Related Posts
arkui-x平台差异化

ArkUI-X平台差异化

跨平台使用场景是一套ArkTS代码运行在多个终端设备上,如Android、iOS、OpenHarmony(含基于OpenHarmony发行的商业版,如HarmonyOS Next)。当不同平台业务逻辑不同,或使用了不支持跨平台的API,就需要根据平台不同进行一定代码差异化适配。当前仅支持在代码运行态进行差异化,接下来详细介绍场景及如何差异化适配。 使用场景 平台差异化适用于以下两种典型场景: 1.自身业务逻辑不同平台本来就有差异; 2.在OpenHarmony上调用了不支持跨平台的API,这就需要在OpenHarmony上仍然调用对应API,其他平台通过Bridge桥接机制进行差异化处理; 判断平台类型 可以通过let osName: string = deviceInfo.osFullName;获取对应OS名字,该接口已支持跨平台,不同平台上其返回值如下: OpenHarmony上,osName等于OpenHarmony-XXX Android上,osName等于Android XXX iOS上,osName等于iOS XXX 示例如下:…
Read More