Greasy Fork

Hi people, is anyone willing to help me for a code to show size on the listing page, but size is being shown when you click on the item, which opens new link. Here are the links:

Listing:
https://3dsky.org/3dmodels?types=free&types=om&query=cabinet&order=relevance
of course query should be everything (*)

Size of a model:
https://3dsky.org/3dmodels/show/tumba_tempo

why I'm asking for this code? because then we (users,visitors) doesn't need to open every item/3d model and check the size, because if its more than 50mb, it is not recommended to use in the file.

if this helps, i found it in the network tab of an item:
e.model.properties.size_kb

of course there are also:
e.model.properties.render
e.model.properties.platform
etc, but they are not needed in this situation

thank you in advance!

https://greasyfork.org/en/scripts/518897-3dsky-org-display-more-info

Try below.

// ==UserScript==
// @name         3dsky.org include model file size in model list
// @namespace    https://greasyfork.org/en/users/85671-jcunews
// @version      1.0.1
// @license      AGPL v3
// @author       jcunews
// @description  Include model file sizes in model list. In binary MB/KB (Kilo = 1024) unit.
// @match        https://3dsky.org/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

(new MutationObserver(recs => {
  recs.forEach(rec => {
    rec.addedNodes.forEach(node => {
      if (node.matches?.('app-model-card:not(:has(.model-size))')) {
        node.__ngContext__?.some?.((o, e, p) => {
          if (o = o?.model) {
            (e = document.createElement("DIV")).className = "model-size";
            e.style.cssText = 'font-size:90%;color:#44a';
            if ((p = (o.data_file_size / 1048576)) < 1) {
              e.textContent =  parseFloat((p * 1024).toFixed(2)) + "KB"
            } else e.textContent = parseFloat(p.toFixed(2)) + "MB";
            (p = node.querySelector('.model-info')).parentNode.insertBefore(e, p);
            p.style.margin = 0;
            return true
          }
        })
      }
    })
  })
})).observe(document, {childList: true, subtree: true})

Hi guys, both of your codes work, i guess it is only a preference that will people use. thank you to both of you @HKR & @jcunews