ser2. 크롬 개발자도구 network탭 정보들 따오기

목차

0. webpack번들링과정에서 fs, axios등 모듈 import후 Module Not Found Error발생

1. content script와 DOMNodeInserted 이벤트

2. 크롬 개발자도구 network탭 정보들 따오기

3. ui개발시에 실시간으로 화면변화 확인




0. webpack번들링과정에서 

fs, axios 등 모듈 import 후 Module Not Found Error발생


다 제치고 fs 를 쓰려고 할때마다 



위와 같은 에러를 띄우며 실패를 합니다.


구글링을 해보아도 

계속 webpack config파일에서 resoleve.fallback 을 수정해라

package.json에서 browser를 수정해라 등


무엇이 문제인지 모르겠습니다.


솔직한 심정으로는 webpack에 대한 전반이해와

commonjs , es modules 시스템들에 대한 이해부족이 원인임이 틀림없는데,

어디부터 시작해야 문제가 해결될지 몰라 여쭙습니다 ..



1. content script와 DOMNodeInserted 이벤트


content script를 이용해 특정 요소(ex. body) 안에 새로운 element들이 추가됐을 때

알아야 할 필요성이 있는 상황입니다.


그래서 전 단순하게 

body.addEventListener('DOMNodeInserted', fn) 으로 박아두고 사용하는 방식을 택했는데

이게 정말 괜찮은 방법일까요?


여러 사이트를 테스트해보고 있는데 개발자 콘솔로 확인해보니


- 어떤곳은 가만히 놔두어도 이벤트가 발생하는 경우도 있고,

- 그냥 해당 엘리먼트 영역을 클릭만 했는데도 발생하는 경우도 있고,


예기치 못한 동작발생이 너무 발생해서 혼란스러운 상황입니다.

좋은 해결책이 있을까요?

선생님들은 어떤 방식을 사용하시나요?




2. 크롬 개발자도구 network탭 정보들 따오기



network 탭에서 확인되는 ts파일, m3u8파일들의 정보를 얻어와야 하는 상황입니다.


멀티미디어 파일인지라, 플레이어를 재생하는 타이밍이후에야 정보들이 넘어와서

extension내의 background파일로부터 해당 파일들의 정보를 가져오고자 마음먹었습니다.


대충 chrome문서를 봤을때는 chrome.devtools.network라는 것이 소개돼있어서

이걸 사용하면 되겠다 싶었는데.. 전혀 사용방식이 다른 api이더라구요 ㅠ.ㅠ


여기서 더이상 사고가 개진되지 못하고 완전히 막혀버리고

검색할 키워드도 뭣도 없는 상태입니다...

실날같은 팁이라도 알려주신다면 감사하겠습니다..



3. UI 개발시에 실시간으로 화면변화 확인


이건 질문이라기보다는 의견여쭙는 것입니다.


popup html파일을 빌드하고 확인하고 빌드하고 확인하고 

이과정이 너무 갈수록 빌드시간이 길어지면서 힘들어서


결국 webpack devserver를 사용하기로 결심했는데

일반 웹페이지 개발하듯이 사용한다는 느낌으로 다들 쓰시나요?


익스텐션에서 popup 이나 option 파일 ui변화를 

실시간으로 확인하고자 할때 따로 사용중이신 방안이나 아이디어가 있으시면 ,,,

생각나눠주십사 부탁드립니다ㅠㅠ 

2. 크롬 개발자도구 network탭 정보들 따오기

2. 크롬 개발자도구 network탭 정보들 따오기



2. 크롬 개발자2. 크롬 개발자도구 network탭 정보들 따오기도구 network탭 정보들 따오기

2. 크롬 개발자도twork탭 정보들 따오기