[확장프로그램] 03. 확장프로그램 개발이 처음인 사람들이라면 필요한 꿀Tip!

확장 프로그램을 만들어보고 싶다고 생각해서 단순하게 html 파일로 만들어서 크롬에서 확인하고 고쳤는데 이게 잘못된 방식이라는 것을 뒤늦게 알았다. 정확하게는 잘못됐다기보다 조금 느린 방식의 접근이었다.

1. 개발자 모드에서 개발 시작하자!

확장프로그램 개발을 위해서는 각각 웹사이트에서 ://extension으로 개발자모드로 들어가서 현재 상황을 확인하면서 할 수 있다. manifest.json 프로그램으로 사이드바앱인지 등 종류만 확정지어도 브라우저 너비 등등에 대해서 불필요하게 고민할 시간을 줄일 수 있다.

2. 확장프로그램에서 필요한 API를 확인하자.

웹에서 제공하고 있는 API가 다양한 것들이 있기 때문에 미리 확인하면서 개발단에 사용하면 개발시간을 줄일 수 있고 그냥 살펴보는 재미가 있다.

3. 웹사이트의 보안정책 준수하기

개발은 다했는데 올리려고 보니까 웨일에서 정하는 보안정책에 부합해하는 부분들이 있었다. 웹 보안이 우리가 올린 프로그램으로 망가져서는 안되겠죠..? 그래서 사실 내용을 보면 자세하게 어떻게 고쳐야 하는지 알 수 있다. 하지만 개발단에서 알면 불필요한 시간을 줄일 수 있을 것 같다.

 

먼저, 인라인 명령어를 배제하자. 즉, 태그내 인라인으로 onclick, onchange 등 js에서 설정해되 되는 부분을 간단하게 작성한 것들이 있는데 이 부분을 지워야 한다. 명령이 필요한 것들은 모두 js설정으로 바꿔준다. html은 페이지 소스에서 보이므로 평소에도 웹개발시 주의하면 좋을 것 같다.

 

웹링크로 연결하는 것을 막고 있다. html 단에서 부트스트랩과 아이콘들을 끌어오는 경우가 있는데 이 부분도 보안상의 문제로 금지하고 있다. 따라서 해당 사이트 주소에서 내용을 가져와서 새로 파일을 생성해서 프로그램 내 src로 연결하는 것이 바람직하다. 개발시 주의하자!

4. manifest 아이콘

웨일 확장프로그램 개발시, 처음에 아이콘을 크기별로 설정해주는 부분이 있는데, 잘못 알고 크기를 각각 설정해서 파일을 여러개 만들어서 올려야 하는 줄 알았다. 그럴 필요없이 가장 고화질 이미지 파일을 올리고 각각 크기에 같은 파일을 설정해도 된다. 다만 배포단계에서는 128*128 픽셀 이미지가 필요하기 때문에 이것만 하나 더 준비해주면 좋을 것 같다.