Chrome 확장 프로그램 - 환경 설정
브라우저에 이상한 기능이 좀 있었으면 좋겠어요. 간단한 확장으로 추가할 수 있을까요? 존재하지 않지만 직접 작성하는 것은 쉬울 것 같죠?
저는 며칠 전부터 그런 생각을 했어요. 내 생각이 완전히 틀린 것은 아니지만 개발 과정 중 일부는 예상보다 시간이 좀 더 걸렸습니다. 어렵다고 말하지는 않겠지만, 사용 가능한 문서를 사용하여 알아내는 것이 오히려 어렵습니다. API 문서, 핵심 개념 등이 개발자.chrome.com에 아주 잘 설명되어 있지만 저는 특정한 개발자 경험을 원했습니다.
- chrome 네임스페이스를 올바르게 입력한 TypeScript
- 코드를 여러 파일로 분할하고 필요한 항목 가져오기/내보내기
- 간단한 console.log 및/또는 디버거를 사용하여 코드 디버깅
- Manifest.json의 자동 완성
- 내 node_modules에 번들러와 인터넷의 절반이 없는 간단한 설정
- 브라우저에서 확장 프로그램을 업데이트하고 테스트하는 간단한 방법
좋든 나쁘든 내가 원하는 대로 설정을 할 수 있었습니다. 이번 포스팅에서는 일반적인 확장 개념을 간략하게 설명하고 개발 환경을 어떻게 설정했는지 보여드리겠습니다. 다음 한두 게시물에서는 간단한 페이지 오디오 확장의 구현 세부 사항에 중점을 둘 것입니다.
TLDR:
코드만 원하는 경우 상용구 저장소는 다음과 같습니다.
부두
/
크롬 확장 상용구
Chromium 확장 상용구
이 저장소는 크롬 확장 프로그램 개발의 출발점이 되는 것을 목표로 합니다.
최대한 미니멀하지만 다음 항목이 사전 구성되어 제공됩니다.
- manifest.json 자동 완성
- ts 폴더에서 dist 디렉토리로 TypeScript 변환
- chrome 네임스페이스 유형
- 내보내기 및 가져오기가 제대로 작동합니다(올바른 자동 가져오기 형식을 위한 VS Code 작업공간 설정 사용)
- 예제 매니페스트.json
즐거운 코딩하세요!
ℹ️ 저는 아래 모든 곳에서 Windows 11, MS Edge, VS Code 및 npm을 사용합니다 ℹ️
확장 프로그램에 대한 간략한 소개
일반 확장 개념에 대한 단기 집중 강좌부터 시작하겠습니다.
모든 확장 프로그램에는 이름, 버전, 필수 권한 및 사용된 파일을 정의하는 매니페스트.json 파일이 있습니다. 확장 프로그램은 다양한 방법으로 기능을 제공할 수 있습니다.
- 팝업을 통해 - 확장 팝업은 확장 프로그램 바에 있는 확장 프로그램 아이콘을 클릭하면 열리는 작은 창입니다.
- 콘텐츠 스크립트를 통해 - 웹사이트에 직접 삽입되고 DOM 액세스 권한이 있는 스크립트
- 백그라운드(서비스 워커) 스크립트를 통해 - 스크립트는 열려 있는 웹사이트와 독립적인 별도의 컨텍스트에서 실행됩니다
다른 방법도 있지만 이 가이드에서는 이 세 가지만 고수하겠습니다.
또 다른 중요한 개념은 메시지입니다. 일반적으로 위의 방법은 모두 서로 다른 제한 사항을 가지고 있으므로 결합해야 합니다. 예를 들어, 백그라운드 스크립트는 열린 탭에 의존하지 않으며 상태를 유지하는 데 더 유용할 수 있지만 웹 사이트의 DOM에 액세스할 수는 없습니다. 따라서 백그라운드 스크립트에서 일부 확장 프로그램 전체 데이터를 가져와 메시지를 사용하여 콘텐츠 스크립트에 전달한 다음 거기에서 웹사이트를 수정해야 할 수도 있습니다.
권한에 대한 몇 가지 기본 사항을 이해하는 것도 유용할 수 있습니다. 즉, Manifest.json이 올바른 권한을 지정하지 않으면 일부 API가 예상대로 작동하지 않습니다. 예를 들어 "탭" 권한을 지정하지 않으면 탭 API에서 반환된 개체에 URL 필드가 없습니다. 반면에 너무 많은 권한을 요청해서는 안 됩니다. 확장 프로그램이 공개될 경우 사용자는 너무 많은 것에 대한 액세스 권한을 부여하는 것에 대해 걱정할 수 있습니다.
간단한 확장 만들기
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" } }
확장 프로그램 활성화
확장 프로그램을 활성화하려면:
- edge://extensions/로 이동하세요.
- 왼쪽 사이드바에서 '개발자 모드'를 활성화합니다.
- "다른 상점의 확장 허용"이 필요할 수도 있습니다
- 확장 목록 위에서 "압축해제된 파일 로드"를 클릭하세요
- 확장 파일이 있는 폴더를 선택하세요
- 확장 프로그램이 목록에 표시되고 해당 아이콘이 확장 도구 모음에 표시되어야 합니까?
이제 아이콘을 클릭하면 "Hello world" 텍스트가 포함된 작은 팝업이 표시됩니다.
가장 중요한 기본 사항을 다룹니다. 좀 더 흥미로운 내용으로 넘어가 보겠습니다.
페이지-오디오 확장 환경 설정
매니페스트.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" }
설정이 올바르게 작동하는지 테스트하려면:
-
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" } }
로그인 후 복사로그인 후 복사 -
명령줄에서 다음을 실행하세요
npm install -g typescript
로그인 후 복사 dist 디렉터리가 생성되었고 거기에 background.js 파일이 나타나는지 확인하세요
ts/Background.ts 파일의 console.log 문자열에서 내용을 변경하고 저장하세요
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에서 자동화하려면:
- CTRL 키를 눌러 설정을 엽니다
- '작업공간' 탭으로 전환
- typescript.preferences.importModuleSpecifierEnding 검색
- ".js / .ts" 옵션으로 설정
이제 VS Code를 사용하여 자동으로 가져올 때마다 파일 이름에 .js가 추가됩니다.
제대로 작동하는지 테스트하려면:
-
다음 내용으로 ts/hello.ts 파일을 생성하세요
// package.json { "scripts": { "build": "tsc", "watch": "tsc -w" }, "devDependencies": { "chrome-types": "^0.1.327" } }
로그인 후 복사 ts/Background.ts에서 현재 console.log 줄을 제거하고 "hello"를 입력하기 시작하세요
VS Code는 Tab을 사용하여 제안을 수락한 후 이를 자동 완성하고 올바른 가져오기를 추가해야 합니다
-
최종적으로 파일은 다음과 같아야 합니다.
// 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는 좀 더 숨겨져 있습니다.
- edge://extensions/를 열고 아직 확장 프로그램을 로드하지 않았다면 로드하세요
- 목록에서 확장 프로그램을 찾으세요
-
"뷰 검사" 줄에서 "서비스 워커" 링크를 클릭하세요.
-
새 개발자 도구 창이 열리면 서비스 워커의 로그가 표시됩니다
- 로그가 표시되지 않으면 '뷰 검사' 아래의 '새로고침'을 클릭하세요.
타일 하단의 링크 3개도 매우 중요합니다
- "다시 로드" - 매니페스트.json에 대한 변경 사항을 포함하여 전체 확장을 새로 고칩니다. 다시 로드해야 하는 시기를 이해하려면 이 표를 확인하세요
- "제거" - 확장 프로그램을 삭제합니다
- "세부 정보" - 확장 프로그램에 대한 추가 정보(예: 권한)를 표시합니다
- (선택 사항) "오류" - 서비스 워커 설치 시 오류가 발생하면 이 링크가 나타나 오류 목록으로 이동합니다
휴. 시간이 조금 걸렸지만 마침내 환경이 훌륭하게 설정되었습니다. 이제부터 우리는
- npm run watch 실행(중지한 경우)
- ts 디렉토리에 코드를 작성하세요
- (선택 사항) 확장 프로그램 탭에서 확장 프로그램을 다시 로드하세요
그리고 확장 프로그램이 자동으로 업데이트됩니다! ⚙️
정교한 해킹 없이 자동으로 "새로고침"하는 방법에 대한 아이디어가 있다면 댓글로 알려주세요
요약
환경이 준비되어 있습니다!
- 자동 완성은 매니페스트.json에서 작동하므로 올바른 값이 무엇인지 추측할 필요가 없습니다
- TypeScript는 Chrome API를 올바르게 사용하는 데 도움이 됩니다
- 코드를 더 작은 논리적 파일로 분할할 수 있습니다
- ts 폴더에 작성한 코드는 자동으로 업데이트됩니다
- 서비스 워커용 개발 도구와 콘텐츠 스크립트를 어디서 찾을 수 있는지 알고 있습니다
다음 부분에서는 작은 "페이지 오디오" 확장 프로그램의 구현 세부 사항을 설명하겠습니다.
읽어주셔서 감사합니다!
위 내용은 Chrome 확장 프로그램 - 환경 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

