씹어먹는 블로그

익스텐션이 지워졌는지 여부를 확인하기 위한 방법 중 하나로, 익스텐션 내에 있는 파일의 존재여부로 판단하는 방법. 퍼미션 세팅 manifest.json "web_accessible_resources": [ { "resources": ["images/icon16.png"], "matches": ["https://*.mydomain.com/*"] } ] resources 에는 접근할 수 있는 파일들의 목록을 적어준다. 이 때, 경로는 root 기준 matches 에는 접근을 허용하는 도메인을 적어준다. 익스텐션 내 파일 접근 방법 chrome-extension://[크롬 익스텐션ID]/images/icon16.png 위와 같은 형식으로 접근하면 된다. function detectExtension(extens..

자신의 크롬익스텐션이 설치되었는지 확인하는 방법 두 가지. 1. cookie 를 이용한 방법 content-script.js // 익스텐션 설치 여부 구분자를 쿠키로 생성 if (document.cookie.indexOf('extension_downloaded') === -1){ // 익스텐션 설치안됨 document.cookie = "extension_downloaded=true"; } 익스텐션설치 여부를 구분할 페이지 if (document.cookie.indexOf('extension_downloaded') != -1){ alert("익스텐션이 설치되었습니다."); } else { alert("익스텐션이 설치되지 않았습니다."); } 2. DOM으로 태그삽입을 이용한 방법ㅇ content-scrip..

1. 현재 떠 있는 탭 중에, 특정 url이 포함된 탭들을 가져온다. 2. 가져온 탭들을 새로운 url로 리로드 시킨다. (여기에 파라미터 전송 등 응용해서 사용 가능) manifest.json "permissions": [ "tabs", "scripting", "activeTab" ], "host_permissions": [ "https://*.google.com/*", "https://*.tistory.com/*" ] background.js let url = 'www.tistory.com' var count = 0; chrome.tabs.query({url: "https://www.google.com/*"}).then(function(res){ if(res.length > 0) { for(let i..

content script 와 background 간 데이터 전달, content script 와 popup 간 데이터 전달, 이런식으로 웹페이지의 컨텍스트(content script)에서 다른 확장 컨텍스트로 데이터를 전달하는 방법 양방향으로 발신/수신 가능 content-script.js 발신부분 chrome.runtime.sendMessage({ name: 'tom' },function(response) { console.log(response.res); }); background.js 에서 수신하는 부분 chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) { let resName = request.name; /..

1. 내 페이지 내에 dispatchEvent 로 이벤트를 발생시킨다. document.dispatchEvent( new CustomEvent('chrome-extension-test', { "detail" : {"name":"123"} }) ); 2. 크롬 익스텐션 content 페이지 내에 이벤트 리스너 등록 ./content-script.js function eventOn() { document.addEventListener('chrome-extension-test', function (e) { let name = e.detail.name; //웹페이지에서 전달한 데이터 window.open('https://www.google.com?name='+name); //새탭으로 크롬창을 띄운다 }); } ..