[ChromeExtension] chrome.debugger를 이용하여 키보드 이벤트 보내기

 

 

isTrusted 값 체크를 통해 스크립트나 개발자도구에서 input.value에 직접 값을 세팅하는 걸 무용지물로 만드는 페이지가 있을 경우,

 

참고: https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted

 

input.value를 세팅하기 위해 크롬 브라우저 레벨에서 가능한 유일한 방법은 chrome extension을 제작하여 background에서 chrome.debugger를 이용하는 것.

 

 

chrome.debugger를 사용하기 위해선 manifest.json 에서 permissions에 debugger를 추가해줘야 함.

그리고 background.js 에서 아래와 같은 방법으로 키보드 이벤트를 보내는 것이 가능함.

const KeyInput = {
    target: null,
 
    send: async function(target, nodeSelector, txt){
        this.target = target;

        // 디버거 붙이기
        await this._attach();
             
        // 키보드 이벤트를 보낼 node 가져오기
        const dom = await this._sendCommand('DOM.getDocument', {});
        const node = await this._sendCommand('DOM.querySelector', {nodeId: dom.root.nodeId, selector: nodeSelector});
         
        // focus
        await this.sendCommand('DOM.focus', {nodeId: node.nodeId});
         
        // 키보드 이벤트 보내기
        for (let i=0; i<txt.length; i++) {
            const opt = {
                type: 'keyDown',
                text: text[i]
            };
            await this._sendCommand('Input.dispatchKeyEvent', opt);
 
 
            opt.type = 'keyUp';
            await this._sendCommand('Input.dispatchKeyEvent', opt);
        }
 
        // 디버거 떼기
        await this._detach();
    },
 
    _attach: function(){
        const self = this;
        return new Promise((resolved)=>{
            chrome.debugger.attach(self.target, '1.3', ()=>{
                return resolved(null);
            });
        });
    },
 
    _sendCommand: function(method, params){
        const self = this;
        return new Promise((resolved)=>{
            chrome.debugger.sendCommand(self.target, method, params, (r)=>{
                return resolved(r);
            });
        });
    },
  
    _detach: function(){
        const self = this;
        return new Promise((resolved)=>{
            chrome.debugger.detach(self.target, ()=>{
                return resolved(null);
            });
        });
    }
};
 
 
 
 
 
 
// tab.id 는 어디선가 가져온다고 가정
const target = {
    tabId: getTabId()
};
 
 
// #login_id 인 input에 'myloginid' 라는 문자열 입력
(async()=>{
    await KeyInput.send(target, '#login_id', 'myloginid');
})();

 

 

엔터키 등의 특수키는 아래와 같이 옵션을 다르게 보내야 함.

const opt = {
    type: 'keyDown',
    code: 'Enter',
    nativeVirtualKeyCode: 13,
    windowsVirtualKeyCode: 13
};
 
 
chrome.debugger.sendCommand(target, 'Input.dispatchKeyEvent', opt);

 

 

자세한 사항은 다음 문서들을 참고.

chrome.debugger: https://developer.chrome.com/extensions/debugger

Chrome DevTools Protocol(1.3): https://chromedevtools.github.io/devtools-protocol/1-3/