팁·9년 이상·3.9k·수정됨

OKKY 특정인 차단 부가기능 만들기(WebExtensions)

최근 특정인 차단을 어떻게 하는지에 관한 글이 있어서 만들어 봤습니다.
크롬은 기존 부가기능이 있는 것 같으니 해당 부가기능을 사용하시는 편이 나을 것 같습니다.

참고: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/What_are_WebExtensions

Firefox 부가기능 제작 시 기존에는 XUL 을 사용했지만 45 버전 이후의 FF 는 WebExtensions 를 사용해서 제작하는 것을 권장하는 것 같습니다.
약간의 수정으로 Chrome, Edge, Opera 에서도 동작이 가능하다고 하니 한 번 시도해 봤습니다.
오랜만에 JavaScript 를 하려니 어렵네요.
파폭과 크롬 두가지 구현이 약간 다르니 두 소스 같이 올리도록 하겠습니다.

1. 디렉토리 생성
- 부가기능 소스를 넣을 디렉토리를 생성 합니다.
예) okky_ban_firefox, okky_ban_chrome

2. manifest.json 작성

{
    "manifest_version": 2,
    "name": "OKKY 차단",
    "version": "1.0",

    "description": "OKKY 게시물, 댓글 차단",

    "content_scripts": [
        {
            "matches": ["*://okky.kr/articles/*", "*://okky.kr/article/*"],
            "js": ["remove_article_comment.js"]
        }
    ],

    "options_ui": {
        "page": "options.html"
    },

    "permissions": ["storage"]
}

이미지 추가가 귀찮으니 아이콘은 생략했습니다.

3. 설정 페이지 options.html 작성

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
    </head>

    <body>
        <form>
            <label>차단할 사용자 ID 목록(, 로 구분)<input type="text" id="ignore_ids"></label>
            <button type="submit">Save</button>
        </form>
        <script src="options.js"></script>
    </body>
</html>

튜토리얼에 나오는 소스를 약간 변경한 소스입니다.

4. 설정 options.js 작성
- Firefox 와 Chrome 이 로컬 스토리지 사용법이 달라서 한참 해맸습니다.
- Firefox

function saveOptions(e) {
    if (e.defaultPrevented) {
        return;
    }

    function onSave(result) {
        document.querySelector("#ignore_ids").value = result.ignore_ids;
    }

    function onError(error) {
        console.log(`Error: ${error}`);
    }

    var ignoreIds = document.querySelector("#ignore_ids").value;
    ignoreIds = ignoreIds.replace(/ /g, "");

    var setting = browser.storage.local.set({
        ignore_ids: ignoreIds
    });
    setting.then(onSave, onError);
}

function restoreOptions() {

    function onGot(result) {
        console.log(result, result.ignore_ids);
        document.querySelector("#ignore_ids").value = result.ignore_ids || "";
    }

    function onError(error) {
        console.log(`Error: ${error}`);
    }

    var getting = browser.storage.local.get("ignore_ids");
    getting.then(onGot, onError);
}

document.addEventListener("DOMContentLoaded", restoreOptions);
document.querySelector("form").addEventListener("submit", saveOptions);

- Chrome

function saveOptions(e) {
    if (e.defaultPrevented) {
        return;
    }

    var ignoreIds = document.querySelector("#ignore_ids").value;
    ignoreIds = ignoreIds.replace(/ /g, "");

    chrome.storage.local.set(
        {'ignore_ids': ignoreIds},
        function() {
            console.log("success");
        }
    );
}

function restoreOptions() {
    chrome.storage.local.get("ignore_ids", function(result) {
        document.querySelector("#ignore_ids").value = result.ignore_ids || "";
    });
}

document.addEventListener("DOMContentLoaded", restoreOptions);
document.querySelector("form").addEventListener("submit", saveOptions);

5. 실제 로직 구현 remove_article_comment.js
- Firefox
- onGot 에서 Array 여부를 확인하는 이유는 왠지 모르게 get("ignore_ids") 결과가 매치되는게 없어서 모든 값이 배열로 오는 경우가 있어 체크합니다.

function onError(error) {
    console.log(`Error: ${error}`);
}

function onGot(result) {
    var ignore_ids;
    if (result instanceof Array) {
        ignore_ids = result[0].ignore_ids;
    } else {
        ignore_ids = result.ignore_ids;
    }

    if (!ignore_ids) {
        return;
    }

    var idList = ignore_ids.split(",");
    if (1 > idList.length) {
        return;
    }

    var listGroup = document.getElementsByClassName("list-group")[0].getElementsByClassName("list-group-item");
    var i;
    for (i = listGroup.length - 1; i >= 0; i--) {
        var nicknames = listGroup[i].getElementsByClassName("nickname");
        if (0 < nicknames.length) {
            var href = nicknames[0].href;
            var userNum = href.substring(href.lastIndexOf("/") + 1);
            if (idList.indexOf(userNum) > -1) {
                listGroup[i].parentNode.removeChild(listGroup[i]);
            }
        }
    }
}

var getting = browser.storage.local.get("ignore_ids");
getting.then(onGot, onError);

- Chrome

function onGot(item) {
    var ignore_ids = item.ignore_ids;
    if (!ignore_ids) {
        return;
    }

    var idList = ignore_ids.split(",");
    if (1 > idList.length) {
        return;
    }

    var listGroup = document.getElementsByClassName("list-group")[0].getElementsByClassName("list-group-item");
    var i;
    for (i = listGroup.length - 1; i >= 0; i--) {
        var nicknames = listGroup[i].getElementsByClassName("nickname");
        if (0 < nicknames.length) {
            var href = nicknames[0].href;
            var userNum = href.substring(href.lastIndexOf("/") + 1);
            if (idList.indexOf(userNum) > -1) {
                listGroup[i].parentNode.removeChild(listGroup[i]);
            }
        }
    }

}

chrome.storage.local.get("ignore_ids", onGot);

개발 끝

등록 방법
- Firefox: 주소창에 about:debuggin 에서 "임시로 부가기능 불러오기" 로 해당 디렉토리의 manifest.json 을 불러오시면 브라우저를 끄기 전까지 사용 가능합니다.
정식으로 등록하시려면 AMO(https://addons.mozilla.org) 에서 xpi 파일로 signing 하시면 등록 가능합니다.
참고: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Publishing_your_WebExtension
- Chrome: chrome://extensions/ 에서 "개발자모드" 체크 후 "압축해제된 확장 프로그램 로드..." 로 디렉토리 불러오시면 됩니다.

사용방법
- Firefox는 about:addons 에서 Chrome은 chrome://extensions/ 에서 해당 부가기능 환경설정 들어가셔서 차단하려는 사용자 번호를 , 로 구분해서 입력하시면 됩니다.

#firefox 목록