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

JavaScript 문자열 교체 방법 및 FAQ에 대한 자세한 설명 이 기사는 JavaScript에서 문자열 문자를 대체하는 두 가지 방법 인 내부 JavaScript 코드와 웹 페이지의 내부 HTML을 탐색합니다. JavaScript 코드 내부의 문자열을 교체하십시오 가장 직접적인 방법은 대체 () 메소드를 사용하는 것입니다. str = str.replace ( "find", "replace"); 이 메소드는 첫 번째 일치 만 대체합니다. 모든 경기를 교체하려면 정규 표현식을 사용하고 전역 플래그 g를 추가하십시오. str = str.replace (/fi

간단한 자바 스크립트 함수는 날짜가 유효한지 확인하는 데 사용됩니다. 기능 isValidDate (s) { var 비트 = s.split ( '/'); var d = 새로운 날짜 (비트 [2]/'비트 [1]/'비트 [0]); return !! (d && (d.getmonth () 1) == 비트 [1] && d.getDate () == 숫자 (비트 [0]); } //시험 var

이 기사에서는 jQuery를 사용하여 DOM 요소의 내부 마진 및 마진 값, 특히 요소의 외부 마진 및 내부 마진의 특정 위치를 얻고 설정하는 방법에 대해 설명합니다. CSS를 사용하여 요소의 내부 및 외부 마진을 설정할 수는 있지만 정확한 값을 얻는 것이 까다로울 수 있습니다. // 설정 $ ( "div.header"). css ( "margin", "10px"); $ ( "Div.Header"). CSS ( "패딩", "10px"); 이 코드는 생각할 수 있습니다

이 기사는 10 개의 탁월한 jQuery 탭과 아코디언을 탐구합니다. 탭과 아코디언의 주요 차이점은 콘텐츠 패널이 표시되고 숨겨진 방식에 있습니다. 이 10 가지 예를 살펴 보겠습니다. 관련 기사 : 10 JQuery Tab 플러그인

웹 사이트의 역학 및 시각적 매력을 높이기 위해 10 개의 탁월한 jQuery 플러그인을 발견하십시오! 이 선별 된 컬렉션은 이미지 애니메이션에서 대화식 갤러리에 이르기까지 다양한 기능을 제공합니다. 이 강력한 도구를 탐색합시다. 관련 게시물 : 1

HTTP-Console은 HTTP 명령을 실행하기위한 명령 줄 인터페이스를 제공하는 노드 모듈입니다. 웹 서버, 웹 서비스에 대해 만들어 졌는지 여부에 관계없이 HTTP 요청과 함께 어떻게 진행되고 있는지 정확하게 보는 데 유용합니다.

이 튜토리얼은 사용자 정의 Google 검색 API를 블로그 또는 웹 사이트에 통합하는 방법을 보여 주며 표준 WordPress 테마 검색 기능보다보다 세련된 검색 경험을 제공합니다. 놀랍게도 쉽습니다! 검색을 Y로 제한 할 수 있습니다

다음 jQuery 코드 스 니펫은 DIV 내용이 컨테이너 요소 영역을 초과 할 때 스크롤 바를 추가하는 데 사용될 수 있습니다. (데모 없음, FireBug에 직접 복사하십시오) // d = 문서 // w = 창 // $ = jQuery var contentArea = $ (this), wintop = contentArea.scrolltop (), docheight = $ (d) .height (), winheight = $ (w) .height (), divheight = $ ( '#c


핫 AI 도구

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

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

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

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

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

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

맨티스BT
Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

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

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