0%

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


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 중 하나라도 포함되어 있으면 도서로 분류됩니다.



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


모두 해피 코딩하세요~!


![](https://steemitimages.com/400x0/https://cdn.steemitimages.com/DQmQmWhMN6zNrLmKJRKhvSScEgWZmpb8zCeE2Gray1krbv6/BC054B6E-6F73-46D0-88E4-C88EB8167037.jpeg)

Sponsored ( Powered by dclick )

dclick-imagead


Originally posted on http://steemit.com