problem + why?

그냥 웹에서 이미지 넣듯이 assets 폴더나 public 폴더에 이미지를 넣고 경로로 이미지를 넣는다면 현재 띄워진 웹 url + 이미지 경로 이런식으로 이미지 요청이 간다.

예를 들어 www.google.com에서 public/img/example.png이미지를 넣은 우리의 웹사이트를 실행한다면 www.google.com/public/img/example.png로 이미지 요청을 보내는 것!

하지만 당연하게도 해당 웹사이트는 저 주소에 이미지가 없을 것 이고, 404error가 뜨는 것이 자명하다.

solution

chrome.runtime.getURL()을 이용하면 우리의 익스텐션에 대한 url을 얻을 수 있다!

이는 chrome-extension://(해당 extension id)/(정적 파일주소) 를 반환해준다.

이런식으로 넣어주면 된다...

reference

https://developer.chrome.com/docs/extensions/reference/api/runtime?hl=ko#method-getURL