4단계로 Chrome 확장 프로그램 만들기

3462 단어
이 기사에서는 간단한 새 탭 Chrome 확장 프로그램에 대한 설정을 만드는 방법을 보여 드리겠습니다.
  • 새 폴더를 만듭니다.
  • 이 폴더에서 manifest.json 파일과 index.html 파일을 만들어야 합니다.

    • {
  "manifest_version": 2,
  "name": "Name of your extention",
  "version": "0.1.0",
  "chrome_url_overrides": {
    "newtab": "index.html"
  }
}




    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Name of your extention</title>
  </head>
  <body>
    <p>Hello world!</p>
  </body>
</html>


  • Chrome 브라우저에서 chrome://extensions/로 이동하여 '개발자 모드'를 켜고 오른쪽 상단에서 개발자 모드를 켭니다.
  • 왼쪽의 '압축 풀기' 버튼을 클릭하고 방금 만든 파일이 들어 있는 새로 만든 폴더를 선택합니다.

    • 이제 새 탭을 열면 Hello world 페이지가 표시됩니다! 🎉



    작동 방식에 만족할 때까지 창의력을 발휘하고 사용자 정의하십시오.

    다음 단계는 확장 프로그램을 Chrome 웹 스토어에 업로드하는 것입니다. 곧 그 방법에 대한 기사를 작성할 예정이니 팔로우 부탁드립니다!

    이것은 내 첫 번째 블로그 게시물입니다. 팁이나 피드백이 있으면 아래에 알려주세요.

    읽어 주셔서 감사합니다. :)

    Header photo by Alvarado on Unsplash

    MojoDatabase 소스 학습의 객체 매핑
    VueJS 팁 : VueJS로 CSS 애니메이션 재생

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage