확장자의 Chrome Omnibox에 키워드 등록

너는 my personal blog에서 읽을 수 있다
Chrome의 API를 사용하면 확장 과정에서 많은 일을 할 수 있습니다.그 중 하나는 크롬의 주소 표시줄에 키Omnibox를 등록해서 사용자가 이 키를 사용할 때 사용자의 입력을 처리하는 것이다.
이 자습서에서는 Chrome의 주소 표시줄이나 Omnibox 등록 키워드를 사용하여 사용자 입력을 처리하는 방법을 설명합니다.우리가 만들고 있는 확장자는 키워드 color 를 등록하고, 사용자가 Omnibox에서 이 키워드를 사용할 때, 6글자의 16진수 색을 입력할 수 있습니다.사용자가 16진수를 입력하면 확장자는 COLOURlovers' API을 사용하여 색상에 대한 정보를 얻고 해당 색상과 동일한 RGB를 제공합니다.
이 강좌는 V3 확장이 아닌 목록 V2 확장을 만들 것입니다.이것은 an error that occurs with the Omnibox API in manifest V3가 본문을 썼을 때이다.
this GitHub repository 에서 본문에서 확장된 전체 코드를 찾을 수 있습니다.

확장 생성

우선 확장자를 만들 것입니다.우선 확장자를 포함하는 디렉터리를 만듭니다.그런 다음 다음 디렉토리에 manifest.json를 만듭니다.

{
    "name": "hex-to-rgb",
    "description": "Convert Hexadecimal colors to RGB right from Chrome's Omnibox",
    "version": "0.0.1",
    "manifest_version": 2,
    "icons": {
        "16": "images/icon16.png",
        "32": "images/icon32.png",
        "48": "images/icon48.png",
        "128": "images/icon128.png"
    }
}

아이콘에 대해 iconbyThalita TorresonIconscout을 사용했습니다.웹 사이트나 GitHub 저장소에서 다운로드하여 manifest.json에 설명된 대로 배치해야 합니다.
그런 다음 Chrome을 열고 chrome://extensions로 이동합니다.그리고 오른쪽 상단에서 개발자 모드를 사용합니다. (사용하지 않으면)그런 다음 Load Unpacket을 클릭하고 확장을 위해 방금 생성한 디렉토리를 선택합니다.확장 목록에서 확장자를 보아야 합니다.

Omnibox 키워드 등록

키워드를 확장자에 등록하려면 확장자omnibox에 새 키manifest.json를 추가해야 합니다.omnibox의 값은 키keyword가 있는 대상이다.확장에 있어서 키워드color를 사용할 것입니다.manifest.json에 다음을 추가합니다.

"omnibox": {
    "keyword": "color"
}

다음에 사용자가 키워드를 입력할 때 이 스크립트를 감청하고 사용자의 입력을 처리하는 백엔드 스크립트를 추가해야 합니다.manifest.json에 다음 내용을 추가하여 배경 스크립트를 추가합니다.

"background": {
    "persistent": false,
    "scripts": ["background.js"]
}

현재 디렉터리의 루트 디렉터리에 빈 파일을 만듭니다 background.js.
그런 다음 chrome://extensions로 다시 이동하여 내선 새로 고침 버튼을 클릭합니다.너는 새로운 배경 페이지 등록을 보게 될 것이다.

방금 추가한 키워드를 테스트해 봅시다.새 탭을 열고 주소 표시줄(Omnibox)color에 입력합니다.이것은 우리가 방금 만든 확장자입니다. hex-to-rgb 의 조언을 보셔야 합니다.

TAB 키를 누르면 확장자 이름이 Omnibox 왼쪽에 추가되고 확장자 아이콘이 표시됩니다.이것은 현재 확장이 입력 중인 입력을 받기 시작한다는 것을 의미합니다.사용자의 입력을 처리하기 위해 탐지기를 추가하지 않았기 때문에, 어떤 내용을 입력하면 아무 일도 일어나지 않습니다.

기본 권장사항 추가

