본문 바로가기

Google

[Chrome Extension] 크롬 확장 프로그램 개발

반응형

OverView

Extensions are zipped bundles of HTML, CSS, JavaScript, images, and other files used in the web platform, that customize the Google Chrome browsing experience. Extensions are built using web technology and can use the same APIs the browser provides to the open web.

Extensions have a wide range of functional possibilities. They can modify web content users see and interact with or extend and change the behavior of the browser itself.

Consider extensions the gateway to making the Chrome browser the most personalized browser.

확장 프로그램은 웹 플랫폼에서 사용되는 HTML, CSS, 자바 스크립트, 이미지 및 기타 파일을 압축하여 Google 크롬 검색 환경을 맞춤 설정합니다. 확장 기능은 웹 기술을 사용하여 구축되며 브라우저가 공개 웹에 제공하는 것과 동일한 API를 사용할 수 있습니다. 확장 기능은 다양한 기능을 제공합니다. 사용자가 보거나 브라우저와 상호 작용하거나 확장하고 브라우저 자체의 동작을 변경하는 웹 콘텐츠를 수정할 수 있습니다. 확장 프로그램은 Chrome 브라우저를 가장 맞춤 설정된 브라우저로 만들기위한 게이트웨이라고 생각하십시오.

 

 

Step By Step

https://developer.chrome.com/extensions/getstarted

 

위 URL은 chrome에서 제공하는 확장프로그램에 대한 tutorial을 제공한다.

이를 토대로 확인해보면 되는데, 대략적이 내용은 다음과 같다.

 

1. 위 URL로 접근해서 chrome에서 제공하는 확장 프로그램 파일을 다운받는다.

The completed extension can be downloaded here. 

 

2. chrome://extensions/ 접속 후 [압축해제된 확장 프로그램을 로드합니다.]를 클릭해서 다운받은 파일을 올린다.

이는 우측 상단의 '개발자 모드'를 ON하면 파일을 업로드할 수 있는 버튼이 보인다.

 

3. 파일을 업로드하면 다음과 같이 확장프로그램이 생성된다.

 

4. 파일 수정이 있으면 파일 수정 후 기존에 등록된 파일을 삭제하여 등록(2-3단계)한다.

 

 

Conclusion

수정 및 반영하는 부분이 생각보다 간단했고, 단기간에 원하는 프로그램을 만들 수 있겠구나 싶었다.

(물론 여러 기능이 있는 부분을 만들려면 생각해봐야하는 부분도 있을 것이다.)

 

회사의 간단한 업무는 이를 가지고 개발해서 만들 수 있을 것 같고, 

JS가 조금 부족한 나로써는 좋은 경험이 될 것 같다.

반응형

❥ CHATI Github