web extension starter

웹 확장 스타터

"브라우저에서 일단 실행"확장자를 빌드하려는 웹 확장 스타터

@abhijithvijayan에 의해 만든? @대담추

기부 : PayPal , Patreon

---

❤️ IT? Github 또는 그것에 대해 트윗하십시오.

? + 대추 + typeScript =이 분기

? React + JavaScript = Checkout React-JavaScript 브랜치

?? HTML + JavaScript = Checkout Master Branch

특징

• 크로스 브라우저 지원 (Web-Extensions API)
• 브라우저 조정 된 매니페스트 생성
• 코드 변경에 대한 자동 빌드
• 자동 팩 브라우저 특정 빌드 파일
• 사스 스타일링
• 기본적으로 TypeScript
• ES6 모듈 지원
• 기본적으로 UI 라이브러리를 반응합니다
• 스마트 리로드

브라우저 지원

49 이상	52 이상	36 & 이후 ✔	79 이상	최신 ✔	최신 ✔	최신 ✔

10 만 명 이상의 사용자가있는 생산 확장에 사용됩니다.

• Daily.dev in Daily.dev 확장
• ansh/jiffyreader.com의 Jiffy Reader
• abhijithvijayan/kutt-extension의 kutt-extension
• lisongx/doubanimdb의 doubanimdb
• UNBYTE/MOOC 보조에 대한 MOOC 보조
• 크롤 랩-팀/아티브 푸트의 artipub

그리고 더 많은 ...

이 템플릿을 사용하십시오

새 디렉토리를 만들고 실행하십시오

 curl -fsSL https://github.com/abhijithvijayan/web-extension-starter/archive/react-typescript.tar.gz | tar -xz --strip-components=1

빠른 시작

당신이 가지고 있는지 확인하십시오

• Node.js 10 이상 설치

그런 다음 다음을 실행하십시오.

• npm install 에 종속성을 설치하십시오.
• npm run dev:chrome Chrome Extension 용 개발 서버를 시작합니다.
• npm run dev:firefox Firefox Addon 용 개발 서버를 시작합니다.
• npm run dev:opera Opera Extension을위한 개발 서버를 시작하는 Opera
• npm run build:chrome
• npm run build:firefox Firefox Addon을 구축합니다
• npm run build:opera
• npm run build 빌드 및 팩 확장 프로그램에 한 번에 확장/ 디렉토리

개발

• npm install 에 종속성을 설치하십시오.

• 개발의 파일 변경을 보려면

  • 크롬
    • npm run dev:chrome
  • 파이어 폭스
    • npm run dev:firefox
  • 오페라
    • npm run dev:opera

• 브라우저의로드 확장

• 크롬

  • 브라우저 주소 표시 줄로 이동하여 chrome://extensions 입력하십시오
  • Developer Mode 버튼을 확인하여 활성화하십시오.
  • Load Unpacked Extension… 버튼을 클릭하십시오.
  • extension/ 에서 브라우저 폴더를 선택하십시오.

• 파이어 폭스

  • Add-On을 about:debugging 으로 임시 애드온으로로드하십시오.
  • 추출 된 디렉토리에서 manifest.json 파일을 선택하십시오

• 오페라

  • opera:extensions 통해 확장을로드하십시오
  • Developer Mode 확인하고 Extension의 추출 된 디렉토리에서 포장되지 않은 것으로로드하십시오.

생산

• npm run build 모든 브라우저가 각각 extension/BROWSER 디렉토리에 대한 확장을 빌드합니다.

참고 : 기본적으로 manifest.json 은 버전 0.0.0 으로 설정됩니다. 웹 팩 로더는 빌드의 버전을 package.json 버전의 버전으로 업데이트합니다. 새 버전을 해제하려면 package.json 및 실행 스크립트에서 버전을 업데이트하십시오.

package.json 버전을 사용하지 않으려면 여기에서 옵션을 비활성화 할 수 있습니다.

브라우저 특정 매니페스트 생성

브라우저 공급 업체가있는 source/manifest.json 파일 업데이트. 접두사 매니페스트 키

 {
  "__chrome__name" : "SuperChrome" ,
  "__firefox__name" : "SuperFox" ,
  "__edge__name" : "SuperEdge" ,
  "__opera__name" : "SuperOpera"
}

공급 업체가 chrome 인 경우 다음과 같이 컴파일합니다.

 {
  "name" : "SuperChrome" ,
}

---

여러 공급 업체에 키를 추가하여 | 접두사에서

 {
  __chrome|opera__name: "SuperBlink"
}

공급 업체가 chrome 또는 opera 인 경우 다음과 같이 컴파일합니다.

 {
  "name": "SuperBlink"
}

자세한 내용은 wext-manifest-loader 패키지의 원래 readme를 참조하십시오.

버그

버그, 누락 된 문서 또는 예기치 않은 동작에 대한 문제를 여기에 제출하십시오.

Linting & TypeScript 구성

• 공유 eslint & prettier 구성 - @abhijithvijayan/eslint-config
• 공유 타입 스크립트 구성 - @abhijithvijayan/tsconfig

특허

MIT © Abhijith Vijayan