[javascript] 크롬 확장 프로그램 이벤트 추가

 

일반적인 경우

 

jQuery를 이용하는 경우에 엔터키를 자동으로 입력해주는 스크립트를 아래처럼 작성할 수 있습니다. 

 

var e = jQuery.Event("keypress");
e.which = 13;
$(selector).trigger(e);

 

크롬 확장 프로그램의 자바스크립트의 경우

 

앞선 예제와 차이점이 존재합니다. 특정 페이지에서 동작하는 자바스크립트 코드가 존재할 테고 이는 확장 프로그램을 만들기 위해 작성하는 스크립트랑은 다르다는 것을 인지하셔야 합니다. 문법이 다르다는 이야기가 아니라 frame이 다릅니다. 따라서 추가한 이벤트를 페이지에서는 적용이 안됩니다.

 

 

대부분 개발자도구에서 먼저 테스트를 해보고 성공한 코드를 js에 추가하고 확장 프로그램을 로드하실 텐데요. 그러고 이벤트가 동작하지 않는 것에서 의문을 느끼실 겁니다. 기본 설정이 top frame이라서 더욱 '맞는데 왜 틀린 거지??'라는 생각을 하게 되겠죠. 본인의 Extension을 선택해서 동일한 코드를 돌려보면 틀린 게 맞는 상황이 되겠죠. 개발자 도구를 이용하실 때 frame을 변경해서 체크해보심을 추천드립니다.

 

해결법

본인의 스크립트를 페이지에 injection 해서 간단하게 해결할 수 있습니다. 제가 설명을 드리고 싶지만 공식 문서급의 깔끔한 글이 있어서 링크로 대체하겠습니다.

 

stackoverflow.com/questions/9515704/use-a-content-script-to-access-the-page-context-variables-and-functions/9517879#9517879

Use a content script to access the page context variables and functions

 

맨 처음 소개드렸던 예제를 injection 한다면 아래처럼 표현 가능합니다. 소스 코드의 base를 위 링크에서 가져와서 그대로 붙여 넣었습니다. 실제로 테스트해본 결과 드디어 이벤트 트리거에 성공했습니다. 

 

var actualCode = '(' + function() {
    var e = jQuery.Event("keypress");
    e.which = 13;
    $(selector).trigger(e);
} + ')();';
var script = document.createElement('script');
script.textContent = actualCode;
(document.head||document.documentElement).appendChild(script);
script.remove();

 

저와 같은 이유로 곤란을 겪는 분들을 위해 링크라도 첨부하고 싶은 마음에 포스팅했습니다. 읽어주셔서 감사합니다.

 

다른 추가 링크들

stackoverflow.com/questions/17152932/chrome-extension-how-to-send-keydown-event-to-pages-input

chrome extension: how to send 'keydown' event to page's input?

stackoverflow.com/questions/25094387/chrome-extension-trigger-events-on-content-scripts-using-jquery

Chrome Extension - Trigger events on content_scripts using JQuery

쿼리 이벤트 관련 링크

 

lookingfor.tistory.com/entry/JQuery-%ED%95%A8%EC%88%98-trigger-%EA%B0%95%EC%A0%9C%EB%A1%9C-click-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B0%9C%EC%83%9D%EC%8B%9C%ED%82%A4%EA%B8%B0

 

JQuery 함수 trigger(), 강제로 click 이벤트 발생시키기

secr.tistory.com/255

jquery 강제 엔터처리

okky.kr/article/321009

OKKY | jquery사용하지 않고 javascript로 keydown 이벤트 발생시키기

api.jquery.com/keydown/

.keydown() | jQuery API Documentation