본문 바로가기
프로그래밍

Chrome Extension 만드는 법

by dladbru 2016. 1. 26.

한번쯤 만들어봐야지 만들어봐야지 하던 익스텐션 기능을 미루다가 작성을 시도해보게 되었다.

생각보다 어렵지 않았고 깃허브에 많은소스를 개량해서 쓰는것까지도 문제 없었다.

JS와 HTML을 이용하기에 <a> 태그를 써보았으나 불가능했다 ㅋㅋㅋ... 

구글에 검색해서 만드는 사용방법은 잘 나와있으나 내가 원하는것은 "Hello World" 가 아니기에 실용적인것을 해보고자 한다! 


https://github.com/dhruvtv/copylinkaddress


위 링크에 접속해서 압축을 푼다


깃허브에 올려둔 크롬익스텐션 소스이며 주 기능으로는 링크등에 오른쪽마우스로 링크 복사나 드래그를 하지않고도 마우스 커서를

올려두고 CTRL+C를 하면 클립보드에 저장이 되어 다른곳에서 붙여넣기를 이용할 수 있다.


아이폰 송금앱 토스의 간편함을 컴퓨터로 대리 만족하는것같다. 

따라 해줄 사항은

  1. 주소창에 chrome://extension를 입력하거나 크롬의 메뉴 박스를 클릭하여 도구 더보기 > 확장 프로그램을 선택하면 확장 프로그램 관리 페이지를 볼 수 있다.
  2. 페이지 오른쪽 위에 개발자 모드 체크 박스에 체크를 한다.
  3. 개발자 모드 체크 박스에 체크를 하면 압축해제된 확장 프로그램 로드... 라는 버튼이 나타난다. 이를 눌러 뜨는 창에서 깃허브에 받아 압축을 풀은 경로를 지정해준다.


결과적으로 Only 남의 소스를 가져간 셈이되었다. MIT 라이센스니 우리가 수정해서 써도 된다!


나의 경우엔 마우스커서가 닿은 링크들을 내서버로 전송해주는 코드를 넣었다. 

내 서버에서는 링크들은 점검해 악성파일을 다운받는지 아닌지 http://malwares.com 에 연동 시키고자 한다.

브라우저를 이용하는 사람들은 PE파일들의 URL만 전송시키므로 퍼포먼스 저하는 문제 없다.


copylinkaddress.js 소스내에 아래와 같은 소스를 넣어 내가 원하는 소스를 구현해냈다.




kk.php는 개발중이나 Chrome Extension 은 이렇다. 단순히 링크들을 로그로만 저장해두어도 자신이 브라우저를 통해 서핑하는 데이터를 뽑아낼 수 있음은 

자명하다.




다음 포스팅엔 IE,Edge 브라우저도 꼭 하고싶다~


부분 이용 -> 구글 익스텐션 검색시 나오는 블로거.

반응형

댓글