특정 그룹 멤버에게 헤더에 커스텀 HTML 표시

개발
3 
<div id="after-header">Stuff</div>

<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() => {
        let currentUser = api.getCurrentUser();
        var groups = currentUser.groups;
        const isInGroup1 = groups.some(g => g.name === 'group1');
        const isInGroup2 = groups.some(g => g.name === 'group2');
        const isInGroup3 = groups.some(g => g.name === 'group3');
        if (isInGroup1) { 
            $("#after-header").addClass("group1");
         }
        if (isInGroup2) { 
            $("#after-header").addClass("group2");
         }
        if (isInGroup3) { 
            $("#after-header").addClass("group3");
         }         
    });
</script>

.button-a,
.button-b {
    display: none;
}
#after-header.group1 .button-a {
    display: block
}
#after-header.group2 .button-b {
    display: block
}

다음처럼 교체하면 작동하는 것 같습니다.
api.onPageChange(() => {
을
$( document ).ready(function() {
으로 바꾸면 스크립트가 모든 페이지에서 로드되지 않지만, api.onPageChange(() => { 가 꼭 필요한 곳이 어디인지 확실히 알 수 없습니다.