간단한 Chrome 확장 프로그램을 만드는 방법

Chrome 확장 프로그램을 만드는 것은 매우 간단한 과정입니다. 완료되면 컴퓨터에서 이를 사용하여 브라우저 작동 방식을 향상시킬 수 있습니다.

확장 프로그램이 완전히 작동하기 전에 브라우저에 필요한 몇 가지 기본 구성 요소가 있습니다. 사용자 지정 확장 프로그램 을 업로드하거나 다른 사람과 공유할 필요 없이 Chrome 에서 작동하도록 하는 방법을 포함하여 아래에서 이 모든 것을 살펴보겠습니다 .

복잡한 Chrome 확장 프로그램을 빌드하는 것은 아래에서 볼 수 있는 것보다 훨씬 더 자세한 프로세스이지만 일반적인 프로세스는 동일합니다. 지금 바로 사용할 수 있는 Chrome(Chrome) 확장 프로그램 을 만드는 방법을 배우려면 계속 읽으 세요.

팁(Tip) : 자신의 확장 프로그램이 얼마나 멋진지 확인하려면 다음과 같은 놀라운 Chrome 확장 프로그램(these amazing Chrome extensions) 을 확인하세요 .

Chrome 확장 프로그램을 만드는 방법

이 가이드를 사용 하여 즐겨찾는 웹사이트를 나열 하는 간단한 Chrome 확장 프로그램을 만들 수 있습니다. (Chrome)완전히 사용자 정의할 수 있으며 업데이트하기가 정말 쉽습니다.

해야 할 일:

  • 확장자를 구성하는 모든 파일을 저장할 폴더를 만드십시오.
  • 이 확장에 필요한 기본 파일 ( manifest.json , popup.html , background.html , styles.css )을 만듭니다.
  • 텍스트 편집기에서 popup.html(popup.html) 을 열고 다음을 모두 거기에 붙여넣고 완료되면 저장해야 합니다.
<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Favorite Sites</title>
      <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
<body>
   <ul id="myUL">
      <li><a href="https://helpdeskgeek.com/" target="_blank">Help Desk Geek</a></li>
      <li><a href="https://www.online-tech-tips.com/" target="_blank">Online Tech Tips</a></li>
      <li><a href="https://thebackroomtech.com/" target="_blank">The Back Room Tech</a></li>
   </ul>
</body>
</html>

링크 와 링크 텍스트를 자유롭게 편집하거나 (Feel)Chrome 확장 프로그램을 우리와 똑같은 방식 으로 만들고 싶다면 모든 것을 그대로 유지하세요.

  • 텍스트 편집기에서 manifest.json(manifest.json) 을 열고 다음을 복사하여 붙여넣습니다.

{
“update_url”: “https://clients2.google.com/service/update2/crx”,

"manifest_version": 2,
"이름": "즐겨찾기 사이트", ( “name”: “Favorite Sites”,)
"설명": "내가 즐겨찾는 모든 웹사이트.", ( “description”: “All my favorite websites.”,)
"버전": "1.0", ( “version”: “1.0”,)
"아이콘": { ( “icons”: {)
"16": "icon.png",
“32”: “icon.png”,
“48”: “icon.png”,
“128”: “icon.png”
},

   "배경": {  (   “background”: { )
        "페이지":"background.html" (        “page”:”background.html”)
},

    “browser_action” : {
        “default_icon” : “icon.png”,
        “default_title” : “즐겨찾는 사이트”, (        “default_title” : “Favorite Sites”,)
        “default_popup”: “popup.html”
    }
}

이 코드의 식용 가능한 영역에는 name , description , default_title 이 있습니다.

  • styles.css 를 열고 다음 코드를 붙여넣습니다. 팝업 메뉴를 더욱 보기 좋게 꾸미고 사용하기 쉽도록 꾸미는 것입니다.

#myUL {
목록 스타일 유형: 없음; (list-style-type: none;)
   패딩: 0; (   padding: 0;)
   여백: 0; (   margin: 0;)
   너비: 300px; (   width: 300px;)
}

#myUL li a {
  border: 1px solid #ddd;
  여백 상단: -1px; (  margin-top: -1px;)
  background-color: #f6f6f6;
  패딩: 12px; (  padding: 12px;)
  텍스트 장식: 없음; (  text-decoration: none;)
  글꼴 크기: 18px; (  font-size: 18px;)
  검정색; (  color: black;)
  디스플레이: 블록; (  display: block;)
  글꼴 패밀리: 'Noto Sans', sans-serif; (  font-family: ‘Noto Sans’, sans-serif;)
}

