MangoPicker - 웹 매크로 & 크롤링
MangoPicker는 웹 자동화 서비스입니다. 반복 작업을 자동으로 처리하고, 원하는 정보를 손쉽게 추출하세요!
chrome.google.com
개발툴 : vscode
사용언어 : ts, js, html
manifest.json
{
"manifest_version": 3,
"name": "Your Extension Name",
"version": "1.0",
"description": "Your Extension Description",
"permissions": ["tabs", "storage", "identity", "identity.email"],
"oauth2": {
"client_id": "YOUR_CLIENT_ID", // 자신의 클라이언트 ID로 변경
"scopes": [
"profile",
"email"
]
},
"host_permissions": [
"https://www.googleapis.com/*"
],
"action": {
"default_popup": "login.html"
},
"icons": {
"48": "icon.png"
}
}oauth2 client_id값은 (https://console.developers.google.com/) 에서 크롬익스텐션의 ID값을 이용하여 가져올 수 있다.
login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="login.js"></script>
<link rel="stylesheet" href="login-popup.css">
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css" />
</head>
<body>
<div class="login_main">
<div class="logo_div">
<div class="login_logo">
------- 생략 -------
<div class="find_idpw">
<span>비밀번호 찾기 | 회원가입</span>
</div>
<input type="button" class="loginBtn" value="로그인">
</div>
<div class="part2">
<div class="line"></div>
<div class="or">or</div>
<div class="line"></div>
</div>
<button type="button" class="part3" id="GloginButton">
</svg>
<p>Sign in with Google</p>
</button>
<div class="part4">
<p>문의하기: soonNote</p>
</div>
</div>
</div>
</body>
</html>위의 mainfest.json 설정
"action": {
"default_popup": "login.html"
},으로 익스텐션 실행 시 가장먼저 뜨게된다
login.ts
document.addEventListener('DOMContentLoaded', () => {
const GloginButton = document.getElementById('GloginButton');
if (GloginButton) {
GloginButton.addEventListener('click', () => {
chrome.runtime.sendMessage({ message: 'Glogin' }, (response) => {
if (response.success) {
alert(response.name+'('+response.email+')' + '님 안녕하세요!'); // 이메일 정보를 사용하여 사용자 이름 표시
} else {
alert('로그인 실패!');
}
});
});
} else {
console.error('버튼을 찾지 못했습니다.');
}
});
background.ts
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
// 2. A page requested user data, respond with a copy of `user`
let response = null;
switch (message.message) {
case 'Glogin':
response = GLoginService(message, sendResponse);
return true;
}
if (response) {
sendResponse(response);
}
});
function GLoginService(message: any, sendResponse: any): void {
chrome.identity.getAuthToken({ interactive: true }, (token) => {
if (chrome.runtime.lastError) {
console.error(chrome.runtime.lastError);
sendResponse({ success: false }); // 실패를 응답으로 보내기
} else {
// 토큰을 이용하여 사용자 이메일 가져오기
fetch('https://www.googleapis.com/oauth2/v2/userinfo', {
headers: {
'Authorization': 'Bearer ' + token
}
})
.then(response => response.json())
.then(data => {
const userEmail = data.email;
const userName = data.name; // 사용자의 이름 정보 가져오기
console.log('사용자 이메일:', userEmail);
console.log('사용자 이름:', userName);
if (data.email) {
const userData = {
success: true,
email: data.email, // 이메일을 이름으로 사용 (사용자 이름이 없는 경우에 대체)
name: data.name
};
sendResponse(userData); // 사용자 정보를 응답으로 보내기
} else {
sendResponse({ success: false }); // 이메일이 없는 경우 실패를 응답으로 보내기
}
})
.catch(error => {
console.error('이메일 가져오기 실패:', error);
sendResponse({ success: false }); // 실패를 응답으로 보내기
});
}
});
}
1. 개발한 코드 크롬익스텐션에 등록
- 개발자도구를 사용하여 압축해제된 확장프로그램 로드 클릭
- 소스 등록
2. 등록 한 익스텐션 실행
3. sing in with google 클릭
절차에 따라 진행 하면 이름과 email 값을 가져온다.
프로그램 순서로는
1. login.html 의 sign in with Google 버튼 클릭
2. login.ts에 버튼이벤트가 작동하고
chrome.runtime.sendMessage({ message: 'Glogin' }, (response) => {코드를 통해 background로 Glogin을 전송
3. background.ts에서
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {요청한 message 값을 받아
case 'Glogin':
response = GLoginService(message, sendResponse);
return true;같은 background.ts 에 있는 GLoginService 함수실행
4.background.ts GLoginService 함수 실행
fetch('https://www.googleapis.com/oauth2/v2/userinfo', {mainfest.json 에서 설정해두었던 oauth2 client_id 값을 사용하여 api를 fetch로 실행
5. fetch로 받아온 data를 userData 안에 담아 다시 login.ts쪽으로 보냄
.then(data => {
const userEmail = data.email;
const userName = data.name; // 사용자의 이름 정보 가져오기
if (data.email) {
const userData = {
success: true,
email: data.email || '이메일 값 없음', // 이메일을 이름으로 사용 (사용자 이름이 없는 경우에 대체)
name: data.name || '이름 값 없음'
};
sendResponse(userData); // 사용자 정보를 응답으로 보내기
} else {
sendResponse({ success: false }); // 이메일이 없는 경우 실패를 응답으로 보내기
}
})
6. background.ts에서 보낸 값을 활용하여 alert
if (response.success) {
alert(response.name+'('+response.email+')' + '님 안녕하세요!'); // 이메일 정보를 사용하여 사용자 이름 표시
} else {
alert('로그인 실패!');
}
화면에보여지는 로그인form은 현재 서비스중인 mangoPicker 웹 매크로&크롤링 이며
현재 로그인 기능은 없고 반영예정
MangoPicker - 웹 매크로 & 크롤링
MangoPicker는 웹 자동화 서비스입니다. 반복 작업을 자동으로 처리하고, 원하는 정보를 손쉽게 추출하세요!
chrome.google.com
'개발노트' 카테고리의 다른 글
| [JAVA] API만들기 & 원하는 값만 가져오기 (0) | 2023.09.20 |
|---|---|
| [Mysql] MySQL manager or server PID file could not be found! 오류 (0) | 2023.08.03 |
| [SVN] 윈도우서버svn 리눅스서버 svn 이관 (0) | 2023.06.22 |
| [JAVA] validate 유효성검사 class로 하기 (0) | 2023.06.21 |
| [mybatis] Mapped Statements collection does not contain value for 에러 (0) | 2023.05.10 |
