분류 기타

Chrome 확장 프로그램에 바로 가기 추가(2)

컨텐츠 정보

  • 조회 10 (작성일 )

본문

지난주에 간단한 크롬 확장 프로그램을 만드는 방법을 설명하는 기사를 썼습니다. 오늘 우리는 새로운 기능인 키보드 단축키에 대해 작업 할 것입니다.


두 가지 바로 가기를 추가합니다.

  • Alt + Shift + 1은 브라우저 작업을 엽니다.
  • Ctrl / Command + Shift + 2는 현재 탭을 복제합니다.

A diagram displaying the two shortcuts we will add to our extension 

Commands API 


확장에 대한 키보드 단축키를 만들려면 명령 API를 사용해야 합니다. 이 API를 통해 명령을 정의하고 키 조합에 바인딩 할 수 있습니다. 누군가 바로 가기를 사용하면 명령이 트리거 되고 적절한 논리가 실행됩니다.


제안 된 키보드 단축키와 함께 manifest.json 파일에서 명령을 선언해야 합니다. manifest.json에서 여러 명령을 정의 할 수 있습니다. 그러나 확장 프로그램에서는 4 개의 바로 가기 만 제안 할 수 있습니다. 사용자는 브라우저 (chrome://extensions/shortcuts)에서 키보드 단축키에 다른 명령을 바인딩 할 수 있습니다.


Available keys 

모든 키보드 단축키는 Ctrl (Mac의 경우 Command) 또는 Alt를 사용해야 하지만 둘 다 포함 할 수는 없습니다. Shift를 사용할 수도 있습니다.


기타 지원되는 키 : AZ, 0-9, 쉼표, 마침표, Home, End, PageUp, PageDown, Space, Insert, Delete, 화살표 키 (위, 아래, 왼쪽, 오른쪽) 및 미디어 키 (MediaNextTrack, MediaPlayPause, MediaPrevTrack, MediaStop).


예 : Ctrl + Shift + L, Alt + Shift + L Command +, Ctrl + Shift + 1


Ctrl + T (Chrome에서 새 탭이 열림)와 같이 브라우저에 예약 된 명령은 사용할 수 없습니다.


사용자가 백그라운드 스크립트에서 명령을 실행하면 실행하려는 논리를 처리해야 합니다. 이에 대해서는 나중에 자세히 설명하겠습니다.


코딩하자 


1. manifest.json 파일에서 명령 정의 


명령을 정의하려면 다음과 같이 manifest.json 파일에서 commands 속성을 사용해야 합니다.


{
    "manifest_version": 2,
    "name": "Acho, where are we?",
    ...
    "commands": {
        "_execute_browser_action": {
            "suggested_key": {
                "default": "Alt+Shift+1"
            }
        },
        "duplicate-tab": {
            "suggested_key": {
                "default": "Ctrl+Shift+2",
                "mac": "Command+Shift+2"
            },
            "description": "Duplicates the currently active tab because... why not?"
        }
    }
}


이전 코드에서는 두 가지 다른 명령을 정의했습니다.

  • _execute_browser_action : 이것은 크롬에서 직접 처리 할 예약 된 명령입니다. manifest.json에서 정의함으로써 사용자가 바로 가기를 실행할 때 브라우저 작업을 열도록 크롬에 지시합니다. 이 명령에 대한 논리를 직접 처리 할 필요는 없습니다.
  • duplicate-tab : 이것은 확장 프로그램이 수동으로 처리해야 하는 사용자 지정 명령입니다. 이 명령에는 예약 된 명령에 필요하지 않은 설명도 포함되어 있습니다 (Chrome은 재정의 할 수 없는 기본 설명 만 표시 함).


2. 배경 스크립트 추가 


duplicate-tab 명령의 논리를 처리하려면 백그라운드 스크립트가 필요합니다. 이 스크립트를 사용하여 onCommand 메서드를 수신하고 적절한 논리를 실행합니다.


배경 스크립트 정보 


백그라운드 스크립트의 목적은 일반적으로 브라우저에서 이벤트를 수신하고 반응을 트리거 하는 것입니다. 이러한 스크립트는 일부 이벤트가 발생한 후 작업을 수행하는 동안 계속 실행 된 다음 언로드 됩니다.


백그라운드 스크립트를 포함하려면 manifest.json 파일을 수정하고 다음과 같이 background 속성을 사용하여 정의해야 합니다.


{
    "manifest_version": 2,
    "name": "Acho, where are we?",
    ...
    "background": {
        "scripts": [
            "background.js"
        ],
        "persistent": false
    }
}


마지막으로 프로젝트의 루트에 background.js라는 새 파일을 추가하겠습니다.


3. 명령 이벤트 수신 


명령을 제대로 처리하려면 백그라운드 스크립트에서 onCommand 이벤트를 수신하고 중복 탭이 ​​호출되면 적절한 논리를 실행해야 합니다.


따라서 이벤트를 수신하고 duplicate-tab 명령이 호출 될 때 duplicateTab 함수를 호출합니다.


chrome.commands.onCommand.addListener(function (command) {
    switch (command) {
        case 'duplicate-tab':
            duplicateTab();
            break;
        default:
            console.log(`Command ${command} not found`);
    }
});

/**
* Gets the current active tab URL and opens a new tab with the same URL.
*/
function duplicateTab() {
    const query = { active: true, currentWindow: true };
    chrome.tabs.query(query, (tabs) => {
        chrome.tabs.create({ url: tabs[0].url, active: false });
    });
}


_execute_browser_action 명령에 대한 대소 문자를 포함하지 않은 점에 유의하십시오. 이전에 말했듯이 해당 명령은 chrome에 의해 자동으로 처리되기 때문입니다.


Done! 


이제 사용자가 Alt + Shift + 1을 실행하면 브라우저 동작이 열리고 단축키 Ctrl / Command + Shift + 2를 사용하면 현재 탭이 복제됩니다.


저장소 


저장소를 모든 Chrome 확장 프로그램 예제로 업데이트하고 있습니다.


https://dev.to/paulasantamaria/adding-shortcuts-to-your-chrome-extension-2i20