bekusib's develop story bekusib's develop story

Frontend/chrome extension

• [chrome extension] github example source code tutorials

  Frontend/chrome extension 2020. 3. 23. 15:06

  https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples GoogleChrome/chrome-app-samples Chrome Apps. Contribute to GoogleChrome/chrome-app-samples development by creating an account on GitHub. github.com https://trustyoo86.github.io/javascript/2019/12/27/chrome-extension-overview.html kern의 FE-Note kern의 Front-end 개발 노트입니다. trustyoo86.github.io https://github.com/avm99963/translat..

  Read More
• [chrome extension] How to make image button on content script

  Frontend/chrome extension 2020. 3. 23. 15:03

  chrome extension create button script const iconBtn = document.createElement('button'); const iconBtnUrl = URL; iconBtn.setAttribute('id', 'iconbtn'); iconBtn.style.backgroundColor = 'transparent !important;'; iconBtn.style.padding = '0px'; iconBtn.style.borderWidth = '0px'; iconBtn.style.border = 'none'; iconBtn.style.position = 'absolute'; iconBtn.style.color = '#FFFFFF'; iconBtn.addEventListe..

  Read More
• [chrome extension] How to send message content script to background.js

  Frontend/chrome extension 2020. 3. 23. 14:56

  chorme extension을 만들때 주요 개념이 있다. 간단히 정리하자면, - background.js : 말 그대로 백그라운드 작업을 처리한다. 작동 방식은 '항시동작/이벤트전달'로 목적에 맞춰 작성하면된다. - content script : 현재 웹 페이지에 커스텀 html을 injection 하여 인터렉트를 위해 사용된다. - popup : 브라우저 상단 url입력 오른쪽에 표시되는 ui이다. 그 밖에 permission 관련 등은 검색하면 많이 나온다. 크롬API content script to background.js 통신하는 방법을 소개하고자 한다. 현재 페이지에서 텍스트를 선택하면 content script가 동작하여 버튼이 생성되고, 클릭시 background.js에 그 값을 전달해 저..

  Read More
• [chrome extenstion] When I have selected text in page, how to pop up the text at down of mouse pointer.(글자 선택시 마우스 포인트 아래 띄우기)

  Frontend/chrome extension 2020. 3. 19. 17:30

  Goal: 웹 페이지의 글자를 선택(클릭)을 할때 마우스 포인트 바로 아래 선택한 글자를 띄우고자한다. 이 기능은 내가 최종적으로 만들려는 기능이 아닌 과정일뿐이다. 사용한 보일러플레이트는 chrome-extension-boilerplate 에서 확인 할 수 있다. 크롬 확장 프로그램을 만들기에 앞서 개념 부분은 생략하겠다. 학습이 필요하다면 구글링.. 참조1 참조2 참조3 먼저 manifest.json에서 권한 부분을 아래와 같이 수정한다. "permissions": [ "https://*/*", "http://*/*", "activeTab" ], 그리고 본격적으로 content.ts에 삽입할 스크립트를 추가해주자. // content.js // Add bubble to the top of the pa..

  Read More
• [chrome extension] boilerplate 크롬에서 실행(적용) 해보기

  Frontend/chrome extension 2020. 3. 19. 02:38

  이 글에서는 크롬 확장 프로그램 개발을 처음 시작하려고 할때 예제 소스를 크롬에 적용하여 실행해보는 방법을 소개한다. 원하는 chrome extension bilerplate를 깃허브나 기타 저장소에서 다운로드 한다. 나의 경우 react-chrome-extension-boilerplate 를 다운로드한 후 빌드를 했다. 빌드 과정 까지는 생략하겠다. 빌드를 완료하면 아래와 같은 파일이 구성된다. 이제 크롬 브라우저를 열어 옵션 > 도구 더보기 >확장프로그램 탭으로 이동한다. 우측 상단에 있는 개발자모드를 ON 한다. 그러면 아래와 같은 버튼이 생성된다. '압축해제된 확장 프로그램을 로드합니다.' 버튼을 클릭한 후 좀 전에 빌드해서 생긴 빌드 폴더를 선택한다. 별 문제가 없다면 아래와 같이 확장 프로그램..

  Read More