React-Router-DOM 사용 불가

우선 기존의 프로젝트를 만드는 과정에서 Router을 활용해 프로젝트 구조를 만들어 놓았다. 이렇게 만든 사이트를 크롬에서 새로운 탭을 생성했을 경우 자동적으로 해당 사이트가 펼쳐지도록 하면 될 줄 알았으나 Chrome Extension과 일반적인 React Project가 100퍼센트 똑같은 방법으로 진행되지는 않는 것 같다고 느꼈다.

가장 큰 차이점으로 Router를 사용해서 프로젝트 구조를 만들었던 것을 변경했어야했다. 그래서 기존의 Route.js 파일 대신 Main.js라는 파일을 만들어 비슷한 기능을 하도록 구현했다. react-chrome-extension-router라는 라이브러리가 존재하는데, switch 기능을 어떻게 해결할지를 모르겠어가지고 일단은 router 기능 없이 추가 Javascript File을 만들어서 비슷한 결과를 만들어내는데 성공은 했다.

Social Login 사용시 주의 사항

Chrome Extension에서 Firebase를 사용하는데 몇가지 설정해야하는 내용이 있다. 설정을 하지 않을 경우, Social Login Popup 창이 등장하지 않기 때문에 아래 설정들을 해줘야한다.

Firebase 상의 문제

일단 Firebase에서 승인된 도메인이 아니면 Popup 창이 자동적으로 닫히게 된다. 일반적인 경우, 구글 문서를 따라하면 된다.

Create-React-App을 활용한 프로젝트 때문이라고 생각되는데 기존의 방식으로 프로젝트의 Javascript File을 추가하고 HTML File에 업로드하는 것이 하라는 대로 되지 않아서 개인적으로 내린 결론이니 정석적인 방법은 아닌 점 참고해주세요.

• Firebase Auth 페이지에서 Sign-in method -> 승인된 도메인에 chrome-extension:// 자기 아이디 를 추가한다.

CSP

이렇게 해도 chrome extension에 오류라고 뜨는 내용이 있다. 계속해서 Content-Security-Policy 때문에 해당 URL에 접근할 수 없다는 내용이 오류로 발생한다. 크롬 문서에서 별다른 내용을 얻을 수가 없어서 수차례 실패했다.

결국 아까 위의 구글 문서에서 다음과 같은 내용을 찾았다.

• 프로젝트 폴더에서 public -> manifest.json에서 CSP에 https://apis.google.com를 추가한다.

정리

Social Login 기능을 Chrome Extension에서 구현하는데 자동적으로 팝업 창이 닫힌다면 2가지를 추가하면 된다. 추가적으로 발생하는 오류의 경우 F12를 통해 오류를 확인하거나 크롬 익스텐션 오류 로그를 구글링하다보면 해결할 수 있다고 생각한다. 본인의 경우, 해당 팝업 문제를 해결하는데 2시간 정도 소요되었다…

• Firebase Auth 페이지에서 Sign-in method -> 승인된 도메인에 chrome-extension:// 자기 아이디 를 추가한다.
• 프로젝트 폴더에서 public -> manifest.json에서 CSP에 https://apis.google.com를 추가한다.