#myUL li a:hover:not(.header) {
   background-color: #eee;
}

CSS 파일 에서 변경할 수 있는 것이 많습니다 . Chrome 확장 프로그램을 만든 후 원하는 대로 맞춤설정할 수 있도록 이 옵션을 사용해 보세요.

  • (Create)확장에 대한 아이콘을 만들고 이름을 icon.png 로 지정(icon.png) 합니다 . Chrome 확장 프로그램 폴더 에 넣습니다 . 위의 코드에서 볼 수 있듯이 16×16 픽셀, 32×32 등의 크기에 대해 별도의 아이콘을 만들 수 있습니다.

팁: (Tip: )Google에는 (Google has more information)Chrome 확장 프로그램 만들기에 대한 추가 정보가 있습니다. 여기에 표시된 간단한 단계를 넘어서는 다른 예와 고급 옵션이 있습니다.

Chrome 에 사용자 지정 확장 프로그램(Custom Extension) 을 추가하는 방법

이제 Chrome 확장 프로그램을 만들었으므로 방금 만든 모든 파일을 실제로 사용할 수 있도록 브라우저에 추가할 차례입니다. 맞춤 확장 프로그램을 설치하려면 일반 Chrome 확장 프로그램을 설치하는 방법(how you’d install a normal Chrome extension) 과 다른 절차가 필요합니다 .

  • Chrome 메뉴에서 추가 도구(More tools ) > 확장 프로그램(Extensions) 으로 이동합니다 . 또는 주소 표시줄에 chrome://extensions/
  • 아직 선택하지 않은 경우 개발자 모드(Developer mode) 옆에 있는 버튼을 선택합니다. 이렇게 하면 고유한 Chrome(Chrome) 확장 프로그램 을 가져올 수 있는 특수 모드가 켜집니다 .

  • 해당 페이지 상단의 압축 해제(Load unpacked ) 버튼을 사용 하여 위의 1단계(Step 1) 에서 만든 폴더를 선택합니다 .

  • 프롬프트가 표시되면 수락(Accept) 하십시오. 그렇지 않으면 맞춤 제작된 Chrome 확장 프로그램이 브라우저의 오른쪽 상단에 있는 다른 확장 프로그램과 함께 표시됩니다.

Chrome 확장 프로그램 수정

이제 Chrome 확장 프로그램을 사용할 수 있으므로 변경하여 나만의 확장 프로그램으로 만들 수 있습니다. 

styles.css 파일은 확장자가 표시되는 방식을 제어하므로 전체 목록 스타일을 조정하고 글꼴 색상이나 유형을 변경할 수 있습니다. W3Schools 는 (W3Schools)CSS 로 할 수 있는 모든 다양한 작업에 대해 배울 수 있는 최고의 리소스 중 하나입니다 .

웹사이트가 나열된 순서를 바꾸거나 더 많은 사이트를 추가하거나 기존 사이트를 제거하려면 popup.html 파일을 편집하십시오. URL 과 이름 에 대한 편집 내용만 유지하십시오 . <li> 및 <html> 과 같은 다른 모든 문자 는 필수이며 변경해서는 안 됩니다. W3Schools의 HTML Tutorial(HTML Tutorial on W3Schools) 은 해당 언어에 대해 자세히 알아볼 수 있는 좋은 장소입니다.



명식 이

About the author

안녕! 제 이름은 하드웨어 해커입니다. 저는 10년 이상의 컴퓨터 수리 및 개조 경험이 있습니다. 노트북에서 태블릿, 스마트 TV에 이르기까지 거의 모든 것을 고칠 수 있습니다. 내 기술을 통해 고객이 문제를 빠르고 효율적으로 해결하도록 도울 수 있습니다. 내 블로그는 사람들이 올바른 도구를 사용하여 컴퓨터와 가전제품을 수리하는 방법을 배울 수 있도록 돕는 데 전념하고 있습니다. 그리고 내 Facebook 페이지는 컴퓨터와 관련된 모든 것에 대한 팁, 트릭 및 통찰력을 공유하는 곳입니다!


Related posts