HTML, CSS 및 JS로 나만의 Google 크롬 확장 프로그램을 만드세요.
이 게시물에서는 처음부터 Chrome 확장 프로그램을 만드는 방법을 보여 드리겠습니다.
크롬 확장 프로그램이란 무엇입니까?
크롬 확장 프로그램 또는 플러그인은 브라우저에 기능을 추가하는 프로그램입니다. HTML, CSS 및 JavaScript와 같은 웹 기술을 사용하여 쉽게 만들 수 있습니다.
프로젝트 생성
계속해서 CodePen playground을 사용하여 새 프로젝트를 초기화하거나 src 폴더 아래에 다음 파일 구조를 사용하여 Visual Studio Code에서 자신의 프로젝트를 설정하십시오.
Developer Launcher
|- Assets
|- css
|- styles.css
|- images
|- logo16.png
|- logo128.png
|- logo150.png
|- /src
|- popup.html
|- popup.js
|- manifest.json
파트 1: HTML 파일 수정.
index.html을 편집하여 시작하고 다음 코드로 바꿉니다.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Developer Launcher</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:400,700" type="text/css">
<link href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<div class="modal-header">
<h1 class="logo">
<img src="./assets/images/logo128.png" alt="Developer Launcher" class="logo-icon"> Developer Launcher <span class="version">(1.0.0)</span>
</h1>
</div>
<div class="modal-content">
<p> Early Access to HR Media 🐱💻!</p>
</div>
<div class="modal-icons">
<div class="flex-container">
<div class="flex">
<a href="" target="_blank"> <i class="fab fa-github fa-animated"></i></a>
</div>
<div class="flex">
<a href="" target="_blank"> <i class="fab fa-twitter fa-animated"></i></a>
</div>
<div class="flex">
<a href="" target="_blank"> <i class="fab fa-linkedin fa-animated"></i></a>
</div>
<div class="flex">
<a href="" target="_blank"> <i class="fab fa-dev fa-animated"></i></a>
</div>
<div class="flex">
<a href="" target="_blank"> <i class="fab fa-medium fa-animated"></i></a>
</div>
<div class="flex">
<a href="" target="_blank"> <i class="fab fa-dribbble fa-animated"></i></a>
</div>
<div class="flex">
<a href="" target="_blank"> <i class="fab fa-codepen fa-animated"></i></a>
</div>
<div class="flex">
<a href="" target="_blank"> <i class="fab fa-artstation fa-animated"></i></a>
</div>
</div>
<div id="modal-footer">
<a href="" target="_blank"><p>MIT © HR</p></a>
</div>
</div>
</body>
<script src="popup.js"></script>
</html>
참고 💡 -
logo16.svg
옆의 숫자는 16x16 치수 등을 나타냅니다.파트 2: CSS 파일 수정.
다음 단계는 다음 스타일을 추가하고 style.css 파일을 완성하는 것입니다.
html,body{
font-family: 'Poppins', sans-serif;
font-size: 16px;
margin: 0px;
min-height: 180px;
padding: 0;
width: 384px;
}
h1{
font-family: 'Roboto', sans-serif;
font-size: 22px;
font-weight: 400;
margin: 0;
color: #000;
text-align: center;
}
img{
width: 30px;
}
p{
text-align: center;
}
.modal-header{
align-items: center;
border-bottom: 0.5px solid #231955;
}
.modal-content{
padding: 0 22px;
}
.modal-icons{
border-top: 0.5px solid #231955;
height: 50px;
width: 100%;
}
.logo{
padding: 16px;
}
.logo-icon{
vertical-align: text-bottom;
margin-right: 12px;
}
.version{
color: #444;
font-size: 18px;
}
a:link, a:visited{
color: #231955;
outline: 0;
text-decoration: none;
}
.flex-container{
display: flex;
justify-content: space-between;
padding: 10px 22px;
}
.flex {
opacity: 0.4;
transition: opacity 0.2s ease-in-out;
width: 120px;
}
.flex:hover{
opacity: 0.4;
}
i{
font-size: 30px;
}
#modal-footer{
background-color: rgba(0,0,0,0.6);
font-size: 15px;
font-weight: bold;
text-align: center;
}
#modal-footer a{
color: #ffffff;
}
.fa-animated {
position: relative;
padding-top: 15px;
padding-bottom: 15px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
cursor: pointer;
vertical-align: bottom;
}
.fa-animated:hover {
padding-top: 0px;
padding-bottom: 30px;
}
.fa-animated::after {
content : "";
position: absolute;
left: 0%;
right: 0%;
bottom: 0;
height: 0px;
width: 100%;
border-bottom: 2px solid #FF0063;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
border-radius: 90px;
}
.fa-animated:hover::after {
left: 20%;
right: 20%;
width: 60%;
border-bottom: 1px solid #FF0063;
}
3부: Manifest.Json 파일 수정
매니페스트는 확장에 대한 모든 메타 정보를 포함하는 JSON 파일입니다.
크롬 확장 프로그램을 만들려면 매니페스트 파일이 필요합니다.
{
"manifest_version": 3,
"name": "Developer Launcher",
"description": "Developers don't talk much. Their code does all the talking. So here's a google chrome extension for developers that want to connect their preferred social media links from the web.",
"version" : "1.0.0",
"icons" : {"128": "./assets/images/logo128.png"},
"action": {
"default_icon": "./assets/images/logo16.png",
"default_popup": "./popup.html"
},
"permissions": ["activeTab"]
}
참고 💡 - manifest_version 3이 최신 버전이므로 chrome developer docs을 확인하세요.
전개
마지막으로 다음과 같이 크롬 개발자 모드에서 확장 프로그램을 로드할 수 있습니다.
참고 💡 - 압축을 푼 로드 버튼을 클릭한 다음 확장 경로 폴더 경로를 선택해야 합니다.
이제 다음이 표시됩니다.
Reference
이 문제에 관하여(HTML, CSS 및 JS로 나만의 Google 크롬 확장 프로그램을 만드세요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/hr21don/create-your-own-google-chrome-extension-with-html-css-and-js-2d2h텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)