Python은 부드러운 학습 곡선과 간결한 구문으로 초보자에게 더 적합합니다. JavaScript는 가파른 학습 곡선과 유연한 구문으로 프론트 엔드 개발에 적합합니다. 1. Python Syntax는 직관적이며 데이터 과학 및 백엔드 개발에 적합합니다. 2. JavaScript는 유연하며 프론트 엔드 및 서버 측 프로그래밍에서 널리 사용됩니다.

C/C에서 JavaScript로 전환하려면 동적 타이핑, 쓰레기 수집 및 비동기 프로그래밍으로 적응해야합니다. 1) C/C는 수동 메모리 관리가 필요한 정적으로 입력 한 언어이며 JavaScript는 동적으로 입력하고 쓰레기 수집이 자동으로 처리됩니다. 2) C/C를 기계 코드로 컴파일 해야하는 반면 JavaScript는 해석 된 언어입니다. 3) JavaScript는 폐쇄, 프로토 타입 체인 및 약속과 같은 개념을 소개하여 유연성과 비동기 프로그래밍 기능을 향상시킵니다.

웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.

실제 세계에서 JavaScript의 응용 프로그램에는 프론트 엔드 및 백엔드 개발이 포함됩니다. 1) DOM 운영 및 이벤트 처리와 관련된 TODO 목록 응용 프로그램을 구축하여 프론트 엔드 애플리케이션을 표시합니다. 2) Node.js를 통해 RESTFULAPI를 구축하고 Express를 통해 백엔드 응용 프로그램을 시연하십시오.

