찾다

집 >웹 프론트엔드 >JS 튜토리얼 >Chrome 확장 프로그램 - 환경 설정

Chrome 확장 프로그램 - 환경 설정

DDD
DDD원래의
2025-01-04 15:51:39721검색

브라우저에 이상한 기능이 좀 있었으면 좋겠어요. 간단한 확장으로 추가할 수 있을까요? 존재하지 않지만 직접 작성하는 것은 쉬울 것 같죠?

저는 며칠 전부터 그런 생각을 했어요. 내 생각이 완전히 틀린 것은 아니지만 개발 과정 중 일부는 예상보다 시간이 좀 더 걸렸습니다. 어렵다고 말하지는 않겠지만, 사용 가능한 문서를 사용하여 알아내는 것이 오히려 어렵습니다. API 문서, 핵심 개념 등이 개발자.chrome.com에 아주 잘 설명되어 있지만 저는 특정한 개발자 경험을 원했습니다.

  • chrome 네임스페이스를 올바르게 입력한 TypeScript
  • 코드를 여러 파일로 분할하고 필요한 항목 가져오기/내보내기
  • 간단한 console.log 및/또는 디버거를 사용하여 코드 디버깅
  • Manifest.json의 자동 완성
  • 내 node_modules에 번들러와 인터넷의 절반이 없는 간단한 설정
  • 브라우저에서 확장 프로그램을 업데이트하고 테스트하는 간단한 방법

좋든 나쁘든 내가 원하는 대로 설정을 할 수 있었습니다. 이번 포스팅에서는 일반적인 확장 개념을 간략하게 설명하고 개발 환경을 어떻게 설정했는지 보여드리겠습니다. 다음 한두 게시물에서는 간단한 페이지 오디오 확장의 구현 세부 사항에 중점을 둘 것입니다.

TLDR:
코드만 원하는 경우 상용구 저장소는 다음과 같습니다.

Chrome extension - environment setup 부두 / 크롬 확장 상용구

Chromium 확장 상용구

이 저장소는 크롬 확장 프로그램 개발의 출발점이 되는 것을 목표로 합니다.

최대한 미니멀하지만 다음 항목이 사전 구성되어 제공됩니다.

  • manifest.json 자동 완성
  • ts 폴더에서 dist 디렉토리로 TypeScript 변환
  • chrome 네임스페이스 유형
  • 내보내기 및 가져오기가 제대로 작동합니다(올바른 자동 가져오기 형식을 위한 VS Code 작업공간 설정 사용)
  • 예제 매니페스트.json

즐거운 코딩하세요!


GitHub에서 보기


ℹ️ 저는 아래 모든 곳에서 Windows 11, MS Edge, VS Code 및 npm을 사용합니다 ℹ️

확장 프로그램에 대한 간략한 소개

Chrome extension - environment setup

일반 확장 개념에 대한 단기 집중 강좌부터 시작하겠습니다.

모든 확장 프로그램에는 이름, 버전, 필수 권한 및 사용된 파일을 정의하는 매니페스트.json 파일이 있습니다. 확장 프로그램은 다양한 방법으로 기능을 제공할 수 있습니다.

  • 팝업을 통해 - 확장 팝업은 확장 프로그램 바에 있는 확장 프로그램 아이콘을 클릭하면 열리는 작은 창입니다.
  • 콘텐츠 스크립트를 통해 - 웹사이트에 직접 삽입되고 DOM 액세스 권한이 있는 스크립트
  • 백그라운드(서비스 워커) 스크립트를 통해 - 스크립트는 열려 있는 웹사이트와 독립적인 별도의 컨텍스트에서 실행됩니다

다른 방법도 있지만 이 가이드에서는 이 세 가지만 고수하겠습니다.

또 다른 중요한 개념은 메시지입니다. 일반적으로 위의 방법은 모두 서로 다른 제한 사항을 가지고 있으므로 결합해야 합니다. 예를 들어, 백그라운드 스크립트는 열린 탭에 의존하지 않으며 상태를 유지하는 데 더 유용할 수 있지만 웹 사이트의 DOM에 액세스할 수는 없습니다. 따라서 백그라운드 스크립트에서 일부 확장 프로그램 전체 데이터를 가져와 메시지를 사용하여 콘텐츠 스크립트에 전달한 다음 거기에서 웹사이트를 수정해야 할 수도 있습니다.

