Chrome Extension - response를 보여주는 chrome extension 작성

2018. 11. 12. 16:36ㆍ개발/기타

운영팀에서 요청이 들어왔다.


CS 처리를 할 때에 SpreadSheet 테이블에서 값을 찾는 경우가 많은데 이 상황에서 시간이 많이 걸린다고, 간단한 툴을 제작해 줄 수 없냐는 요청이었다.


Chrome Extension이 적절할 것 같아서 찾아봤는데 마침, Chrome Extensions 개발자 모드를 사용하면 직접 만든 크롬 익스텐션 zip만 업로드해주면 사용에 아무런 제약이 없을 것 같아서, 채택하기로 했다.


내가 만든 Chrome Extensions은 테스트 서버에 만들어둔 모든 테이블 조회용 API를 호출하여 그 결과를 Extensions 팝업에 띄워주는 것이 전부이다.


기능이 단순하기에, Json, Html, Js 파일 1개씩 ( ThirdParty로 JQuery가 있지만 이건 내가 짠게 아니므로 넘어가자 )


먼저 manifest.json을 살펴보자.


{
"manifest_version": 2,
"name": "extension 이름",
"description": "기능 설명",
"version": "1.0",
"background" : {
"script" : ["/thirdParty/jquery-3.3.1.js"]
},

"commands" : {
"_execute_browser_action": {
"suggested_key": {
"default": "Ctrl+Q",
"mac": "MacCtrl+Q"
}
}
},

"content_scripts" :
[
{
"matches":["http://*/*", "https://*/*"],
"js":["/thirdParty/jquery-3.3.1.js", "popup.js"]
}
],

"browser_action": {
"default_icon": "extensions이 표시될 아이콘",
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"리퀘스트를 날릴 url"
]
}


인터넷을 찾아보면서, 주먹구구식으로 만든 manifest 파일이다.

name, description 같은 기초적인 것은 아마 말 그대로일 것이고,

commands는 크롬에서 해당 커맨드를 입력하면 extension를 클릭하지 않아도 바로 extension  popup이 나타난다.


content script랑 permissions 의 값들을 수정해서 request를 날릴 수 있었다.


다음은 popup.html. 

텍스트 박스 하나와 submit 버튼 하나가 전부이다.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="/thirdParty/jquery-3.3.1.js"></script>
<script src="popup.js"></script>
<title></title>
</head>
<body>
<input id="text" type="text">
<button id="button" type="button">Submit</button><br/>
<div id="output" style="width:400px;"></div>
</body>
</html>


마지막으로 popup.js. 사실상 내가 구현한 건 이부분이 전부이다. js 관련 지식이라고는 유니티에서 사용한 유사 js가 전부인 사람으로써는 이 단순한 코드를 짜는데도 시간이 좀 걸렸다.


document.addEventListener('DOMContentLoaded', function() {
document.getElementById("button").addEventListener('click', function() {
chrome.tabs.executeScript( {
file: "thirdParty/jquery-3.3.1.js"
}, function() {
$.post({
url: "request url address",
type : "post",
data : {
did: document.getElementById("text").value
},
success : function(data) {
var str = JSON.stringify(data, null, 2);
str = str.replace("{", "");
str = str.replace("}", "");
str = str.replace(/,/g, "<br/ >");
document.getElementById("output").innerHTML = str;
}
});
});
});

chrome.tabs.executeScript( {
code: 'window.getSelection().toString();'
}, function(selection) {
if (selection != null)
document.getElementById("text").value = selection[0];
});
});


정말 간단한 코드이다. 

버튼을 클릭하면, request를 날리고, 받은 response를 가공해서 popup에 띄워주는 것이 전부.



원래 목적은 텍스트를 더블클릭하여 highlighted 되면 바로 위 기능을 수행하는 (네이버 사전 extension처럼) extension을 만들고 싶었으나, highlighted에 대한 event가 어떻게 되어있는지도 찾기 힘들었고, 네이버 사전 extension을 사용하는 나로써는 필요없을 때에 request가 발동될 수도 있다는 생각을 하여 포기했다ㅠ.



웹페이지 관련 지식이 전무한 상태에서 어떻게든 돌아가는 코드를 만들다보니 기초라도 찾아보게 되었는데, 

아직도 위 텍스트들이 전부 이해되진 않는다. js는 프로그램이라 어느정도 납득이 가지만, chrome extensions에서 manifest 안의 configuration들이 어떤 기능을 하는지는 잘 모르겠다.



'개발 > 기타' 카테고리의 다른 글

cron으로 스케쥴러 만들기.  (0) 2019.02.15
MongoDB, Morphia - 같은 도큐먼트 내의 두 필드 비교 쿼리 (Query - Comparing two fields in Same Document)  (0) 2018.11.17
Redis - Jedis 사용 시 겪었던 문제.  (0) 2018.10.13
Elasticsearch - ELK 스택을 사용하면서 겪었던 이슈들  (0) 2018.09.01
Slack에 메시지 보내기.  (0) 2018.08.04

관련글

티스토리툴바