보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 2) 실행 프로세스 중에 엔진은 인라인 캐시 및 숨겨진 클래스와 같은 동적 최적화를 수행합니다. 3) 모범 사례에는 글로벌 변수를 피하고 루프 최적화, Const 및 Lets 사용 및 과도한 폐쇄 사용을 피하는 것이 포함됩니다.

Python과 JavaScript는 커뮤니티, 라이브러리 및 리소스 측면에서 고유 한 장점과 단점이 있습니다. 1) Python 커뮤니티는 친절하고 초보자에게 적합하지만 프론트 엔드 개발 리소스는 JavaScript만큼 풍부하지 않습니다. 2) Python은 데이터 과학 및 기계 학습 라이브러리에서 강력하며 JavaScript는 프론트 엔드 개발 라이브러리 및 프레임 워크에서 더 좋습니다. 3) 둘 다 풍부한 학습 리소스를 가지고 있지만 Python은 공식 문서로 시작하는 데 적합하지만 JavaScript는 MDNWebDocs에서 더 좋습니다. 선택은 프로젝트 요구와 개인적인 이익을 기반으로해야합니다.

개발 환경에서 Python과 JavaScript의 선택이 모두 중요합니다. 1) Python의 개발 환경에는 Pycharm, Jupyternotebook 및 Anaconda가 포함되어 있으며 데이터 과학 및 빠른 프로토 타이핑에 적합합니다. 2) JavaScript의 개발 환경에는 Node.js, VScode 및 Webpack이 포함되어 있으며 프론트 엔드 및 백엔드 개발에 적합합니다. 프로젝트 요구에 따라 올바른 도구를 선택하면 개발 효율성과 프로젝트 성공률이 향상 될 수 있습니다.

C와 C는 주로 통역사와 JIT 컴파일러를 구현하는 데 사용되는 JavaScript 엔진에서 중요한 역할을합니다. 1) C는 JavaScript 소스 코드를 구문 분석하고 추상 구문 트리를 생성하는 데 사용됩니다. 2) C는 바이트 코드 생성 및 실행을 담당합니다. 3) C는 JIT 컴파일러를 구현하고 런타임에 핫스팟 코드를 최적화하고 컴파일하며 JavaScript의 실행 효율을 크게 향상시킵니다.
