커뮤니케이션을 흘려 뭔가하는 Chrome 확장

할 일

Chrome에서 발생하는 통신을 잡아 무언가를 할 준비를 한다.

구성

적절한 폴더를 만들고 Chrome 확장에 필요한 파일을 정렬합니다.

구성

NetworkWatcher
 ┃
 ┣━ manifest.json  // いろいろ設定を書く
 ┃
 ┣━ background.js  // 通信を捕まえる処理を書く
 ┃
 ┣━ contents.js    // ページ上の処理を書く
 ┃
 ┗━ icon.png       // アイコン画像

manifest.json

manifest.json 에 필요한 정보를 작성한다.
필요한 최소한의 설명만 기재하므로, 다른 설정은 매니페스트 파일 형식 - Google 크롬 에.

manifest.json

{
  "manifest_version": 2,
  "name": "NetworkWatcher",
  "version": "0.0.0",
  "icons": {
    "128": "icon.png"
  },
  "permissions": [
    "*://*/*/",
    "webRequest",
    "tabs"
  ],
  "background": {
    "scripts": [
      "background.js"
    ]
  },
  "content_scripts": [{
    "matches": ["*://*/*"],
    "js": ["content.js"],
    "run_at": "document_start"
  }]
}

우선 모든 통신을 캐치하고 싶기 때문에 webRequest (통신을 데리러 API)와 *://*/*/permissions 는 후술.

또한, 최종적으로 페이지측에서 통신을 캐치시키고 싶기 때문에, tabs 의 content_scripts 에는 run_at 를 지정해 둔다.
자세한 내용은 Content Scripts - Google 크롬

통신을 데리러

document_start API를 사용해 통신을 캐치하는 처리를 webRequest 쓴다.

background.js

chrome.webRequest.onBeforeRequest.addListener(
  function (details) {
    console.log(details.url);
  },
  {urls: ['<all_urls>']},
  []
);

이것만으로 background page에 통신 내용이 콘솔 출력되게 된다.

확장 로드

위의 상태에서 실제로 Chrome으로 확장을 읽어 보겠습니다.
Chrome에서 chrome://extensions/으로 이동하여 '개발자 모드'를 선택하고 '패키지되지 않은 확장 프로그램 가져오기...'를 누릅니다.



시작하기 전에 만든 폴더를 선택하면,



확장이 로드됩니다.



'백그라운드 페이지'를 누르면 별도 창에서 콘솔이 시작되므로 적당한 사이트에 액세스하면 동작 확인이 가능하다.

↓Google에 접속했을 때의 로그.

데이터를 페이지쪽으로 전달

background page에 토출되고 있는 로그를 페이지측에서 취급하고 싶으므로, 그 부분의 데이터의 전달 처리를 추기한다.
데이터를 전달하려면 background.js API를 사용한다.

background.js

chrome.webRequest.onBeforeRequest.addListener(
  function (details) {
    console.log(details.url);
    // 現在のタブを取得する
    chrome.tabs.query({
      active: true,
      windowId: chrome.windows.WINDOW_ID_CURRENT
    }, function (result) {
      var currentTab = result.shift();
      // 取得したタブに対してメッセージを送る
      chrome.tabs.sendMessage(currentTab.id, details, function() {});
    });
  },
  {urls: ['<all_urls>']},
  []
);

content.js

// メッセージを受け取る
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  console.log(message);
});

확장 업데이트

js를 수정하면 chrome://extensions/에서 다시로드하면 업데이트됩니다.


↓이런 느낌

Next...

우선 통신을 집어들게 되었으므로, 이 데이터를 사용해 무언가하고 싶다.