Upgrade Browser Extension for promoted/burnsteem Posts

Introduction

Some time ago, @remlaps introduced an improved version of its browser extension. This marks posts in colour that either contain a beneficiary to @null or that have been promoted with a transfer to @null.

Especially the second possibility has been in the focus for some time. It was therefore interesting for me to find out how many users have promoted a post and whether it was also promoted by the author himself.
Since @remlaps has released his browser extension for further development, it made sense to upgrade it for this purpose ;-)

Solutions

In order to find out which user has promoted which post, the first step is to retrieve the transfers to @null.

Steemchiller has the right query for this with his SDS. I am currently analysing the last 250 transfers to @null. I think that should be enough for now. Then the data are prepared so that they can be accessed quickly with the post identifier.

It was more difficult to get to the post identifier on the Steemit page. @remlaps loops through all li elements. But the identifier is not contained in a list element. Here I had to loop through to the matching parent element. Obviously there is no method to retrieve all parent elements of an element.

At first I had considered displaying the number directly in the post card on the page. I then decided to display the data in the elements used by @remlaps in the payout pane after all.

I add the following data to the elements with the entry in each post:

• Number of different users who have promoted the post,
• "self" if the author himself has promoted the post.

Example

^{The last row contains the extended data.}

Modifications

I have tried to change as few as possible the original code.

• I had to modify the determination of promoAmount because there are now more characters after „Promotion cost“.
• I have declared the essential new functions outside the highLight function. Thus, a call in the corresponding else if branch is sufficient for the new functionality.
• An essential change is the time of the first call of the highLight function. I have inserted this into the then branch of fetch to provide for the asynchronous process. Otherwise, the promotedPosts would still be undefined when called for the first time.
• In the manifest.json a major change was necessary: I had to enter a permission for the request, so that the script is allowed to load data from another server.
• Finally… I also raised the version to "0.0.2". :-)

That was it!

Otherwise, I'm with @remlaps: Feel free to modify the extension. I would be happy to receive further ideas and implementations.

You find the code below.

German

Einführung

Vor einiger Zeit hat @remlaps seine Browser Extension. Damit werden Posts farblich markiert, die entweder eine Beneficiary an @null enthalten, oder für die mit einem Transfer an @null geworben wurde.

Besonders die zweite Möglichkeit rückt seit einiger Zeit wieder vermehrt in den Focus. Für mich war es daher interessant, zu erfahren, wie viele User haben einen Beitrag beworben und ob dieser auch vom Autor selbst beworben wurde. Da @remlaps seine Browser Extension zur weiteren Entwicklung freigegeben hat, lag es nahe, sie für diesen Zweck aufzubohren ;-)

Lösungen

Um herauszufinden, welcher User für welchen Post geworben hat, müssen als erstes die Transfers an @null ermittelt werden.

Steemchiller hat mit seinem SDS hierfür die passende Anfrage. Aktuell werte ich die letzten 250 Transfers an @null aus. Ich denke, das sollte aktuell genügen. Danach werden die Daten aufbereitet, so dass ein schneller Zugriff mit dem Post-Identifier erfolgen kann.

Schwieriger war es, an den Post-Identifier auf der Steemit-Seite zu gelangen. @remlaps durchläuft ja alles li-Elemente. Der Identifier ist aber nicht in einem Listenelement enthalten. Hier musste ich die eine Schleife bis zum passenden Eltern-Element einbauen. Offensichtlich gibt es keine Methode, alle Elternelemente eines Elements abzurufen.

Zunächst hatte ich überlegt, die Anzahl direkt in der Post-Card auf der Seite anzeigen zu lassen. Ich habe mich dann doch dafür entschieden, die Daten in den von @remlaps verwendeten Elemente in der Payout-Pane anzuzeigen.

Ich ergänze die Elemente mit dem Eintrag „Promotion Cost“ in jedem Post mit folgenden Daten:

• Anzahl der verschiedenen User, die den Beitrag promoted haben,
• „self“, wenn der Author selbst den Beitrag promoted hat.

Beispiel

^{Die letzten Zeile enthält die ergänzten Daten.}

Änderungen

Ich habe versucht, so wenig wie möglich am ursprünglichen Code zu ändern.