Omnibox API를 사용할 때 사용자가 무엇을 입력하든지 나타나는 기본 제안을 지정할 수 있습니다.이를 위해 다음과 같은 방법chrome.omnibox.setDefaultSuggestion을 사용할 수 있다.이 방법은 하나의 속성을 가진 대상description을 받아들인다.
description 속성은 XML 스타일을 적용합니다.즉, XML 태그를 사용하여 사용자에게 표시되는 권장 스타일에 최소 스타일을 적용할 수 있습니다.태그는 다음과 같습니다.

<url>: 링크 스타일의 텍스트를 표시합니다.

<match>: 텍스트를 강조 표시합니다.

<dim>: 표시된 텍스트가 어두워집니다.

XML 태그를 중첩할 수도 있습니다.예를 들어, URL도 강조 표시할 수 있습니다.
배경 스크립트의 시작에 사용자가 무엇을 입력해야 결과를 얻을 수 있는지 알 수 있도록 기본 제안을 추가합니다.background.js 시작 부분에 다음을 추가합니다.

chrome.omnibox.setDefaultSuggestion({
    description: 'Enter a hex code of 6 characters to convert to RGB (for example, <match>ffffff</match>)'
});

description에서 XML 태그<match>ffffff</match>를 사용했습니다.이는 권장 사항ffffff이 강조 표시됩니다.
테스트해 봅시다.우선 이전처럼 갱신chrome://extensions된 확장입니다.그런 다음 새 탭에 color을 입력하고 TAB를 클릭합니다.문자를 입력하십시오. background.js 에서 정의한 제안을 보실 수 있습니다.최소한 한 글자를 입력하기 전에는 기본 제안이 나타나지 않습니다.

입력 처리

이 절에서는 사용자가 키워드를 입력한 후에 입력한 내용을 처리할 것입니다.이를 위해, 우리는 사건 chrome.omnibox.onInputChanged 에 사건 탐지기를 추가할 것입니다.감청기는 두 개의 매개 변수를 받을 것입니다. text 이것은 사용자가 입력한 텍스트입니다. suggest 이것은 리셋 함수입니다. 우리는 이 함수를 사용해서 Chrome에 대한 조언을 보내야 합니다.사용자가 문자를 입력할 때마다 이 이벤트를 터치합니다.
다음을 background.js에 추가합니다.

chrome.omnibox.onInputChanged.addListener((text, suggest) => {
    //check that the length of the text is 6 characters
    if (text.length !== 6) {
        suggest([]);
        return;
    }

    //TODO send the text to the API
});

현재, 우리 탐지기에서, 우리는 텍스트의 길이가 6이 아닌지 확인한 다음, suggest 리셋 함수를 호출해서 빈 그룹에 전달할 뿐입니다.
그런 다음 ColorLowers API에 요청을 보내고 색상 정보를 검색합니다.그러나 그 전에 API에 대한 요청을 허용하려면 manifest.json의 권한 배열에 API의 URL을 추가해야 합니다.다음을 manifest.json에 추가합니다.

"permissions": [
   "http://www.colourlovers.com/*"
 ]

백엔드 스크립트로 돌아가면 http://www.colourlovers.com/api/color/ 단점 Fetch API 으로 요청을 보낼 것입니다.이 단점은 색을 매개 변수로 받아들인 다음 그룹을 되돌려줍니다.색상을 찾을 수 없는 경우(예: 잘못된 색상인 경우) 배열이 비어 있거나 배열에 색상 세부 정보가 포함된 객체가 저장됩니다.예를 들어 브라우저에서 URLhttp://www.colourlovers.com/api/color/ffffff?format=json을 열어 응답이 어떤지 보십시오.
리스너의 배경 스크립트에 다음 내용을 추가합니다.

//send text to API
fetch('http://www.colourlovers.com/api/color/' + text + '?format=json')
    .then((response) => response.json())
    .then((data) => {
        if (!data.length) {
            //no color was found
            suggest([]);
        } else {
            //TODO send suggestion when color exists
        }
})

만약 색을 찾지 못하면, 우리는 suggest 빈 그룹으로 되돌아갈 것입니다.우리는 다음 색을 발견한 사례와 건의를 어떻게 보내는지 처리해야 한다.
제안된 객체에는 다음과 같은 3가지 속성이 있습니다.

