크롬 확장 프로그램 개발하기

^{Design by @imrahelk}

---

안녕하세요. 안피곤입니다.

크롬 웹 스토어에는 해피베리보이(@happyberrysboy)님이 만드신 Steem Tools 앱이 있습니다. 제가 유용하게 잘 사용하고 있습니다. ㅋ

제가 여기에 기능을 추가하고 싶다는 의사를 전달하였습니다. 감격스럽게도 해피보이님께서 저를 일명 WS_TOOLS 앱의 커미터(Committer)로 채택해주셨습니다. 그래서 해피보이님과 협업으로 크롬 확장프로그램을 개발하고 있습니다. ㅋ

저는 크롬 확장 프로그램은 한번도 만들어 본적이 없습니다. 그래서 해피님의 도움과 구글 문서를 참고 하여 개발하였습니다.

참고: https://developer.chrome.com/extensions/content_scripts

*

manifest.json 파일에 content_scripts를 추가합니다. content_scripts를 사용하면 부모 페이지의 DOM에 접근할 수 있습니다.

manifest.json

...
  "content_scripts": [
    {
      "matches": ["https://steemit.com/*"], 
      "run_at": "document_idle",
      "js": ["jquery3.3.1.min.js", "content_script.js"],
      "css": ["content_style.css"]
    }
  ],
...

그리고 content_script.js 파일을 작성합니다. 이 파일에 카테고리 링크를 보여주는 HTML과 API 서버에서 글을 가져오는 로직을 구현합니다.

content_script.js

(async () => {
  const GetPostsQuery = `query 
    GetPosts($tags: [String!]!) {
      getPosts(
        tags: $tags
      ) {
        author
        permlink
        title
        author_reputation
        summary
        tags
        image
        created
        total_payout_value
        curator_payout_value
        pending_payout_value
        vote_count
        comment_count
      }
  }`;

  function getPosts(tags=["kr"], start=0, limit=10) {
    fetch(GRAPHQL_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
      },
      body: JSON.stringify({
        query: GetPostsQuery,
        variables: { tags, start, limit },
      })
    })
      .then(r => r.json())
      .then(({ data }) => {
        const posts = data.getPosts;
        const postsDom = posts.map(post => {
          return `<li>
            <div class='articles__summary'>
              (html comment removed:  ... 코드가 너무 길어서 생략함 ... )
            </div>
          </li>`
        });
        $("#posts_list > ul").html(postsDom);
      }); 
  }

  const cetegoryDom = $(`
  <div>
    <hr>
    <center>
    <a href="#" tags="">전체</a> |
    <a href="#" tags="kr-life, life">일상</a> |
    <a href="#" tags="kr-book, book, booksteem">도서</a> |
    <a href="#" tags="kr-game, game">게임</a> |
    <a href="#" tags="kr-dev, dev">코딩</a> |
    <a href="#" tags="kr-art, art">예술</a> |
    </center>
    <hr>
  </div>
  `);
  cetegoryDom.find('a').click(evt => {
    const tags = evt.target.getAttribute('tags').split(',')
    getPosts(tags);
  })
  $(".App__content").before(cetegoryDom);
})();

API 서버를 만드는 과정은 "Google App Engine + GraphQL으로 스팀잇 API 서버 만들기" 에서 소개하였습니다. 이 API 서버에서 각 분류에 해당하는 글을 가져옵니다. 데이터 가져오는 속도가 제 예상보다 빨랐습니다.

*

아래는 여기까지 작업한 화면입니다.

각 카테고리에 해당하는 링크를 클릭하면 관련 글을 몽땅 가져옵니다. 글의 분류는 글에 포함되어 있는 태그를 기준으로 분류하였습니다. 예를 들어 글의 태그에 #book, #kr-book, #booksteem 중 하나라도 포함되어 있으면 도서로 분류됩니다.

---

그리고 이걸 작업하고 나서 해피님께 최우수상을 받았습니다. 이 맛에 코딩하는 것 같습니다. ㅋ
참고로 상장은 원사마님이 디자인하였습니다.

모두 해피 코딩하세요~!

---

---

_{Sponsored ( Powered by dclick )}

---

^{Originally posted on 안피곤님의 블로그. Steem blog powered by ENGRAVE.}