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

Goal:

 

웹 페이지의 글자를 선택(클릭)을 할때 마우스 포인트 바로 아래 선택한 글자를 띄우고자한다.

이 기능은 내가 최종적으로 만들려는 기능이 아닌 과정일뿐이다.

사용한 보일러플레이트는 chrome-extension-boilerplate 에서 확인 할 수 있다.

 

크롬 확장 프로그램을 만들기에 앞서 개념 부분은 생략하겠다.

학습이 필요하다면 구글링.. 참조1 참조2 참조3  

 

---

먼저 manifest.json에서 권한 부분을 아래와 같이 수정한다.

"permissions": [
	"https://*/*",
	"http://*/*",
	"activeTab"
],

 

그리고 본격적으로

content.ts에 삽입할 스크립트를 추가해주자.

// content.js

// Add bubble to the top of the page.
var bubble = document.createElement('div');
bubble.setAttribute('class', 'bubble');
document.body.appendChild(bubble);
// const rect = bubble.getBoundingClientRect();    // 전체화면


document.addEventListener('mouseup', function (e) {
    console.log("document.addEventListener.mouseup() e:" + JSON.stringify(e));
  var selection = window.getSelection().toString();
  if (selection.length > 0) {
    
    // console.log('x:'+e.clientX);    // 화면 기준 위치값
    // console.log('y:'+e.clientY);
    console.log('x:'+e.pageX);    // 전체 페이지 크기 기준 위치값
    console.log('y:'+e.pageY);    
    // console.log('letf:'+rect.left); // 0, 가로길이
    // console.log('top:'+rect.top);   // 세로 길이

    translateText(e.pageX-20, e.pageY+5, selection);
  }
}, false);

// Close the bubble when we click on the screen.
document.addEventListener('mousedown', function (e) {
  bubble.style.visibility = 'hidden';
}, false);

function translateText(mouseX, mouseY, selection) {
	// TODO
    renderBubble(mouseX, mouseY, selection);
}

function renderBubble(mouseX, mouseY, selection) {
  bubble.innerHTML = selection;
  bubble.style.top = mouseY + 'px';
  bubble.style.left = mouseX + 'px';
  bubble.style.visibility = 'visible';
  bubble.style.position = 'absolute';
}

소스 참조: https://github.com/esmondchuah/translation-plugin/blob/master/main.js

 

 

마지막으로 빌드를 해주자.

$ npm run build
or
$ npx webpack

 

 

테스트 하는 방법 -> https://bekusib.tistory.com/141

 

 

 

 

 

 

 

 

 

 

 

<거쳐간 곳 정리>

rect 개념: https://developer.mozilla.org/ko/docs/Web/API/Element/getBoundingClientRect

MouseEvent.pageX 개념: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX

position: 'absolute' 개념: https://rgy0409.tistory.com/2951

참고할만한 프로젝트 : https://github.com/esmondchuah/translation-plugin

                                  https://github.com/avm99963/translateselectedtext

크롬 익스텐션 공식 홈페이지: https://developer.chrome.com/extensions/overview