권한에 대한 몇 가지 기본 사항을 이해하는 것도 유용할 수 있습니다. 즉, Manifest.json이 올바른 권한을 지정하지 않으면 일부 API가 예상대로 작동하지 않습니다. 예를 들어 "탭" 권한을 지정하지 않으면 탭 API에서 반환된 개체에 URL 필드가 없습니다. 반면에 너무 많은 권한을 요청해서는 안 됩니다. 확장 프로그램이 공개될 경우 사용자는 너무 많은 것에 대한 액세스 권한을 부여하는 것에 대해 걱정할 수 있습니다.

간단한 확장 만들기

Chrome extension - environment setup

https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world에서 영감을 얻었습니다

팝업에 일부 텍스트만 표시하는 매우 간단한 확장 기능을 사용하여 개발 워크플로의 핵심 개념을 이해하는 것부터 시작해 보겠습니다.

파일

우선 매니페스트.json 파일이 필요합니다.

// manifest.json
{
  "name": "Hello World",
  "description": "Shows Hello World text",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  }
}

이름, 설명, 버전 및 매니페스트_버전은 아마도 설명이 필요 없을 것입니다. action.default_popup은 확장 아이콘을 클릭하면 렌더링되는 HTML 파일의 경로입니다. default_icon은 확장 아이콘의 경로입니다. 두 경로 모두 매니페스트.json 위치를 기준으로 합니다.

이제 매니페스트.json과 동일한 디렉터리에 icon.png(예: 이 파일) 및 hello.html 파일을 추가합니다.
hello.html은 다음과 같습니다.

<!-- hello.html -->
<p>Hello world</p>

전체 디렉토리는 다음과 같아야 합니다.

// manifest.json
{
  "name": "Hello World",
  "description": "Shows Hello World text",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  }
}

확장 프로그램 활성화

확장 프로그램을 활성화하려면:

  1. edge://extensions/로 이동하세요.
  2. 왼쪽 사이드바에서 '개발자 모드'를 활성화합니다.
    • "다른 상점의 확장 허용"이 필요할 수도 있습니다
  3. 확장 목록 위에서 "압축해제된 파일 로드"를 클릭하세요
  4. 확장 파일이 있는 폴더를 선택하세요
  5. 확장 프로그램이 목록에 표시되고 해당 아이콘이 확장 도구 모음에 표시되어야 합니까?

이제 아이콘을 클릭하면 "Hello world" 텍스트가 포함된 작은 팝업이 표시됩니다.

가장 중요한 기본 사항을 다룹니다. 좀 더 흥미로운 내용으로 넘어가 보겠습니다.

Chrome extension - environment setup

페이지-오디오 확장 환경 설정

Chrome extension - environment setup

매니페스트.json의 자동 완성

manifest.json과 빈 디렉터리로 다시 시작하겠습니다.

manifest.json 파일을 작성할 때 자동 완성 기능이 있으면 정말 좋겠죠? 다행히 이는 잘 정의된 표준이며 https://json.schemastore.org/chrome-manifest에 JSON 스키마가 있습니다. 매니페스트.json 시작 부분의 "$schema" 키 아래에 필요합니다.

<!-- hello.html -->
<p>Hello world</p>

그리고 VS Code는 필드 이름을 제안하고 필수 필드가 누락된 경우 경고를 표시하여 즉시 도움을 주기 시작합니다. 굉장해요!?

설정을 테스트하기 위해 작동하도록 하려면 다음과 같이 매니페스트.json을 사용하세요.

.
├── hello.html
├── icon.png
└── manifest.json
  • 아이콘 - 확장 아이콘을 지정하는 다른 방법일 뿐입니다
  • 배경 섹션 - 서비스 워커 JS 파일의 경로와 해당 유형을 지정합니다. 코드는 나중에 내보내기 및 가져오기를 사용하므로 모듈입니다

타입스크립트

TypeScript를 사용하려면... 음, TypeScript가 필요합니다. 아직 설치되어 있지 않다면
부터 시작하세요. 

// manifest.json
{
    "$schema": "https://json.schemastore.org/chrome-manifest"
}

기본 구성

너무 복잡하지 않게 정리하기 위해 .ts 소스 파일을 ts 디렉토리에 보관하겠습니다. 트랜스파일러가 해당 파일을 가져와 dist 디렉토리에 .js 파일로 저장합니다.

이 내용은 다음 .tsconfig로 설명됩니다.

// manifest.json
{
    "$schema": "https://json.schemastore.org/chrome-manifest",
    "name": "Page Audio",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "icons": {
        "16": "icons/logo16x16.png",
        "32": "icons/logo32x32.png",
        "48": "icons/logo48x48.png",
        "128": "icons/logo128x128.png"
    },
    "background": {
        "service_worker": "dist/background.js",
        "type": "module"
    }
}

