브라우저 확장 - 첫 번째 확장

different types of extensions을 배웠으니 이제 첫 번째 브라우저 확장을 만드는 방법을 살펴보겠습니다.

이 글에서는 각 페이지의 본문 색상을 분홍색으로 변경하는 확장 프로그램을 만들어 보겠습니다.
분홍색은 훌륭한 색이기 때문입니다.

브라우저 확장 와이어프레임

브라우저 확장 기능은 매니페스트라는 것을 통해 작동합니다.
이것은 확장에 대한 모든 특정 데이터를 포함하는 JSON 파일입니다.

확장 프로그램의 메타데이터와 확장 프로그램이 실행해야 하는 실제 콘텐츠를 명시합니다.

새 폴더를 만들고 탐색해 보겠습니다.

mkdir pinkify-extension && cd pinkify-extension

다음 단계는 이 작업의 두뇌가 될 manifest.json 파일을 만드는 것입니다.

내부에 다음 정보를 입력하십시오.

{
  "manifest_version": 2,
  "name": "Pinkify",
  "version": "1.0",
  "description": "Convert any page to a pinkish page 💖",
  "icons": {
    "48": "icons/pinkify-48.png"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["pinkify.js"]
    }
  ]
}

보시다시피 애플리케이션에 대한 많은 데이터가 포함되어 있습니다.

manifest_version : 사용할 매니페스트 유형은 무엇입니까? 3개를 권장하지만 아직 Firefox에서는 지원하지 않으므로 2개를 사용합니다.

name : 내선 번호

version : 이 확장의 버전

description : 기능에 대한 간략한 설명

icons : 확장에 대해 여러 아이콘 파일을 추가할 수 있습니다

.

content_scripts : 실제 주입될 함수입니다. 모든 URL에 pinkify.js 스크립트를 추가합니다.

나중에 content_scripts에 대해 자세히 알아볼 것입니다.

루트 디렉터리에 샘플 48x48 픽셀 아이콘을 배치할 수 있습니다.

그런 다음 pinkify.js 라는 스크립트 파일을 추가하고 다음 코드 줄을 넣을 수 있습니다.

document.body.style.setProperty('background', '#FDF2F7');

이렇게 하면 본문 배경색이 연분홍으로 설정됩니다.

Note: I didn't add any overwrites, so if a page already sets the body color, it won't be activated.

확장 테스트

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

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

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



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

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



로드되면 다음과 같이 표시됩니다.



이제 google.com 또는 웹페이지로 이동하면 분홍색 배경이 활성화된 것을 볼 수 있습니다.



최초의 브라우저 확장 프로그램을 만드셨다니 놀랍습니다. 보시다시피 생각보다 어렵지 않습니다.

다음 기사에서는 좀 더 고급 확장 기능도 만들 것입니다.

다음GitHub repo에서 오늘의 코드를 찾을 수 있습니다.

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

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나