Chrome Extension 개발

🔎 Chrome Extension을 개발하기 전..

크롬 익스텐션!! 요것만 알면 시작할 수 있따! 하는 것들을 간략하게 정리해보도록 하겠습니다. 🙂

• 크롬 익스텐션에서 사용되는 스크립트와 이벤트

• manifest.json 파일 살펴보기

• 디버깅은 어떻게 하는가?

1) 크롬 익스텐션에서 사용되는 스크립트와 이벤트

크롬 익스텐션을 개발하는데 사용되는 스크립트는 크게 background, contentscript, popup 이 있습니다.

background는 크롬 익스텐션이 실제로 동작하는데 필요한 스크립트이고, contentscript는 사용자 화면의 DOM, 스크립트들을 제어하는 데 필요한 스크립트 입니다. popup은 크롬 익스텐션 버튼을 눌렀을 때 아래에 뜨는 팝업창을 위한 스크립트 입니다. 팝업창의 모양을 그리기 위해서 html 파일도 있어야겠져?!! 그래서 popup.html도 존재합니다..

크롬에서는 크롬 익스텐션의 background 스크립트를 디버깅 하기 위해서 별도의 개발자 도구 창을 제공하는데요, background 스크립트의 console.log는 이 개발자 도구에 기록되고, contentscript 스크립트는 크롬 익스텐션을 실행 중인 사용자의 화면의 개발자 도구 창에 기록이 남습니다. 나의 로그가.. 왜 안나타나는가 헤맬까봐...*

그리고 storage에 저장하거나.. 하는 등의 액션은 모두 background 스크립트에서만 동작 가능하기 때문에, contentscript에서는 이벤트를 발생시켜서 이런 액션들을 처리해주어야 합니다.

• contentscript에서 이벤트 발생 후 background 에서 listening 하기

// contentscript.js
chrome.runtime.sendMessage({action: "FINISH"}, function(response) {
    alert(response);
});

// background.js
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    console.log(sender.tab ?
        "from a content script:" + sender.tab.url :
        "from the extension");

    if (request.action === "FINISH")
        sendResponse({farewell: "goodbye"});
});

chrome.runtime 의 내부 메서드인 sendMessage를 사용해서 이벤트를 보내고, addListener를 통해서 이벤트를 듣고 있도록 되어 있습니다.

• popup 에서 클릭 했을 때 사용자 화면을 바꾸도록 하려면?

<!--popup.html-->
<button id="start">분석 시작</button>
<script type="text/javascript" src="scripts/popup.js"></script>

// popup.js
document.getElementById("start").onclick = function () {
    chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {action: "START"}, /* callback */);
    });
};

// contentscript.js
chrome.extension.onMessage.addListener(function (msg, sender, sendResponse) {
    if (msg.action === "START") { /* do something */ }
});

런타임 환경이 아닌 익스텐션에서 메시지를 주고 받을 때는 chrome.extension.onMessage.addListener 를 사용합니다. ⚠️ 그리고, popup.js에서 특정 탭에 이벤트를 보내기 위해서 tab의 id를 꼭 포함해서 보내주어야 합니다.

2) manifest.json 파일

크롬 익스텐션의 설정파일들을 담아주는 곳이고, 아래와 같이 간-단한 정보들을 담고 있습니다.

{
    "name": "Getting Started Example",
    "version": "1.0",
    "description": "Build an Extension!",
    "manifest_version": 2
}

그리고 크롬익스텐션에서 사용할 스크립트도 등록해주어야 합니다.

• background 스크립트 등록

{
    "name": "Getting Started Example",
    "version": "1.0",
    "description": "Build an Extension!",
+   "background": {
+     "scripts": ["background.js"],
+     "persistent": false
+   },
    "manifest_version": 2
}

⚠️ persistent 옵션은 false가 기본이지만, 사용자의 화면에서 발생하는 request들을 핸들링 하기위해 webRequest를 사용할 때는 true로 해주어야 정상 동작합니다.

• contentscript 등록

{
    "name": "Getting Started Example",
    "version": "1.0",
    "description": "Build an Extension!",
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
+   "content_scripts": [
+     {
+       "matches": ["http://*.nytimes.com/*"],
+       "css": ["myStyles.css"],
+       "js": ["contentScript.js"]
+     }
+   ],
    "manifest_version": 2
}

• popup 등록

{
    "name": "Getting Started Example",
    "version": "1.0",
    "description": "Build an Extension!",
+   "page_action": {
+     "default_icon": "icons/32.png",
+     "default_title": "Extension",
+     "default_popup": "popup.html"
+   },
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
   "content_scripts": [
     {
       "matches": ["http://*.nytimes.com/*"],
       "css": ["myStyles.css"],
       "js": ["contentScript.js"]
     }
   ],
    "manifest_version": 2
}

<!--popup.html-->
<button id="start">분석 시작</button>
<script type="text/javascript" src="scripts/popup.js"></script>

