브라우저 확장 - 자동 로그인 입력기 작성 예제 - Auto Login Extension

크롬 익스텐션(chrome-extension) 으로 로그인 자동 입력기 "Auto Login Extension" 을 작성해 보았습니다.

 

 * 크롬 익스텐션으로 자동 로그인 입력기(Auto Login Extension) 예제 파일 :

auto_login_chrome_extension-sample.zip

0.02MB

 

크롬 익스텐션(chrome-extension, 크롬 확장 프로그램 ) 개요

 

크롬 익스텐션(chrome-extension, 크롬 확장 프로그램) 은 구글 크롬 브라우저를 확장하여 사용자에게 추가 기능을 제공하는 소프트웨어입니다. 크롬 확장 기능은 JavaScript, HTML, CSS 등을 사용하여 개발되며, 브라우저의 기능을 확장하거나 사용자의 맞춤형 경험을 제공할 수 있습니다.

 

크롬 익스텐션의 주요 특징

1. 사용자 인터페이스 향상: 사용자 인터페이스(UI)를 변경하거나 향상시켜 브라우저 경험을 맞춤화할 수 있습니다.
2. 자동화 작업: 반복적인 작업을 자동화하여 효율성을 높일 수 있습니다.
3. 웹사이트 통합: 특정 웹사이트와 상호작용하거나 데이터를 수집하는 데 사용할 수 있습니다.
4. 보안 기능: 광고 차단, 추적 방지, 암호 관리 등 보안 기능을 제공할 수 있습니다.

 

 

크롬 익스텐션 사용 사례

1. 광고 차단기: 웹 페이지에서 광고를 제거하여 더 빠르고 깨끗한 브라우징 경험을 제공합니다.
2. 암호 관리자: 사이트에 안전하게 로그인할 수 있도록 암호를 저장하고 자동으로 입력합니다.
3. 생산성 도구: 할 일 목록 관리, 메모 작성, 타이머 설정 등 생산성을 높이는 도구를 제공합니다.
4. 개발자 도구: 웹 개발자에게 유용한 디버깅 도구와 성능 모니터링 도구를 제공합니다.

 

 

---

[로그인 자동 입력기  크롬 확장프로그램 예시]

 

크롬브라우저 또는 엣지 브라우저에서 브라우저 확장 기능을 이용 할 수 있습니다.

크롬브라우저는 크롬 익스텐션(chrome-extension, 크롬 확장 프로그램) , 엣지 브라우저는 "확장" 기능으로 표시됩니다.

아래 내용을 엣지 브라우저에도 동일하게 적용하여 사용 가능합니다.

크롬 익스텐션(chrome-extension, 크롬 확장 프로그램), 엣지 "확장"기능을 이용해서 특정 페이지에 사용자가 로그인을 할 경우 사용자가 아이디와 패스워드를 자동으로 입력하고 저장할 수 있는 인터페이스를 제공 할 수 있습니다.

다음과 같이 네이버 로그인 창에 자동으로 아이디 와 PW을 입력하는 예시를 작성 하여 보았습니다.

 

크롬 확장 프로그램으로 "Auto Login Extension"을 작성하여 등록한 후 네이버 싸이트의 로그인 장을 호출 하면 설정한 "아이디"와 "패스워드"를 자동으로 입력 합니다.

 

엣지브라우저의 확장으로도 로드하여 사용 가능합니다.

 

 

---

1)  프로젝트 구조

 

my-extension/
├── manifest.json
├── background.js
├── content.js
├── popup.html
├── popup.js
└── images/
    ├── icons8-color-16.png
    ├── icons8-color-48.png
    └── icons8-color-128.png

 

 

2) ` manifest.json`

`manifest.json` 파일의 permissions 항목은 Chrome 확장 프로그램이 필요한 특정 권한을 선언하는 부분입니다. 이 권한들은 확장 프로그램이 올바르게 작동하기 위해 필요하며, 사용자에게 허가를 요청하게 됩니다.

각 권한의 설명은 다음과 같습니다:

{
  "manifest_version": 3,
  "name": "Auto Login Extension",
  "version": "1.0",
  "permissions": [
    "activeTab",  // 현재 활성화된 탭에 접근하기 위한 권한
    "scripting",  // 웹페이지에 스크립트를 삽입하고 실행하기 위한 권한
    "storage"     // 확장 프로그램의 데이터를 저장하고 불러오기 위한 권한
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["contents.js"]
    }
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  }
}

   

* 사용자가 확장 프로그램 아이콘을 클릭했을 때 활성 탭의 웹페이지에 스크립트를 삽입하여 자동으로 로그인 정보를 입력하기 위해 activeTab과 scripting 권한을 사용합니다.
* 사용자가 팝업 페이지에서 입력한 아이디와 비밀번호를 저장하고, 나중에 다시 불러오기 위해 storage 권한을 사용합니다.

1. activeTab
설명: 이 권한은 확장 프로그램이 사용자가 활성화한 탭(즉, 현재 보고 있는 탭)에 일시적으로 액세스할 수 있게 합니다. 사용자가 확장 프로그램 아이콘을 클릭하면, 확장 프로그램은 현재 활성 탭의 URL에 접근하고 그 탭의 컨텍스트에서 스크립트를 실행할 수 있습니다.
사용 예시: 확장 프로그램 아이콘을 클릭할 때 현재 페이지에서 특정 동작을 수행하는 경우.