가장 중요한 비트는 컴파일러.rootDir 및 컴파일러.outDir입니다. 다른 필드는 다른 값을 가지거나 완전히 제거될 수 있습니다(적어도 일부).

이것이 기본 구성입니다. 일부 파일을 ts 디렉터리에 배치하고 루트 디렉터리에서 tsc를 실행하면 dist에 해당 .js 파일이 생성됩니다. 그러나 우리는 한 가지 중요한 부분, 즉 우리가 사용할 chrome 네임스페이스에 대한 유형을 놓치고 있습니다. 가장 간단한 해결책은 npm을 통해 추가하는 것입니다.

크롬 유형 추가

괄호만 사용하여 빈 package.json을 만듭니다.

// manifest.json
{
  "name": "Hello World",
  "description": "Shows Hello World text",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  }
}

명령줄에서 다음을 실행합니다.

<!-- hello.html -->
<p>Hello world</p>

또한 tsc build를 watch 모드에서 실행하기 위한 스크립트를 추가할 수도 있습니다. 최종 package.json은 다음과 같아야 합니다.

.
├── hello.html
├── icon.png
└── manifest.json

ℹ️ 귀하의 경우에는 크롬 버전이 더 높을 수도 있습니다. ℹ️

유형을 추가한 후에는 TypeScript에 유형을 알려야 합니다. 이렇게 하려면 .tsconfig.json을 업데이트하면 됩니다.

// manifest.json
{
    "$schema": "https://json.schemastore.org/chrome-manifest"
}

설정이 올바르게 작동하는지 테스트하려면:

  1. ts 폴더에 다음 내용으로 background.ts 파일을 생성하세요

    // manifest.json
{
    "$schema": "https://json.schemastore.org/chrome-manifest",
    "name": "Page Audio",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "icons": {
        "16": "icons/logo16x16.png",
        "32": "icons/logo32x32.png",
        "48": "icons/logo48x48.png",
        "128": "icons/logo128x128.png"
    },
    "background": {
        "service_worker": "dist/background.js",
        "type": "module"
    }
}

  2. 명령줄에서 다음을 실행하세요

    npm install -g typescript

  3. dist 디렉터리가 생성되었고 거기에 background.js 파일이 나타나는지 확인하세요

  4. ts/Background.ts 파일의 console.log 문자열에서 내용을 변경하고 저장하세요

  5. dist/Background.js가 자동으로 업데이트되는지 확인하세요.

만약 효과가 있다면 정말 대단합니다! 거의 모든 설정이 완료되었습니다 ?

디렉터리 구조가 다음과 유사한지 확인할 수도 있습니다.

// .tsconfig
{
    "compilerOptions": {
        "target": "ES6",
        "module": "ES6",
        "outDir": "./dist",
        "rootDir": "./ts",
        "strict": true,
    }
}

가져오기 및 내보내기

앞서 언급했듯이 코드를 더 작은 파일로 나누고 싶습니다. 이렇게 하려면 내보내기 및 가져오기가 올바르게 작동해야 합니다.

그 방향의 한 단계는 매니페스트.json의 service_worker를 "type": "module"로 지정하는 것이었습니다. 그러나 모듈 작업 시 TypeScript와 JavaScript 사이에는 한 가지 차이점이 있습니다. TypeScript는 가져올 때 파일 확장자가 필요하지 않지만 JavaScript는 필요합니다. 예를 들어 다음 가져오기는 다음과 같습니다.

// package.json
{
}

TS에서는 작동하지만 JS에는 필요합니다

npm i -D chrome-types

TS 트랜스파일러는 가져오기 경로에 대해 아무 작업도 수행하지 않습니다. 그리고 file.js에서 가져올 때 file.ts도 찾아야 한다는 것을 이해할 만큼 "스마트"합니다.

이 모든 것을 결합하면 TS도 JS 스타일 가져오기에 만족할 것이며 file.js에서 가져올 때 해당 TS 파일을 사용할 것입니다. 우리 해야 할 일은 TS 파일의 모든 가져오기에 .js 확장자가 있는지 확인하는 것입니다. VS Code에서 자동화하려면:

  1. CTRL 키를 눌러 설정을 엽니다
  2. '작업공간' 탭으로 전환
  3. typescript.preferences.importModuleSpecifierEnding 검색
  4. ".js / .ts" 옵션으로 설정

이제 VS Code를 사용하여 자동으로 가져올 때마다 파일 이름에 .js가 추가됩니다.

