Make wasteof.plus work better for selecting and creating elements

[mybearworld]

Wasteof.money uses TailwindCSS. This is a great developer experience, but leads to some problems for browser extensions. Here's how selecting/creating currently works:

1. You use querySelector to select a bunch of styling classes.
2. You use parentElement and similar to get the specific element you need.
3. You createElement a div/span/whatever which you also give a ton of Tailwind classes.
4. You add that to the previously selected element.

This approach has a couple of issues.

• If wasteof ever gets an element that looks similar (e.g. has similar classes), you'll select that too.
• If the styling of this element ever changes, you won't be able to select it.
• If the styling of this element ever changes, your created element will be out of place.
• Your created element will probably not simulate the actual element too well.
• If you use a template HTML file, the DOMParser might reject the invalid HTML wasteof.plus uses.

The first two can be solved by adding class names like plus-profile-picture to certain elements - this would mean that addons could select .plus-profile-picture instead of .h-8.inline-block.bg-white.dark:border-gray-700.rounded-full.border-2. This would of course still be selected with styling, but now, if the profile picture styles change, we can change every addon's way of getting the profile picture in one place.

The next three can be solved by creating a JavaScript API. This means that instead of manually creating a post via lots of document.createElements, .classList.adds and .addEventListeners, we could just call plus.createPost("showerthoughtsbot", "6495dda1d989fb6e2791573f", ...). This means, that, again, if the styling changes, it can be changed in all addon in one place, the necessary classes in the solution above could be automatically added, and the correct JS would automatically inserted.

Of course, this would be quite a process to do properly, but once done, would probably improve addons for wasteof.plus a lot. The API I used as an example here probably isn't the best one, so that would be a factor too.

[imadeanaccount1]

@mybearworld I think this is a much-needed improvement. Over time, as lots of addons build up, I was definitely thinking that a central API that allows all of them to access certain properties would be necessary!

[mybearworld]

Something that could also be part of a plus API is an actual way of accessing wasteof.money. This gets especially useful when thinking about Typescript/type safety (e.g. type validation).