chrome 확장으로, 통신을 해킹할 수 있었으므로, 방법을 소개한다.

크롬 확장에 대한 자세한 내용은 설명하지 않습니다.

(좋은 기사를 찾았습니다. Chrome 확장 | 아키텍처 - Qiita

배경

DocBase - 사내 사람도 사외 사람도 관계자 전원이 사용할 수 있는 정보 공유 서비스 을 사용하고 있다.

최근, 로그인 후의 톱 페이지가 변경되어, 표시 건수가 줄어들어, 정보량이 줄어 불행하게 생각하고 있었다 1

그럴 때, wamei/chatwork-plugin: 채팅 워크에 뭔가 추가하기 chrome extension 을 만났다.

그래! 개조하면 괜찮습니다

webRequest를 사용하여 5개의 표시 건수를 20건으로 재작성한다.

톱 페이지의 표시 건수를 늘리는 것을 생각한다.
'chrome developer tool'의 네트워크 탭에서 URL을 확인하면 톱 페이지는/api/dashboard_objects?per_page=5&page=1 인 것을 알았다.per_page=20 하면 20건이 될 것이다.

1. manifest.json에 다음을 설정합니다.

  "permissions": [
    "https://*.docbase.io/",
     "webRequest",
     "webRequestBlocking"
  ],

chrome.webRequest을 사용하면 크롬 통신을 방해 할 수 있습니다.

이번은 url 를 재기록할 필요가 있으므로, webRequestBlocking 도 사용한다. 이것을 사용하는 것으로 동기 처리가 되어, url 를 재기록할 수 있게 된다.

2. 통신을 잡아서 URL을 다시 씁니다.

실제로 url을 다시 쓰는 코드를 작성합니다.
- 통신을 잡으려면 chrome.webRequest.onBeforeRequest.addListener를 사용하십시오.
- 이것에 의해, "*://*.docbase.io/api/*" 에 대해서, xmlhttprequest 의 통신이 발생했을 때, details 오브젝트를 받을 수 있다.
- details.url 에는, 지금부터 액세스하는 url 가 들어가 있다.
- 이때 redirectUrl를 반환하면 url을 다시 쓸 수 있습니다.
- 세 번째 인수에 ['bloking']이 필요합니다.

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    var url = details.url;
    if (url.indexOf("per_page=5&page=1") > -1) {
      var new_url = url.replace("per_page=5", "per_page=20");
      return { redirectUrl: new_url }
    }
  },
  {
    urls: ["*://*.docbase.io/api/*"],
    types: ["xmlhttprequest"]
  },
  [
    "blocking"
  ]
);

이상, 이것만으로 통신로를 해킹할 수 있었다.
전부 100행도 가지 않을 것이다.

요약

chrome 확장에서 webrequest를 사용하면 통신 URL을 다시 쓸 수 있습니다.

chrome 확장이 이런 일까지 할 수 있다고는 생각하지 않았기 때문에 감동했다.
게다가 코드는 간단하기 때문에 무엇이든 사용할 수 있습니다.
한편, 통신로를 다시 쓸 수 있다는 크롬 확장의 두려움을 다시 한번 느끼는 경험이었다.

유출 이야기

처음에는 content script를 사용하여 location.href를 다시 쓰는 코드를 작성했습니다.
톱 페이지에 있는 「더 보기」링크의 앞의 페이지가, 보고 싶은 페이지였으므로, 톱 페이지에 오면 그 페이지로 이동해 버린다, 라고 하는 어프로치다.

$(document).on("ready", function(){
  if(location.pathname == "/"){
    var timer = setInterval(function(){
      $link = $('a[href="/recent"]');
      if(!!$link[0]){
        clearInterval(timer);
        $link.click();
      }
    }, 100)
  }
})

이 코드는 첫 번째 액세스에서 예상대로 작동했습니다.
그러나 다른 페이지에서 전환했을 때 ready가 발화하지 않았습니다.
거기서 ajaxComplete 도 ajaxStop 를 사용하려고 했지만,
이 두 가지는 모두 발화하지 않았기 때문에 손도 다리도 아니었다.

그럼에도 불구하고 이것이 예상대로 작동한다면 webRequest를 만나지 않았기 때문에,
결과적으로 발화하지 않아서 좋았다고 생각한다.

크롬 확장, 굉장한.



대신 README 기능이 붙었다. ↩