반응형 웹개발/크롬 익스텐션4 크롬 익스텐션 개발기(4) : html 디코딩 웹클리퍼 기능을 구현하면서 발생했던 주요 문제중에 하나는 바로 인코딩/디코딩 문제였다! 이 페이지를 웹클리핑하면 http://news.chosun.com/misaeng/site/data/html_dir/2017/08/21/2017082100911.html http://news.chosun.com/misaeng/site/data/html_dir/2017/08/21/2017082100911.html news.chosun.com 캡쳐에서 보이듯이 웹사이트 정보에 대한 텍스트들이 깨져서 나타났다. 이유를 확인해보니, axios를 이용하여 웹페이지의 html 문서를 가져올 때 utf-8 타입으로 가져오게 되는데, 이 사이트는 content-type이 euc-kr로 되어있어서 한글이 제대로 가져와지지 않았기 때문이.. 2021. 4. 25. 크롬 익스텐션 개발기(3) : storage 우리 프로그램은 유저의 로그인 여부를 파악하는 것이 중요하였다. 그래서 브라우저의 local storage와, chrome extension storage를 사용하였다. local storage를 사용하게 되면 개인 pc의 브라우저에 저장되기 때문에, 컴퓨터를 껐다 켜도 값이 유지되어 있었다. 저장된 값을 확인하는 방법은 윈도우의 경우 F12를 누르거나, 그 외의 경우 마우스 우클릭을 한 뒤, →검사→Application→Storage의 localstorage 항목을 확인하면 된다. 또한 여기서 특정 항목을 선택하여 그것의 key나 value 값을 변경할 수 있다. 사용을 위한 코드는 다음과 같다. // local storage에 특정 key와 그에 대한 value 저장하기 localstorage.set.. 2021. 2. 12. 크롬 익스텐션 개발기(2) : webclipper 우리 프로그램의 주된 기능은 webclipper 기능이었다. 즉, 익스텐션의 파비콘을 클릭했을 때 해당 탭의 html 정보를 긁어오는 과정이 필요하였다. 그래서 나는 이 기능을 구현하기 위해 나는 background 부분과 chrome API를 이용하였다. developer.chrome.com/docs/extensions/reference/ API Reference - Chrome Developers The complete reference to all APIs made available to Chrome Extensions. This includes APIs for the deprecated Chrome Apps platform as well as APIs still in beta and dev. de.. 2021. 1. 25. 크롬 익스텐션 개발기 (1) : 기본 설정 3주간 동아리에서 팀 프로젝트로 웹 클리퍼 기능의 크롬 익스텐션을 개발하게 되었다. 크롬 익스텐션 개발과 관련된 정보가 많은 것이 아니라 힘들기도 했지만, 만들고 나니까 굉장히 뿌듯하다. 그래서 크롬 익스텐션을 만들면서 배웠던 내용들을 전체적으로 정리해보고자 한다! 일단 이 프로젝트를 진행하면서 chrome API 문서를 엄청 읽었다. developer.chrome.com/docs/extensions/reference/ API Reference - Chrome Developers The complete reference to all APIs made available to Chrome Extensions. This includes APIs for the deprecated Chrome Apps platf.. 2021. 1. 17. 이전 1 다음 반응형
