현재 탭 jquery 하여 제어하기.

https://developer.chrome.com/extensions/samples 페이지의 아래 예제를 받아서 수정.

A browser action with a popup that changes the page color

이 예제는 browser action을 클릭 했을 때 현재 탭 컨텐츠의 바탕화면 색을 변경한다. 

function click(e) {

  chrome.tabs.executeScript(null,

      {code:"document.body.style.backgroundColor='" + e.target.id + "'"});

  window.close();

}

이 것을 응용해서 편리한, 개발자도구를 못 쓰는 사용자를 위한 도구를 만들려고 했다. 

그런데 일반 java script말고 jquery를 이용해 컨텐츠를 파싱하거나 조작하려고 하였으나 잘 되지 않았다. 

아래와 같이 작성하면 jquery를 이용하여 tab의 컨텐츠를 컨트롤 할 수 있다. 

function handleClick(e) {

  chrome.tabs.executeScript(null, { file: "jquery-1.7.2.js" }, function() {

    chrome.tabs.executeScript(null,{

      code:"$('#members_scroller').css('max-height','100%');"

      });

});

  /*

  chrome.tabs.executeScript(null,

      {code:"var x = document.getElementById('members_scroller').style.maxHeight = '100%';"});

  */

}

chrome.browserAction.onClicked.addListener(handleClick);

https://developer.chrome.com/extensions/tabs#method-executeScript

executeScript

chrome.tabs.executeScript(integer tabId, object details, function callback)

- tabid가 없을경우 기본적으로 현재창의 활성화된 탭에서 실행 된다.

- 먼저 jquery 가 실행되고 callback으로 실행되는 executeScript 에서 jquery를 사용 할 수 있다.

이 기능을 사용하기 위해서는 menifest.js 에 아래 퍼미션을 추가한다. 

"permissions": [
  "activeTab"
],