• Anpassen musste ich die Ermittlung von promoAmount, da jetzt hinter „Promotion Cost“ weitere Zeichen stehen.
• Die wesentlichen neuen Funktionen habe ich außerhalb der highLight-Funktion deklariert. Somit genügt ein Aufruf im entsprechenden else if-Zweig für die neue Funktionalität.
• Eine wesentliche Änderung ist der Zeitpunkt des erstmaligen Aufrufs der highLight-Funktion. Diese habe ich in den then-Zweig von fetch eingefügt, um den asyncronen Ablauf zu ermöglichen. Ansonsten wären beim ersten Aufruf die promotedPosts noch undefiniert.
• In der manifest.json war eine wesentliche Änderungen notwendig: Ich musste eine Permission für die Request eintragen, damit das Script Daten von einem anderen Server laden darf.
• Außerdem habe ich die Versionsnummer auf „0.0.2“ angehoben :-)

Das war's schon!

Ich halte es ansonsten wie @remlaps: Wer Lust und Laune hat, darf die Erweiterung gern weiterbearbeiten. Ich würde mich auf weitere Idee und Umsetzungen freuen.

Instructions:

Chrome-based Browser (Chrome/Brave/Edge)
Thanks to @michelangelo3 for the description and screenshots

1. Create a new folder somewhere on the hard disk.
2. Create a file "manifest.json" and a file "main.js" and save the content below with a text editor there.
3. Open the page with the extensions:
   
4. Switch on developer mode
5. Click on Load unpacked and select the folder you just created.

Done!

Installationsanleitung:

Auf Chrome basierende Browser (Chrome/Brave/Edge)
Dank an @michelangelo3 für die Beschreibung und Screenshots

1. Einen neuen Ordner irgendwo der Festplatte erstellen.
2. Eine Datei „manifest.json“ und eine Datei „main.js“ anlegen und den unten angegebenen Inhalt mit einem Texteditor dort speichern.
3. Die Seite mit den Erweiterungen öffnen:
   
4. Entwicklermodus einschalten
5. Auf Entpackte Erweiterung laden klicken und den eben neu erstellten Ordner auswählen.

Fertig!

Update (19.08.2022):

The main.js has been updated:
function prepareData: lines 96 - 98: else branch added.

Update (22.08.2022):

Intructions for Chrome added

---

Here is the code:

manifest.json:

{
  "manifest_version":2,
  "version":"0.0.2",
  "name":"Steem Curation Extension",
  "content_scripts":[
    {
      "matches":["https://steemit.com/*"],
      "js":["main.js"]
    }
  ],
  "permissions": [
    "https://sds.steemworld.org/*"
  ]
}

main.js:

console.log("The extension is up and running");
var promotedPosts = {}; // contains all transactions for promoted posts with accounts, count and whether self promoted
const urlRequest = "https://sds.steemworld.org/transfers_api/getTransfersByTypeTo/transfer/null/time/DESC/250/0";

const highLight = () => {

    var curatorBackgroundColor;
    const listItem = document.querySelectorAll('li');

    for (let i=listItem.length-1; i>=0; i--) {
        if ( listItem[i].textContent.match('null: .*%' ) && listItem[i].textContent.match('Promotion Cost .*\$') ) {
            console.log("Found a /promoted post in #burnsteem25 (outer block)");
            curatorBackgroundColor = '#1E90FF';
            listItem[i].style['background-color'] = curatorBackgroundColor;
        } else if ( listItem[i].textContent.match('null: .*%' )) {
            console.log("#burnsteem25 outer match: ");
            if ( listItem[i].textContent.match('^null:.*\%') ) {
                console.log("Found #burnsteem25");
                var str = listItem[i].textContent;
                var nullPct = str.substring(
                    str.indexOf(" ") + 1,
                    str.lastIndexOf("%")
                );
                if ( nullPct > 0 && nullPct < 25 ) {
                    curatorBackgroundColor = "coral";
                } else if ( nullPct < 50 ) {
                    curatorBackgroundColor = "orange";
                } else if ( nullPct < 75 ) {
                    curatorBackgroundColor = "darkorange";
                } else if ( nullPct > 0 ) {
                    curatorBackgroundColor = "orangered";
                }
            }       
            listItem[i].style['background-color'] = curatorBackgroundColor;
        } else if ( listItem[i].textContent.match('Promotion Cost .*\$') ) {
            console.log("Found a /promoted post (outer block)");

            if ( listItem[i].textContent.match('^Promotion Cost .*\$$') ) {
                console.log("Found a /promoted post");
                var str = listItem[i].textContent;
                var indexEnd = (str.indexOf("(") >= 0) ? str.indexOf("(") - 1 : str.length;
                var promoAmount = str.substring(
                    str.indexOf("$") + 1,
                    indexEnd
                );
                console.log ("Promotion amount: " + promoAmount);

                if ( promoAmount > 0 && promoAmount < 0.26 ) {
                    curatorBackgroundColor = "paleturquoise";
                } else if ( promoAmount < 0.51 ) {
                    curatorBackgroundColor = "aquamarine";
                } else if ( promoAmount < 1.01 ) {
                    curatorBackgroundColor = "turquoise";
                } else if ( promoAmount > 0 ) {
                    curatorBackgroundColor = "lightseagreen";
                }

                // now edit the textContent
                addText(listItem[i]);
            }
            listItem[i].style['background-color'] = curatorBackgroundColor;
        } else {
            listItem[i].style['background-color'] = "initial";
        }
    }
}

