본문 바로가기
728x90
반응형

chrome extension2

[chrome extension] side panel 사용하기 1. cusom side panel과 문제점 현재 저희 회사는 chrome extension을 이용해 서비스를 제공하고 있습니다. 사용자는 현재 자신이 보고 있는 웹 페이지를 조작해 특정 서비스를 이용할 수 있는 형태입니다. 이때 자신이 제어한 항목 등을 좌측 side panel에서 보거나 선택할 수 있습니다. 그런데 여기서 문제가 발생합니다. extenion 영역에 존재하는 side panel은 position이 fixed이기 때문에, 사용자가 보고 있는 웹 페이지를 덮을 수밖에 없다는 것이죠! 물론 panel을 absolute로 두고 사용자 페이지 style을 조작해, 억지로 panel 영역을 밀어낼 수도 있습니다. (실재로 margin, transition 등의 속성을 사용해 이를 구현했습니다) 하.. 2024. 2. 1.
[chrome extension] 익스텐션 설치 여부 감지하기 chrome extension 서비스를 제공할 경우, 웹 페이지에서 해당 extension이 브라우저에 설치되었는지 감지해야 하는 경우가 발생한다. (익스텐션이 설치되지 않았다면, chrome extension store로 이동해 설치 유도 등) 구글링을 해보면, 일반적으로는 아래와 같은 방법들이 사용된다.1. extension에서 DOM을 조작해 감지extension에서 문서를 조작하고, 웹 페이지에서는 해당 문서가 조작되었는지로 판단하는 방식! extension이 설치된 경우, manifest.json의 content_scripts 속 파일이 실행된다. // manifest.json { "content_scripts": [ { "js": ["content.js"], } ] } js 파일이 실행되므로,.. 2024. 1. 18.
728x90
반응형