[Javscript] 크롬익스텐션 테스트 등록하기 (wavve 오프닝 건너뛰기, 다음회차 자동재생)

애니보는데 넷플릭스는 저 '끝내지 않는 Netflix'가 있어서 자동으로 넘어가지는데, 웨이브는 안되는게 귀찮아서 만들었다.

티빙으로는 애니를 잘 안봐서.. 나중에 티빙도 쓰게된다면 티빙버전도 만들어야겠다. 

 

{
  // 사용자가 특정 웹페이지를 열 때 사용할 JavaScript 또는 CSS 파일을 지정
  "content_scripts": [
    {
      "matches": ["*://www.wavve.com/*"], // 확장 프로그램을 실행할 웹사이트
      "js": ["content.js"] // 실행할 js파일
    }
  ],
  // 확장 프로그램의 설명란에 표시되는 설명
  "description": "Wavve에서 오프닝 건너뛰기랑 다음회차를 자동으로 재생해주는 크롬 확장 프로그램이에요!",
  "host_permissions": ["*://www.wavve.com/*"], // activeTab설정 후 특정사이트 접근을 위해 추가한 설정
  "manifest_version": 3, // 현재 확장 프로그램이 사용할 크롬 확장 프로그램의 버전. 유일하게 지원되는 값은 3
  "name": "Wavve AutoPlay", // 크롬 웹스토어에 등록될 때 보일 확장 프로그램의 이름
  "permissions": ["activeTab"], // 확장 프로그램 특별 권한, activeTab은 현재 보고있는 탭에서만 실행. 참고로 안상의 이유로 크롬에서는 불필요한 권한을 요청하면 스토어 등록이 어려움
  "version": "1.0.0" // 확장 프로그램의 버전
}

배포할 코드를 만든 후 manifest.json 설정을 입력한다.

 

더 필요한건 여기서 확인 

https://developer.chrome.com/docs/extensions/reference/manifest?hl=ko

 

 

 

chrome://extensions/

 

구글 크롬에서 해당 링크로 이동하면 위와 같은 창이 뜬다. 

우측 상단에 개발자 모드를 켜고, 왼쪽 위에 "압축해제된 확장 프로그램을 로드합니다."를 선택하여 내 프로젝트 경로를 열어준다. 그러면 아래 전체확장 프로그램에 내가 만든 확장프로그램이 뜨고, 코드 수정후 새로고침을 누르면 다시 올릴 필요없이 최신 소스가 반영이 된다. 

 

테스트 할 때는 새로고침 후 확인 하면된다.

 

오류 발생시에는 오류 버튼이 생기고 

 

 

오류 버튼을 통해 들어가면 어느부분에서 오류가 떴는지 확인을 할 수 있다.

 

 

 

content.js 는 내가 추가한 js파일.

이런식으로 바로바로 콘솔 확인 및 브라우저에서 테스트가 가능해진다. 쏘편리~

 

 

쏘편하다 이말이에요~

다만 익스텐션 깔면 알아서 자동으로 넘어가져버려서 

아이콘 눌렀을 때 사용자가 컨트롤 할 수 있도록 추가해야하고,.. 다음화넘기고 이전화 넘기고 할 때랑

새로운 애니들 볼때도 오류 없는지 계속 체크해야 할 것 같당 

(를 핑계로 열심히 애니를 본다)

 

 

전체코드는 여기서 확인

javascript/wavve-skip at master · Ina-dang/javascript

 

일단은 쓰면서 더 테스트해보고~ (아직 좀 거슬려서 수정하고싶은게 남아있당)

추가할 기능 있나 보면서 잘 굴러가는것 같으면익스텐션 정식등록까지 해야지.

그때는 정식등록하는 법 포스팅을 가져오겠당

 

 

참고:

- https://support.google.com/chrome/a/answer/2714278?hl=ko

- https://developer.chrome.com/docs/extensions/get-started