제대로 작동하는지 테스트하려면:

  1. 다음 내용으로 ts/hello.ts 파일을 생성하세요

    // package.json
{
    "scripts": {
        "build": "tsc",
        "watch": "tsc -w"
    },
    "devDependencies": {
        "chrome-types": "^0.1.327"
    }
}

  2. ts/Background.ts에서 현재 console.log 줄을 제거하고 "hello"를 입력하기 시작하세요

  3. VS Code는 Tab을 사용하여 제안을 수락한 후 이를 자동 완성하고 올바른 가져오기를 추가해야 합니다

  4. 최종적으로 파일은 다음과 같아야 합니다.

    // manifest.json
{
  "name": "Hello World",
  "description": "Shows Hello World text",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  }
}

가져오기는 .js 확장자로 끝납니다. dist/Background.js를 확인하면 확장 기능도 있으므로 모든 것이 올바르게 작동하게 됩니다.

동일한 단계에 있는지 확인하려면 디렉토리 구조를 비교해 보세요.

<!-- hello.html -->
<p>Hello world</p>

서비스 워커를 위한 개발 도구

괜찮습니다. 우리는 괜찮은 개발 경험을 갖고 있습니다. 몇 가지 console.log 호출도 추가했는데... 지금은 어디서 찾을 수 있나요?

컨텐츠 스크립트 내에 console.log를 추가하는 경우 개발자 도구를 열면 바로 거기에 있습니다. 컨텐츠 스크립트는 삽입된 페이지와 동일한 컨텍스트에서 작동하기 때문입니다. 그러나 백그라운드 스크립트의 console.log는 좀 더 숨겨져 있습니다.

  1. edge://extensions/를 열고 아직 확장 프로그램을 로드하지 않았다면 로드하세요
  2. 목록에서 확장 프로그램을 찾으세요

  3. "뷰 검사" 줄에서 "서비스 워커" 링크를 클릭하세요.

    Chrome extension - environment setup

  4. 새 개발자 도구 창이 열리면 서비스 워커의 로그가 표시됩니다

    • 로그가 표시되지 않으면 '뷰 검사' 아래의 '새로고침'을 클릭하세요.

타일 하단의 링크 3개도 매우 중요합니다

  • "다시 로드" - 매니페스트.json에 대한 변경 사항을 포함하여 전체 확장을 새로 고칩니다. 다시 로드해야 하는 시기를 이해하려면 이 표를 확인하세요
  • "제거" - 확장 프로그램을 삭제합니다
  • "세부 정보" - 확장 프로그램에 대한 추가 정보(예: 권한)를 표시합니다
  • (선택 사항) "오류" - 서비스 워커 설치 시 오류가 발생하면 이 링크가 나타나 오류 목록으로 이동합니다

휴. 시간이 조금 걸렸지만 마침내 환경이 훌륭하게 설정되었습니다. 이제부터 우리는

  1. npm run watch 실행(중지한 경우)
  2. ts 디렉토리에 코드를 작성하세요
  3. (선택 사항) 확장 프로그램 탭에서 확장 프로그램을 다시 로드하세요

그리고 확장 프로그램이 자동으로 업데이트됩니다! ⚙️

정교한 해킹 없이 자동으로 "새로고침"하는 방법에 대한 아이디어가 있다면 댓글로 알려주세요

요약

Chrome extension - environment setup

환경이 준비되어 있습니다!

  • 자동 완성은 매니페스트.json에서 작동하므로 올바른 값이 무엇인지 추측할 필요가 없습니다
  • TypeScript는 Chrome API를 올바르게 사용하는 데 도움이 됩니다
  • 코드를 더 작은 논리적 파일로 분할할 수 있습니다
  • ts 폴더에 작성한 코드는 자동으로 업데이트됩니다
  • 서비스 워커용 개발 도구와 콘텐츠 스크립트를 어디서 찾을 수 있는지 알고 있습니다

다음 부분에서는 작은 "페이지 오디오" 확장 프로그램의 구현 세부 사항을 설명하겠습니다.

읽어주셔서 감사합니다!

위 내용은 Chrome 확장 프로그램 - 환경 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript typescript json chrome html npm edge String if switch for while select format Directory auto using public Namespace finally JS console dom this location background table github windows idea https everything Access Other
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Big O 표기법을 사용하여 JavaScript의 배열 및 객체 성능에 대한 심층 분석다음 기사：Big O 표기법을 사용하여 JavaScript의 배열 및 객체 성능에 대한 심층 분석

관련 기사

더보기