음하하하

크롬 확장프로그램을 개발할 때, 구글 드라이브를 연동해야 할 필요가 있을 것이다.

https://developers.google.com/drive/quickstart-js 에 나온 예제를 따라하면 인증 문제에 걸리기 때문에 정상적인 실행을 할 수 없다.

아래 설명대로 예제 프로그램을 진행해보자.

1. https://code.google.com/apis/console/ 에 방문해, 프로젝트를 생성한다.

2. 왼쪽 목차 중 Services메뉴의 하위 선택 메뉴 중에 Drive API 항목을 On으로 바꿔준다.

※ 주의사항 : 구글에서는 Drive API의 requests를 일정 수로 제한하고 있다. 많은 트레픽이 발생하는 프로그램을 제작시엔 적합하지 않다.

두번의 동의 체크를 하면 Drive API 부분이 다음과 같이 바뀔 것이다.

3. 왼쪽 목차 중 API Access 메뉴에 들어가 OAuth 2.0 client ID를 생성한다.

이메일 주소는 가렸습니다.. ^^;;

Product logo 및 Home Page URL은 입력하지 않아도 무방합니다.

4. Application type을 Installed application으로 선택한다.(이 부분이 구글에서 제공하는 예제와 다른 부분이다.)

Installed application type은 Chrome Application으로 선택한다.

구글 드라이브를 사용하려는 크롬 확장프로그램의 ID를 복사해서 입력하고, ID를 생성한다.

5. 다음과 같이 Client ID 화면이 생성된 것을 알 수 있다. 이 때, Client ID는 나중에 사용할 것이니 기억해 놓자.

6. https://developers.google.com/drive/quickstart-js 에 들어가서 중간에 있는 quickstart.html 코드를 복사하고, 크롬 확장프로그램이 존재하는 폴더에 저장하자.

이 때, Javascript 부분은 분리해서 따로 quickstart.js 파일을 만들고, quickstart.js 파일을 참조해서 해당 스크립트를 사용해야 한다. 그 이유는 크롬 확장프로그램은 보안상 문제로 Inline Script을 허용하지 않는다.

그리고 quickstart.js 파일의 CLIENT_ID 부분을 4.항목에서 나온 Client ID로 복사해서 대치한다.

7. 크롬 확장프로그램 제작에 사용되는 manhifest.json 파일을 열어 다음과 같은 구문을 추가한다.

"content_security_policy": "script-src https: 'self'; object-src 'self'"

8. 확장프로그램을 새로고침하고, 다시 quickstart.html 파일을 호출한다.

이제 Authorize 버튼을 클릭해보자.

다음과 같이 접근 권한을 물어볼 것이다.

접근 허락을 하면, 페이지가 연결중이라고 하고 가만히 있을 건데, 그냥 끄자.

나중에 개발 시에 저 창을 끄도록 하는 코드를 삽입해야 할 것이다.

9. quickstart.html 파일을 다시 호출하면 파일 선택 버튼이 나올 것이다.

그래프.hwp 파일을 선택하고 조금 기다리면, 구글 드라이브에 이 파일이 올라간 것을 확인할 수 있다.