코딩, 독서, 여행, 영화, 맛집

0%

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

작성일 Edited on In Views: Disqus:


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

1
2
3
4
5
6
7
8
9
10
...
  "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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
(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'>
              <!-- ... 코드가 너무 길어서 생략함 ... -->
            </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 중 하나라도 포함되어 있으면 도서로 분류됩니다.


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


모두 해피 코딩하세요~!