chrome extension New Tab customizing을 위한 개발 환경 만들기

프로젝트: chrome extension 학습
키워드: Chrome Extension, new tab, Content Security Policy, YouTube Data API, Google Cloud Platform
상황
1. chrome extension을 통해 New Tab을 커스터마이징하는 방법이 궁금하여 학습해보고자 한다.
2. 아래 3가지 기능에 대해 feasibility check를 하는 것이 목표이다.
  - '교체' 버튼을 눌렀을 때 배경 이미지가 바뀌도록 한다.
  - '새탭' 버튼을 눌렀을 때 원래의 chrome new tab으로 이동한다.
  - Youtube Data API를 이용하여 loplat 채널의 최신 영상 목록을 가져온다.
    
    원하는 결과
해결 과정
1. 새로운 폴더를 만들고 manifest.json 파일을 생성한다. 확장 프로그램을 만들기 위한 최소한의 세팅이다.
```
  {
  "name": "이름",
  "description": "설명",
  "version": "0.0",
  "manifest_version": 2
}
```
  "manifest_version"은 2로 지정하는데, 최신 버전은 3이지만 버전 2의 설정이 더 간단하고 참고 자료도 많으므로 업그레이드 하지 않았다.
  
  그 후, chrome 주소창에 'chrome://extensions/'을 입력하고 확장 프로그램 페이지로 들어간다. 오른쪽 상단의 '개발자 모드'를 켜고 '압축해제된 확장 프로그램을 로드합니다.'를 클릭하여 방금 만든 폴더를 불러온다. 그러면 새로운 확장 프로그램이 추가된 것을 확인할 수 있다.
  새로운 확장 프로그램
2. chrome의 new tab을 override하기 위해 manifest.json을 수정한다.
```
  "chrome_url_overrides": {
  "newtab": "index.html"
}
```
  그리고 index.html을 생성한다. 이제 크롬에서 새로운 탭을 열면 기존의 new tab 화면 대신 index.html이 보이게 된다!
```
  <!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>New Tab</title>
</head>
<body>
  <button id="change">교체</button>
  <button id="newTab">새탭</button>
</body>
</html>
```
3. '교체'와 '새탭' 버튼에 click event handler를 추가하고 싶지만, index.html 파일에 inline script를 작성할 수는 없다. 콘텐츠 보안 정책(Content Security Policy) 때문인데, 올바른 가이드는 구글 문서에서 찾아볼 수 있다. https://developers.google.com/web/fundamentals/security/csp?hl=ko#%EC%9D%B8%EB%9D%BC%EC%9D%B8_%EC%BD%94%EB%93%9C%EB%8A%94_%EC%9C%A0%ED%95%B4%ED%95%9C_%EA%B2%83%EC%9C%BC%EB%A1%9C_%EA%B0%84%EC%A3%BC%EB%90%A8
  인라인 스크립트 주입을 통한 XSS 공격을 막기 위해 CSP는 인라인 스크립트를 완전히 금지한다.
  
  따라서 buttons.js 파일을 만들고 DOM API를 이용하여 eventListener를 추가한다.
```
  // buttons.js
function changeBackgroundImage() {
  const images = ['1.jpeg', '2.jpeg'];
  document.body.style.backgroundImage = `url("/images/${images[Math.floor(Math.random() * images.length)]}")`;
  document.body.style.backgroundSize = 'cover';
}

function openNewTab() {
  window.close();
  chrome.tabs.create({ url: 'chrome-search://local-ntp/local-ntp.html' })
}

document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('change')
    .addEventListener('click', changeBackgroundImage);

  document.getElementById('newTab')
    .addEventListener('click', openNewTab);
});

// index.html
<head>
  <script defer src="buttons.js"></script>
</head>
```
4. YouTube Data API를 사용하기 위해 Google Cloud Platform(gcp)의 '라이브러리' 탭에 들어가, Youtube Data API v3를 추가한다. 그리고 '사용자 인증 정보' 탭으로 이동하여 API key를 얻는다.
  loplat 채널의 최신 동영상을 불러오는 코드를 추가한다.
```
  // youtube.js  
function start() {
  gapi.client.init({
    'apiKey': '...', // 본인의 youtube API key
  }).then(function() {
    return gapi.client.request({
      path: 'https://www.googleapis.com/youtube/v3/search',
      params: {
        part: 'snippet',
        channelId: 'UCwHdYiP1vpI23ilu9KXQedw', // loplat channel
        order: 'date',
        type: 'video',
        maxResults: 3,
      }
    })
  }).then(function(response) {
    console.log(response.result);
  }, function(reason) {
    console.log('Error: ' + reason.result.error.message);
  });
}

document.addEventListener('DOMContentLoaded', function () {
  gapi.load('client', start);
});
```
  gapi api를 사용하기 위해 html에 관련 script를 추가한다.
```
  <script defer src="https://apis.google.com/js/api.js"></script>
<script defer src="youtube.js"></script>
```
  그러면 아래와 같은 console 에러가 뜨는데, 아까와 같은 CSP 관련 에러이다.
  Content Security Policy error
  
  https://developers.google.com/web/fundamentals/security/csp?hl=ko#%EC%86%8C%EC%8A%A4_%ED%97%88%EC%9A%A9_%EB%AA%A9%EB%A1%9D
  'https://apis.google.com' 이라는 출처를 허용한다는 것을 manifest 파일에 명시한다.
```
  "content_security_policy": "script-src 'self' https://apis.google.com;",
```
  그 후, chomre extension 관리 페이지에 들어가서 확장 프로그램을 새로고침하면 오류가 사라진 것을 확인할 수 있다.
  
  간단한 manifest 설정과 html/js를 이용하여 크롬 확장 프로그램 개발 환경을 세팅하였다!

'프론트엔드' 카테고리의 다른 글

JS library에서 cjs, esm format 모두 지원하기 (0)	2022.03.09
이미지 용량 최적화하기(feat. picture tag, sprite image) (0)	2022.02.24
storybook에서 웹접근성 검사하기(feat. storybook-addon-a11y) (0)	2022.02.11
웹접근성(web accessibility), SEO 개선하기 (0)	2022.02.11
js try/catch문으로 함수 리팩토링하기 (0)	2022.01.16

내실내놀 개발자

chrome extension New Tab customizing을 위한 개발 환경 만들기

'프론트엔드' 카테고리의 다른 글

티스토리툴바

chrome extension New Tab customizing을 위한 개발 환경 만들기

'프론트엔드' 카테고리의 다른 글

'프론트엔드' Related Articles

티스토리툴바