// load transfers to null and prepare promotedPosts for further use
fetch (urlRequest).then (function (response) {
    return response.json();
}).then (function (data) {
    prepareData(data);
    // execute hihgLight after providing the data
    highLight();
}).catch (function (error) {
    console.log ("error: " + error);
});

function prepareData(data) {
    if (data) {
        const cols = data.result.cols;
        const rows = data.result.rows;
        rows.forEach(trf => {
            let trfData = getAuthorPost(trf[cols["memo"]]);
            if (trfData) {
                let from = trf[cols["from"]];
                let self = (from == trfData["author"])
                let props = {"user": [from], "count": 1, "self": self};
                let key = trfData["post"];
                if (promotedPosts && key in promotedPosts) {
                    let oldProps = promotedPosts[key];
                    if ( !(oldProps["user"].includes(from)) ) {
                        props["user"] = props["user"].concat(oldProps["user"]);
                        props["count"] += oldProps["count"];
                        props["self"] = props["self"] || oldProps["self"];
                    } else {
                        props = oldProps;
                    }
                }
                promotedPosts[key] = props;
            }
        }); 
    };
}

function getAuthorPost(memoStr) {
    // const re = /^@(?<author>[\w-.]+)[\/](?<permlink>[\w-\|]+)$/;
    // const objMatch = memoStr.match(re);
    const objMatch = regexMatch(true, memoStr);
    let result = (objMatch && objMatch.length == 3) ? {
        "post": objMatch.groups["author"] + "/" + objMatch.groups["permlink"],
        "author": objMatch.groups["author"]
        } : null ;
    return result;
}

function addText(listItem) {
    var added = false;
    // console.log("include User? " + listItem.textContent.includes('User'));
    if ( !listItem.textContent.includes('User') ) {
    // get the postid
        let address = getAddress(listItem);
        // console.log("Address: " + address);
        if ( address !== null ) {
            let key = getPost(address);
            // console.log("Key: " + key);
            // console.log("Promoted: " + promotedPosts[key]);
            if ( promotedPosts[key] ) {
                let newText = ' (by ' + 
                    promotedPosts[key]["count"] + 
                    ( promotedPosts[key]["count"] == 1 ? ' User' : ' Users' ) + 
                    ( promotedPosts[key]["self"] ? ' incl. self)' : ')' );
                let newTextNode = document.createTextNode(newText);
                listItem.firstChild.appendChild(newTextNode);
                added = true
            }
        }        
    }
    if ( added ) {
        console.log("User added");
    } else {
        console.log("Adding User went wrong");
    }
}

function getPost(address) {
    const objMatch = regexMatch(false, address);
    return (objMatch && objMatch.length == 3) ? objMatch.groups["author"] + "/" + objMatch.groups["permlink"] : null;
}

function regexMatch(fromBegin, textStr) {
    re = fromBegin ? /^@(?<author>[\w-.]+)[\/](?<permlink>[\w-\|]+)$/ : /@(?<author>[\w-.]+)[\/](?<permlink>[\w-\|]+)$/;
    return textStr.match(re);
}

function getAddress(elem) {
    var link;
    while ( elem.parentElement && elem.parentElement.nodeName.toLowerCase() != 'body' ) {
        elem = elem.parentElement;
        if ( elem.nodeName.toLowerCase() == 'div' && elem.className.includes('articles__content-block--text') ) {
            let titleElemList = elem.getElementsByClassName('entry-title');
            link = titleElemList[0].firstChild.href;
            break;
        }
    }
    return link ? link : null;
}

// highLight();
window.addEventListener('scroll', () => {
    highLight();
});
window.addEventListener('load', () => {
    highLight();
});

console.log("The extension is done.");

Deutsch Unplugged

auf https://moecki.online/hive-146118

Steemit Dev Group

auf https://moecki.online/hive-192037

^{Banner with kind permission of chriddi}