content: 사용자가 제안을 가리킬 때 Omnibox에 놓을 텍스트를 저장합니다.

deletable: 사용자가 제안 기록에서 제안을 삭제할 수 있는지 여부.이 속성은 선택할 수 있습니다.

description: setDefaultSuggestion에서 사용한 설명 속성과 유사합니다. 이것은 사용자가 제안 목록에서 볼 텍스트입니다.이전 섹션에서 설명한 대로 XML 태그를 사용하여 스타일 설정을 할 수 있습니다.

색상을 받으면 Omnibox의 content를 RGB 값으로 설정하고 URL을 색상으로 설정하여 사용자가 다른 정보를 원하지 않도록 합니다.자세한 내용은 description 색상 이름, 16진수 코드 및 URL로 설정합니다.
이전 코드 블록에 추가한 TODO 대신 다음 코드를 추가합니다.

suggest([
    {
        content: `${data[0].rgb.red}, ${data[0].rgb.green}, ${data[0].rgb.blue} url: ${data[0].url}`,
        deletable: true,
        description: `Color name: ${data[0].title}, hex: <match>${data[0].hex}</match>, more information: <url>${data[0].url}</url> `
    }
])

16진수를 RGB로 변환하는 코드가 완료되었습니다.마찬가지로 chrome://extensions에서 확장자를 새로 고치고 새 옵션을 열고Omnibox에 color를 입력한 다음tab을 눌러라.그런 다음 16진수 색상을 입력합니다.예를 들어, 를 입력합니다.너는 아래에서 새로운 건의를 보아야 한다.키보드 위아래 화살표를 사용해서 조언을 가리키면, Omnibox의 내용이 f5f5f5 에서 설정한 텍스트로 변경된 것을 볼 수 있습니다.

선택 제안 처리

우리가 처리해야 할 마지막 이벤트는 사용자가 Enter 키를 누르거나 눌러서 제안을 선택하는 것입니다.이번 행사는content입니다.이 이벤트의 탐지기는 두 가지 인자를 수신합니다. chrome.omnibox.onInputEntered 은Omnibox의 텍스트이며, text, OnInputEnteredDisposition, currentTab 또는 newForegroundTab 에서 새 URL을 열어야 하는지 (확장할 동작이라면).
우리가 해야 할 일은 newBackgroundTab에서 URL을 추출하고 text가 OnInputEnteredDisposition라면 현재 옵션의 URL을 추출한 URL로 바꿉니다.그렇지 않으면 URL이 있는 새 탭이 열립니다.currentTab에 다음을 추가합니다.

chrome.omnibox.onInputEntered.addListener((text, OnInputEnteredDisposition) => {
    const prefixIndex = text.indexOf('url: ');
    if (prefixIndex !== -1) {
        const url = text.substring(prefixIndex + 'url: '.length)
        console.log(url);
        if (OnInputEnteredDisposition === 'currentTab') {
            chrome.tabs.create({url});
        } else {
            chrome.tabs.update({url});
        }
    }
});

앞에서 말한 바와 같이, 우리는 background.js 작성한 양식에 근거하여 URL 에서 text 추출했다.그런 다음 URL을 content 값에 따라 엽니다.
테스트해 봅시다.마찬가지로 OnInputEnteredDisposition에서 확장자를 새로 고치고 새 옵션을 열고Omnibox에 chrome://extensions를 입력한 다음tab을 눌러라.그런 다음 16진수 색상을 입력합니다.예를 들어, 를 입력합니다.표시된 색상 제안을 누르거나 키보드의 상하 화살표로 가리키고 enter 키를 누르십시오.색상에 대한 정보를 알아보기 위해 ColorLovers의 페이지로 가져갈 것입니다.

결론

Chrome의 Omnibox API를 사용하면 확장을 위한 기능을 추가하여 사용자가 무언가를 쉽게 찾거나 작업을 수행할 수 있습니다.이 API에 대한 자세한 내용은 전체 APIAPI reference를 참조하십시오.