2. scripting
설명: 이 권한은 확장 프로그램이 chrome.scripting API를 사용하여 웹페이지에 스크립트를 삽입하고 실행할 수 있게 합니다. 이를 통해 확장 프로그램은 웹페이지의 DOM에 접근하고, 페이지의 내용을 수정하거나 페이지와 상호작용할 수 있습니다.
사용 예시: 특정 웹페이지에 자바스크립트를 삽입하여 자동으로 아이디와 비밀번호를 입력하거나, 버튼을 클릭하는 등의 작업을 수행할 때.

3. storage
설명: 이 권한은 확장 프로그램이 Chrome의 chrome.storage API를 사용하여 데이터를 저장하고 검색할 수 있게 합니다. 이를 통해 확장 프로그램은 로컬 또는 동기화된 저장소에 데이터를 저장하고, 이를 필요할 때 불러올 수 있습니다.
사용 예시: 사용자가 입력한 아이디와 비밀번호를 저장하고, 나중에 로그인 페이지에서 이 정보를 자동으로 입력할 때.

 

 

3) `background.js`

 

- 확장 프로그램의 이벤트를 처리하는  스크립트 입니다.

// background.js
// 백그라운드 스크립트는 확장 프로그램의 이벤트를 처리합니다.
//
chrome.runtime.onInstalled.addListener(() => {
    console.log('Auto Login Extension installed.');
  });
  
  chrome.action.onClicked.addListener((tab) => {
    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      files: ['contents.js']
    });
  });

 

4) `contents.js`

 

- 실제 자동 입력을 수행하는 스크립트 입니다.

// contents.js
// 실제 자동 입력 기능을 수행하는 콘텐츠 스크립트입니다.
//
window.addEventListener('load', () => {
    // 로그인 페이지의 아이디와 패스워드 필드에 자동으로 입력할 값
    // const USERNAME = 'your_username';
    // const PASSWORD = 'your_password';
    const USERNAME = 'MY-USERID';
    const PASSWORD = 'PASSWORD';
  
    // 아이디와 패스워드 입력 필드를 찾습니다.
    const usernameField = document.querySelector('input[type="text"], input[name="username"]');
    const passwordField = document.querySelector('input[type="password"], input[name="password"]');
    const loginButton = document.querySelector('button[type="submit"], input[type="submit"]');
  
    // 아이디와 패스워드를 입력합니다.
    if (usernameField && passwordField) {
      usernameField.value = USERNAME;
      passwordField.value = PASSWORD;
  
      // 로그인 버튼을 클릭합니다.
      if (loginButton) {
        loginButton.click();
      } else {
        console.log('Login button not found.');
      }
    } else {
      console.log('Username or password field not found.');
    }
  });

 

5) `popup.html`

 

<!DOCTYPE html>
<html>
<head>
  <title>Auto Login Settings</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      width: 200px;
      padding: 10px;
    }
    label {
      display: block;
      margin-top: 10px;
    }
    input[type="text"], input[type="password"] {
      width: 100%;
      padding: 5px;
      margin-top: 5px;
    }
    button {
      margin-top: 10px;
      padding: 5px;
      width: 100%;
    }
  </style>
</head>
<body>
  <h3>Auto Login Settings</h3>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <label for="password">Password:</label>
  <input type="password" id="password" name="password">
  <button id="save">Save</button>
  <script src="popup.js"></script>
</body>
</html>

 

 

6) `popup.js`

 - 입력된 아이디와 패스워드를 입력하고 브라우저 storage에 저장하고 동기화 하는 스크립트 입니다.

document.getElementById('save').addEventListener('click', () => {
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;

  chrome.storage.sync.set({ username, password }, () => {
    console.log('Credentials saved');
    alert('Credentials saved!');
  });
});

document.addEventListener('DOMContentLoaded', () => {
  chrome.storage.sync.get(['username', 'password'], (items) => {
    document.getElementById('username').value = items.username || '';
    document.getElementById('password').value = items.password || '';
  });
});

 

 

7) 아이콘 이미지

images 폴더에 아이콘 이미지를 추가합니다. "icons8-color-16.png",  "images/icons8-color-48.png", "images/icons8-color-128.png"파일을 추가 합니다. 

 

 

 

---

[크롬 익스텐션을 브라우저에 등록]

   - 작성한 크롬 익스텐션을 크롬 또는 엣지 브라우저에  등록 하는 과정은 아래와 같습니다.

 

1) 브라우저 옵션의 " 확장 프로그램 > 화장 프로그램 관리" 기능을 호출 합니다.  엣지 브라우저는 "확장" 기능 입니다.

 

2)  개발자모드를 켜고 압축 해제된 확장 프로그램을 로드 합니다.

    - 아래 와 같이 "개발자 모드"를 활성화 합니다.
    - 그리고 " 압축 해제된 확장 프로그램"을 클릭 하여 작성한 프로그램의 디렉토리를 지정하면 확장 프로그램이 등록 됩니다.

 

3) 확장 프로그램 등록 확인 

    성공적으로 확장 프로그램이 등록 되면 아래와 같이 확인 가능하며, 만약 프로그램의 오류가 있다면 오류를 표시해 줍니다. 해당 오류를 확인하여 수정 하면 됩니다.

 

 

4) 프로그램 오류 해결 

    - 임의 대로 프로그램 소스를 오류를 만들어 확장 프로그램을 재로딩하면 오류의 원인을 알려 줍니다. 웹개발자 분이시라면 해결이 가능할 것 같습니다. ^^

 

 

 

이상으로  

크롬 익스텐션을 작성하여  브라우저에 확장 기능을 등록하여 사용하는 방법을 정리해 보았습니다.

자료는 첨부 파일로 등록해 두겠습니다.   감사합니다.