chrome
-
[chrome extension] How to make image button on content scriptFrontend/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..
-
[chrome extension] How to send message content script to background.jsFrontend/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에 그 값을 전달해 저..
-
[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..