java script - 프로젝트 1 - 3. 영어 한글 변환기 확장프로그램 세팅

이렇게 변환기를 만들긴 했는데 생각보다 사용하기가 불편했습니다. 그래서 크롬 확장 프로그램으로 만들어서 쉽게 쓸 수 있도록 해 볼 것입니다.

크롬 공식 문서(https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world?hl=ko)를 참조해 만들었습니다.

 

우선 로고부터 만들어야 겠네요

로고를 만들어 주는 프로그램을 만들어 봅시다.

numpy와 matplotlib, cv2를 인스톨해 줍니다.

갑자기 파이썬이 나왔지만 원래 이것저것 바꿔 쓰는거죠 뭐.

 

python logo.py로 실행하면 이런 화면이 나옵니다. 저는 흰 바탕에 검은 글씨로 TR이라고 쓸 것입니다.

이 화면은 500*600 크기입니다. 이것을 100*100크기 칸으로 나눈 다음 적절항 칸에 색칠해 줄 것입니다.

 

왼쪽 위가 (0,0), 오른쪽 아래가 (4,5)입니다. paint 함수는 해당하는 칸을 색칠해 주는 함수입니다. 이제 마저 만들어 봅시다.

 

R이 마음에 안들지만 지금 중요한 것은 아니니 넘어가도록 합시다. ctrl + s로 저장할 수 있습니다.

 

이제 프로젝트 폴더에 logo.png를 넣고 manifest.json 파일을 만들고 다음과 같이 입력해 줍니다.

 

그리고 hello.html을 만들어 줍니다. 우선은 다음과 같이 만들어 줍니다.

이제 크롬 새 탭에 chrome://extensions 를 입력해 줍니다. 오른쪽 위 개발자 모드를 열어줍니다.

 

왼쪽 위에 있는 확장프로그램 로드 버튼을 누르고 프로젝트 폴더를 엽니다.

 

그럼 오른쪽 위 퍼즐 모양을 누르고 핀을 눌러 고정시켜 줍니다.

그렇게 나온 TR 이미지를 누르면 저희가 만든 html이 나옵니다.

이제 입력 폼을 적당히 만들어 줍시다.

이 상태로 실행하면 다음처럼 나옵니다.

이제 글을 입력하면

성공적으로 오류가 나는 것을 확인할 수 있습니다. 오 버튼을 누르면 에러를 볼 수 있습니다.

onclick안에 trans(0라는 스크립트가 있기 때문입니다. onclick을 없애고 addEventListener로 해결합시다.

 

 

이번에는 convert를 찾을 수 없어서 그러는데 이건 dom이 로드되기 전에 해당 코드가 실행되었기 때문입니다. defer을 넣어 dom이 다 실행되면 로드되도록 해줍시다.

 

dlfjaus dlwp dhksqurgl ehdwkrdmf gkqslek.