Chrome/Firefox 확장을 webpack+Babel로 만드는 병아리

제목의 것을 만들었습니다.

webpack + Babel(빌드)

Chrome 버전과 Firefox 버전을 별도의 빌드로 만들 수 있습니다.

본체 기능: src/options.js → options.js

설정 화면: src/content.js → content.js

Jest (테스트)

.babelrc , .eslintrc 등이 분위기만 있다

GitHub Actions로 테스트

경위

이것은 내가 실제로 출시 한 Chrome/Firefox 확장에서 앱 특정 부분을 깎은 것입니다. 그래서, 일종의 실적이 있는 구성이라고 해도 좋을까 생각합니다. 지금의 구성에 도착할 때까지 나름대로 우여곡절이 있었으므로, 다음의 확장을 만들기 위한 좋은 느낌의 출발점이 될 수 있도록, 정리한 느낌입니다.

최소 구성도 최강 구성도 아니지만, 말하면, 좋은 느낌의 작은 출발점, 이라는 느낌입니까?

출처

사용해보기

준비

git clone https://github.com/wtetsu/webextensions-webpack-boilerplate.git
cd webextensions-webpack-boilerplate
npm install

빌드(Chrome)

npm run build-chrome

dist-chrome에 빌드가 생성됩니다.

그것을 chrome://extensions/에서 읽으면 바로 브라우저에서 실제로 시도할 수 있다.

릴리스는, 상기를 zip 한 것을 htps // ch 로메. 오, ぇ. 코 m / ぇ bs 잡아 / 로부터 등록하는 것만.

개발시에는, 이하를 실행한 채로 코드를 변경하면, 마음대로 재빌드해 주어 편리.

npm run watch-chrome

빌드(Firefox)

npm run build-firefox

dist-firefox에 빌드가 생성됩니다.

그것을 about:addons 에서 읽으면 바로 브라우저에서 실제로 시도할 수 있다.

릴리스는, 상기를 zip 한 것을 htps : // 아동 s. 모잖아. rg/에서 ゔぇぺぺrs/ 로부터 등록하는 것만.

개발시에는, 이하를 실행한 채로 코드를 변경하면, 마음대로 재빌드해 주어 편리.

npm run watch-firefox

테스트

__test__에 추가하십시오.

일반적으로 테스트.

npm run test

watch 해 두면, 변경한 파일에 관련하는 테스트만 마음대로 실행해 주어 편리합니다.

npm run test-watch

우선 실행한 모습

alert가 나옵니다. 정말 그게 다야.



덧붙여서 여기의 코드는 이렇게 되어 있습니다만, 관계없는 브라우저의 쪽은 빌드시에 if 마다 사라집니다.

if (BROWSER == "CHROME") {
  alert("hello, world!(CHROME)");
}
if (BROWSER == "FIREFOX") {
  alert("hello, world!(FIREFOX)");
}