ChromeExtension에서 Google 검색 결과에 요소를 삽입하는 프로세스를 구현할 때 약간의 팁

ChromExtension에서 Google 검색결과에 요소를 추가하는 과정을 생각해 보세요.

Google 검색 시 요소 추가 1

우선 간단한 방법입니다. 아래와 같이 manifest.json 의 content_scripts 에 검색을 실행했을 때에 검색 결과에 요소를 삽입하는 스크립트를 실행하도록 기술합니다.

manifest.json

{
  "name": "SearchResult1",
  "version": "1.0",
  "manifest_version": 2,
  "description": "SearchResult1",
  "content_scripts": [
    {
      "matches": ["*://www.google.co.jp/*",
                  "*://www.google.com/*"
                  ],
      "js": ["jquery.min.js","script.js"],
          "run_at": "document_end"
    }
  ]
}

script.js

$(function(){
        $("h3.r>a").each(function(){
                $(this).prepend("<span>[Insert]</span>");
        });
});

위의 스크립트를 Chrome에 로드한 후 검색을 실행하면 아래 그림과 같이 요소 삽입에 성공합니다.

문제점

다만, 예를 들면 상기의 페이지에서 검색 폼의 돋보기 버튼을 클릭했을 때 등은, 검색이 Ajax로 처리되기 때문에, 지금의 상태라면 스크립트가 실행되지 않습니다.

Google 검색 시 요소 추가 2

그래서 Ajax에서 검색 실행되었을 때도 스크립트가 실행되도록 DOMNodeInserted를 이벤트 리스너에 등록하는 것으로 요소의 삽입을 실현합니다.
아래의 코드에서는 타이머를 설정(①)하여 여러 번 이벤트가 발행되는 것을 막고 있습니다. 또한 ② 부분에서 요소가 삽입되었는지 여부를 판단하여 여러 번 삽입되는 것을 방지하고 있습니다.

script.js

var timer = 0;
document.addEventListener('DOMNodeInserted', function(){
        if(timer) return;
        timer = setTimeout(function(){//①
                timer = 0;
                $("h3.r>a").each(function(){
                        if(!$(this).children('span')[0]){//②
                                $(this).prepend("<span>[Insert]</span>"); 
                        }
                });
        }, 3000);
}, false);

참고:
junion-org/GoogleWithFavicons htps : // 기주 b. 코 m / 쥬니 온 - rg / 고오 g ぇ ぃ th
DOM Mutation Events는 비동기 적으로 사용합시다 - JavaScript로 재생 - g : javascript ㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜ. g. 하테나. 네. jp/에dゔぁkf/20100204/1265312155