화면에 중복된 ID 이름이 있는지 확인하는 Chrome 확장 프로그램을 만들었습니다.

소개

동일 화면에는 중복된 ID명을 설정해서는 안됩니다.
상식이라고는 생각합니다만 복수인으로 프로젝트를 돌리고 있다고 깨닫으면 같은 ID명이 존재하고 있었다, 뭐라고 할까 생각합니다.
인간이 눈으로 보고 중복되어 있는지 판단해도 됩니다만, 부분 템플릿이 복수에 걸쳐 있거나 한다고 찾는 것도 어렵습니다.
완성된 화면에서 조사하면 편리하다는 발상에서 작성을 시작했습니다.

사용 이미지

URL 란 옆의 브라우저 아이콘을 클릭하면 검색을 개시

검색이 끝나면 알림으로 알림

중복되는 것은 콘솔에 표시된다

소스 코드

background.js

// backgroundで動くjs
// ブラウザ上部のアイコンをクリックすることで発火し、content.jsの方にメッセージを飛ばす（トリガー）
chrome.browserAction.onClicked.addListener(function(tab) {
  /**
   * 第一引数: タブのID
   * 第二引数: ポストするキーとバリュー
   * 第三引数: コールバック関数（レスポンスが戻ってきた時に実行される）
   */
  chrome.tabs.sendMessage(tab.id, { trigger: "on" },
    function(msg) {
      console.log("background側のconsole:", msg);
    });
});

search_not_unique_id.js

$(function(){
  /**
   * @param object message backgroundからポストされた値
   * オブジェクトになっていてmessage.trigger = 'on'のような形になっている
   * @param sender
   * @sendResponse
   * これらは2つとも宣言してないとsendResponseが最後に返せなかったので設定した
   *
   * backgroundからメッセージが送られてきた時（ブラウザボタンをクリックされた時）に発火する
   */
  chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    // 意図したbackground.jsからの送信でない場合は弾く
    if(message.trigger !== 'on'){
      return false;
    }

    var ids = [];
    // 画面の全要素に対してループを回す（やや遅い可能性あり）
    $.each($("*"), function(){
      var id = $(this).attr("id");
      if(typeof(id) !== "undefined"){
        // undefined以外の全idを配列に保持
        ids.push(id);
      }
    });

    /**
     * 重複したもののみを検出する
     * @see http://qiita.com/cocottejs/items/7afe6d5f27ee7c36c61f
     */
    var not_unique = ids.filter(function (x, i, self) {
      return self.indexOf(x) === i && i !== self.lastIndexOf(x);
    });

    if(ids.length === 0){
      console.log('重複したID要素はありませんでした');
    } else {
      console.log('重複したID要素: ');
      console.log(not_unique);
    }
    alert('結果はconsoleを確認してください');

    sendResponse('Done');
  });
});

해설

전체 처리 흐름

background.js 에서 브라우저 아이콘에 onClick 이벤트 설정

브라우저 아이콘을 클릭하면 background.js 이벤트가 발화

sendMessage 에서 content_scripts 쪽으로 메시지 보내기

content_scripts 는 manifest.json 에 지정된 js 대상

search_not_unique_id.js 안에 onMessage 이벤트를 배치하고 이것이 메시지를 받으면 발화한다

중에서 "현재보고있는 페이지에 대해"중복 ID를 검색합니다

sendResponse 에서 search_not_unique_id.js 에서 background.js 에 대한 응답을 반환

브라우저 동작

Chrome URL 입력란의 오른쪽 옆에 있는 아이콘 부분
이번에는 여기를 클릭하는 것을 트리거하고 싶었습니다.

배경 페이지

확장이 뒷면에있는 확장 페이지입니다.
이 확장을 작성할 때,
백그라운드에서 프런트 측(지금 표시하고 있는 탭 측)에 메세지 송신하는 것으로 트리거를 실현할 수 있었습니다
배경 페이지를 보려면 다음 이미지와 같이 요소를 볼 수 있습니다.

결론

하는 것은 매우 간단했고 코드 자체는 순식간에 완성되었습니다.
어느 쪽이든 이것을 Chrome 확장의 형태로 떨어 뜨리는 데 약간 번거로웠습니다.background , browser_action 에 대한 좋은 공부가되었습니다!
브라우저 아이콘을 클릭 할 때 팝업을 시작하는 것도이 부분에서 적용 할 수 있기 때문에 다음에이 부분을 만져보고 싶습니다.