⚠️ popup 스크립트는 manifest에 등록하는 것이 아니라, popup.html에 script tag로 삽입해주면 됩니다.

• Permission 등록하기

{
    "name": "Getting Started Example",
    "version": "1.0",
    "description": "Build an Extension!",
    "manifest_version": 2,
+   "permissions": [
+     "tabs",
+     "declarativeContent"
+   ]
}

권한 종류는 요기 가면 더 볼 수 있습니다.

3) 디버깅은 어떻게 하는가?

디버깅은 짱! 간단합니다.. 주소창에 chrome://extensions/ 를 입력하시고..

아래와 같이 개발중인 폴더째로 로드하고.. 성공하면 백그라운드 페이지를 누르면 디버깅 할 수 있는 별도의 개발자도구 창이 뜹니다.. 끗...

image

🐝 특정 도메인에서만 툴팁이 노출되었으면 좋겠어요!

manifest permission : "declarativeContent" 구현 스크립트 : background.js

chrome.runtime.onInstalled.addListener(function () {
    chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
        chrome.declarativeContent.onPageChanged.addRules([{
            conditions: [new chrome.declarativeContent.PageStateMatcher({
                pageUrl: {hostSuffix: 'abc.com'},
            })],
            actions: [new chrome.declarativeContent.ShowPageAction()]
        }]);
    });
});

• 런타임 onInstalled 이벤트가 발생하였을 때, 이런 조건(conditions)일 때 이런 액션(actions)를 해라! 라는 코드인데요!

  • 조건 종류는 여기에서 더 확인할 수 있습니다.

• hostSuffix 즉, host가 'abc.com' 으로 끝나는 경우 ShowPageAction() 을 하라는 것입니다. manifest 에.. popup.html을 page_action 에 지정했던 것 기억하시나요?! 그래서 ShowPageAction()을 호출하면 popup을 노출 시킬 수 있습니다. ~왠지.. ShowPopup() 이여야할 것 같은데...*~

• 그렇다면, abc.com이 아닌 도메인에서는 어떻게 노출되는지 궁금하시죠?
• 조건이 일치하는 경우에는 팝업이 뜹니다..

기타

🐝 사용자 화면의 Http 요청을 제어할 수 있을까요?

manifest permission : "webRequest" "persistent" : true

// manifest.json
{
  "background" : {
      "scripts" : ["background.js"],
+     "persistent" : true
  }
}

구현 스크립트 : background.js

• 네!! 제어할 수 있습니다.

  자세한 설정은 chrome.webRequest 에 있습니다.

onBeforeRequest 예시

chrome.webRequest.onBeforeRequest.addListener(
    function(details) {
        console.log(details.url.match(/a=(.*?)&/i)[1]);
                // return ~~ ;
    },
    {
        urls: [
            "*://abc.com/*",
            "*://beta-abc.com/*",
            "*://alpha-abc.com/*"
        ]
    }
);

• 위 코드는 http 요청 전의 onBeforeRequest hook을 사용한 것입니다.

• http 요청 전 urls에 해당하는 것들만 걸러서, 요청에 대한 정보를 콜백의 인자(details)로 넘겨줍니다.

🚫 요청 cancel 예시

chrome.webRequest.onBeforeRequest.addListener(
    function(details) {
        return {cancel: details.url.indexOf("://www.evil.com/") != -1};
    },
    {urls: ["<all_urls>"]},
    ["blocking"]
);

• 뿐만 아니라 이 콜백에서 return {} 시 여러 옵션을 넘겨서 요청을 수정하거나 취소하거나 하는 등의 제어도 가능합니다.

• 콜백의 리턴 값으로 cancel : boolean 프로퍼티를 이용해서 request를 취소 할 수도 있습니다.

• ⚠️이렇게 request를 취소하는 경우에는 "webRequest" Permission 뿐만아니라 "webRequestBlocking"도 추가해주어야 합니다.

• 그러나 아래와 같이 custom 한 스크립트를 동작시키고 싶을 때 원하는 동작이 실행되지 않을 수도 있습니다.

window.__myString = "퇴근하자";

이렇게 대입을 해도 클라이언트 사이드에서는 적용이 안됩니다. 😓

• 이런 경우에는 script 태그를 만들어서 DOM에 append 해주는 방식으로 처리해야 합니다.

const clickcrScriptEl = document.createElement("script");
clickcrScriptEl.innerHTML = `window.__myString = "퇴근하자";`;
document.body.appendChild(clickcrScriptEl);

• 하지만!! 이렇게 모두 script를 string으로 대입하는 것은.. 굉장히 번거로운 작업이져!!

var fullPath = chrome.extension.getURL('scripts/abc.js');

const script = document.createElement('script');
script.type = 'text/javascript';
script.src = fullPath;
document.body.appendChild(script);

chrome.extension.getURL을 사용하면 chrome extension 내 스크립트 환경에 있는 script 를 fullpath로 가져올 수 있습니다.