브라우저에 이상한 기능이 좀 있었으면 좋겠어요. 간단한 확장으로 추가할 수 있을까요? 존재하지 않지만 직접 작성하는 것은 쉬울 것 같죠?
저는 며칠 전부터 그런 생각을 했어요. 내 생각이 완전히 틀린 것은 아니지만 개발 과정 중 일부는 예상보다 시간이 좀 더 걸렸습니다. 어렵다고 말하지는 않겠지만, 사용 가능한 문서를 사용하여 알아내는 것이 오히려 어렵습니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

C 및 JavaScript는 WebAssembly를 통한 상호 운용성을 달성합니다. 1) C 코드는 WebAssembly 모듈로 컴파일되어 컴퓨팅 전력을 향상시키기 위해 JavaScript 환경에 도입됩니다. 2) 게임 개발에서 C는 물리 엔진 및 그래픽 렌더링을 처리하며 JavaScript는 게임 로직 및 사용자 인터페이스를 담당합니다.

JavaScript는 웹 사이트, 모바일 응용 프로그램, 데스크탑 응용 프로그램 및 서버 측 프로그래밍에서 널리 사용됩니다. 1) 웹 사이트 개발에서 JavaScript는 HTML 및 CSS와 함께 DOM을 운영하여 동적 효과를 달성하고 jQuery 및 React와 같은 프레임 워크를 지원합니다. 2) 반응 및 이온 성을 통해 JavaScript는 크로스 플랫폼 모바일 애플리케이션을 개발하는 데 사용됩니다. 3) 전자 프레임 워크를 사용하면 JavaScript가 데스크탑 애플리케이션을 구축 할 수 있습니다. 4) node.js는 JavaScript가 서버 측에서 실행되도록하고 동시 요청이 높은 높은 요청을 지원합니다.

Python은 데이터 과학 및 자동화에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 데이터 처리 및 모델링을 위해 Numpy 및 Pandas와 같은 라이브러리를 사용하여 데이터 과학 및 기계 학습에서 잘 수행됩니다. 2. 파이썬은 간결하고 자동화 및 스크립팅이 효율적입니다. 3. JavaScript는 프론트 엔드 개발에 없어서는 안될 것이며 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축하는 데 사용됩니다. 4. JavaScript는 Node.js를 통해 백엔드 개발에 역할을하며 전체 스택 개발을 지원합니다.

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

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

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

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

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


핫 AI 도구

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

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

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

Clothoff.io
AI 옷 제거제

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

인기 기사

뜨거운 도구

Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기

DVWA
DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

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

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

SublimeText3 영어 버전
권장 사항: Win 버전, 코드 프롬프트 지원!
