HTML, CSS, Javascript로 크롬 시작화면 개발하기

Chrome 브라우저를 사용하는 사람이라면, Chrome Extension(크롬 익스텐션)에 대해 알고 계실겁니다.

 

크롬 익스텐션은 구글 크롬의 확장 프로그램으로, 크롬 브라우저를 더욱 편리하게 사용할 수 있도록 도와주는데요,

html, css, javascript를 사용할 줄 아는 분이라면, 아주 간단하게 '크롬 시작화면'을 개발해 사용할 수 있습니다.

 

크롬을 사용하면서, 조금 더 사용하기 편한 북마크가 있으면 좋겠다! 라고 생각을 했었기 때문에

이렇게 오른쪽 사이드바에 자주 사용하고 있는 웹 사이트들을 저장해놓고 사용하고 있습니다.

 

 

내가 만든 웹 페이지를 이렇게 크롬 익스텐션의 시작 페이지로 사용하고 싶다면,

코드를 작성한 폴더 안에 manifest.json 이라는 파일을 추가하고, 아래의 내용을 작성해주면 쉽게 사용할 수 있습니다.

{
    "name": "newtab",
    "description": "Made by Hyobin",
    "version": "1.0",
    "manifest_version": 3,
    "icons": {
        "16": "icons/icon16.png",
        "32": "icons/icon32.png",
        "48": "icons/icon48.png",
        "128": "icons/icon128.png"
    },
    "chrome_url_overrides": {
        "newtab": "index.html"
    },
    "host_permissions": ["<all_urls>"]
}

 

필요한 아이콘들을 사이즈별로 등록하고, 시작화면으로 열릴 파일을 설정해준 다음, 권한을 모든 권한으로 설정해주면 되는데요,
크롬 익스텐션에 웹 페이지를 등록하는 더 자세한 방법은 아래의 링크에서 확인할 수 있습니다.

내가 만든 웹 페이지 크롬 익스텐션으로 설정하기

 

사진과 같은 '나만의 크롬 시작화면'을 직접! 만들어보고 싶으신 분들은

아래의 링크를 통해 할인된 가격으로 강의를 수강하실 수 있습니다 😊

 

쿠폰 번호 : 17565-0d5d628aaffa
강의 링크 : https://inf.run/7AC37