Chrome용 확장 프로그램 개발

브라우저에서 사용할 수 없는 추가 기능을 원하십니까? 걱정하지 마세요. 확장 기능으로 추가할 수 있습니다.

Extensions are small software programs that customize the browsing experience. They enable users to tailor Chrome functionality and behavior to individual needs or preferences. They are built on web technologies such as HTML, JavaScript, and CSS.

이 게시물에서는 브라우저에서 열려 있는 모든 탭의 URL을 복사하는 Chrome 브라우저용 간단한 확장 프로그램을 개발한 방법을 보여 드리겠습니다.

먼저 확장에 필요한 모든 파일을 저장할 디렉터리를 만듭니다. 내 이름을 "복사 탭"으로 지정했습니다. 원하는 이름을 지정할 수 있습니다.

다음으로 manifest.json 파일을 생성합니다. 여기에는 확장에 대한 정보가 포함됩니다. 그런 다음 매니페스트 파일에 다음을 추가합니다.

{
    "manifest_version": 2,
    "name": "Name of your extension",
    "description": "Describe your extension.",
    "version": "1.0.0",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "permissions": [
        "tabs"
    ]
}

브라우저 탭에 대한 정보를 얻고자 하므로 매니페스트 파일의 tabs 필드에 permissions 인텐트를 추가했습니다.

매니페스트 파일의 필드에 대한 자세한 내용은 Manifest File Format을 참조하십시오.

이 확장의 기능은 다음과 같습니다. 사용자가 확장 아이콘을 클릭하면 팝업이 열리고 클릭 시 열려 있는 모든 탭의 URL을 복사하는 버튼이 팝업에 포함됩니다. 팝업을 위해 HTML 파일을 만들고 다음을 추가합니다.

<h3 class="title">&nbsp;<img src='icon.png'>&nbsp;Copy Tabs</h3>
<button id="copyUrls" class="btn">Copy URL of Open Tabs</button>
<div id="log"></div>

팝업 콘텐츠에 몇 가지 스타일 추가:

html {
    width: 15em;
    text-align: center;
}
.title {
    display: flex;
    padding-bottom: 5px;
    border-bottom: #18ab29 solid 1px;
    align-content: center;
}
.btn {
    margin: 0 auto;
    background-color: #44c767;
    border-radius: 5px;
    border: 1px solid #18ab29;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    padding: 5px;
}
.btn:hover {
    background-color: #5cbf2a;
}

마지막으로 확장 기능이 작동하도록 JavaScript를 추가합니다.

팝업의 버튼에 click 이벤트 리스너를 추가합니다.

document.addEventListener('DOMContentLoaded', function () {
    var copyBtn = document.getElementById('copyUrls');
    copyBtn.addEventListener('click', function () {
        loadWindowList();
    });
});

열린 탭의 URL을 얻기 위해 loadWindowList API의 getAll 메소드를 호출하는 chrome.windows 함수를 생성합니다. getAll에는 두 개의 매개변수가 있습니다. 첫 번째는 (선택 사항) 객체이고 두 번째는 콜백 함수입니다.

function loadWindowList() {
    chrome.windows.getAll({ populate: true }, function (windowList) {
        for (var i = 0; i < windowList.length; i++) {
            for (var j = 0; j < windowList[i].tabs.length; j++) {
                urls += windowList[i].tabs[j].url + '\n';
            }
        }
        copyTextToClipboard(urls);
    });
}

복사 기능을 구현하기 위해 다른 함수copyTextToClipboard를 만듭니다. 이 함수는 writeText 인터페이스의 Clipboard 속성을 호출합니다. writeText 속성은 지정된 콘텐츠를 시스템 클립보드에 씁니다.

function copyTextToClipboard(text) {
    navigator.clipboard.writeText(text).then(function () {
        appendToLog('URL of open tabs copied to clipboard successfully!');
    }, function (err) {
        appendToLog('Could not copy URLs: ' + err);
    });
}

팝업에 메시지를 표시하려면 다른 함수를 만듭니다.

function appendToLog(txt) {
    document.getElementById('log')
        .appendChild(document.createElement('p'))
        .innerText = txt;
}

이제 확장이 준비되었으며 브라우저에서 테스트할 수 있습니다.

확장 테스트

Google Chrome을 열고 "설정"에서 "확장 프로그램"으로 이동합니다.

오른쪽 상단에서 "개발자 모드"를 활성화합니다.

"Unpacked 로드"버튼을 클릭하고 확장 폴더

를 선택합니다.

"확장"페이지에 로드된 확장이 표시됩니다.

로드되면 확장을 테스트할 수 있습니다.

이 확장의 소스 코드는 Github 에서 얻을 수 있습니다.

여기까지가 이 게시물의 전부입니다. 읽어주셔서 감사합니다.