브라우저 확장 - 새 탭 확장

8275 단어 beginnershtmljavascriptwebdev
뷰와 사용자 지정 테마가 없는 첫 번째 확장을 이미 살펴봤습니다.

이제 새 탭 확장을 만드는 방법을 살펴보겠습니다.
이것의 기본 아이디어는 새 탭을 우리가 만든 웹 페이지로 대체한다는 것입니다.

결과는 다음과 같은 새 탭입니다.


새 탭 확장 설정



시작하려면 먼저 새 폴더를 만들고 해당 폴더로 이동해야 합니다.

mkdir new-tab-extension && cd new-tab-extension


이제 좋아하는 편집기에서 프로젝트를 엽니다.

가장 먼저 추가할 것은 manifest.json 입니다. 이것은 항상 모든 브라우저 확장의 기본 진입점입니다.

{
  "manifest_version": 3,
  "version": "1.0",
  "name": "New Tab Extension",
  "description": "A demo first new tab experience",
  "action": {
    "default_icon": "icons/icon-48.png"
  },
  "icons": {
    "48": "icons/icon-48.png"
  },
  "chrome_url_overrides" : {
    "newtab": "new-tab.html"
  }
}


이를 매니페스트 버전 3으로 정의하고 필요에 따라 세부 정보를 입력했습니다.

여기서 주요 차이점은 chrome_url_overrides 에 있습니다.
일부 기본 브라우저 동작을 무시하고 싶다고 말할 수 있습니다.

이 예에서는 newtab를 덮어써서 new-tab.html라는 파일을 엽니다.
이것은 우리가 만들고 우리 자신의 것으로 만들 파일입니다.

프로젝트의 루트에 new-tab.html 파일을 추가합니다.
다음 기본 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>DDT New Tab</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
  </head>
  <body>
    <h1>Hello world 👋</h1>
  </body>
</html>


원하는 만큼 확장할 수 있습니다.

보시다시피 스타일시트에 연결할 수도 있습니다.css 디렉토리에 새 스타일시트를 추가했습니다.
파일 내에서 기본 재설정을 수행하고 페이지의 텍스트를 중앙에 배치합니다.

*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html,
body {
  height: 100%;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: grid;
  place-items: center;
  background-color: rgb(238 242 255);
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
h1 {
  font-size: 10vmin;
  color: rgb(218 0 96);
}


확장 테스트



확장 기능을 테스트하지 않고 상점에 게시하고 싶지 않으므로 로컬에서 시도하는 데 무엇이 필요한지 살펴보겠습니다.

더 빠른 인터페이스를 제공하는 Chrome을 선호합니다.

Chrome에서 플러그인 버튼을 클릭하고 해당 페이지를 엽니다.



다음으로 개발자 모드를 켭니다. 압축을 푼 확장 프로그램을 로드하는 옵션이 있는 다른 메뉴가 나타납니다.

압축을 푼 로드를 클릭하고 new-tab-extension 폴더로 이동합니다.

Chrome은 새 탭을 덮어쓰고 유지할지 여부를 알려줍니다.

GitHub에서 이 확장 프로그램을 다운로드하여 직접 사용해 볼 수도 있습니다.

읽어주셔서 감사합니다. 연결해 봅시다!



제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나
Django 양식 입력에 대한 사용자 정의 CSS
Spring Boot를 사용하는 AWS AppConfig

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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