[javascript] JavaScript / jQuery DOM 변경 리스너가 있습니까?

많은 사이트에서 AJAX를 사용하여 컨텐츠를 동적으로 추가 / 표시 / 변경합니다. 경우에 따라 사이트 내 탐색 대신 사용되기 때문에 현재 URL이 프로그래밍 방식으로 변경되고이 경우 페이지가 원격 서버에서 완전히 페치되지 않으므로 브라우저에서 컨텐츠 스크립트가 자동으로 실행되지 않습니다.

콘텐츠 스크립트 에서 사용 가능한 페이지 변경을 감지하는 일반적인 JS 방법 .

• 말 그대로 DOM 변경을 감지하는 MutationObserver ( docs ) :

  • 페이지에로드 될 때 HTML 컨텐츠를 변경하는 방법
  • 전체 DOM에서 노드를 감지하기위한 MutationObserver의 성능 .

• DOM 이벤트를 전송하여 컨텐츠 변경을 알리는 사이트의 이벤트 리스너 :

  • pjax:enddocumentGitHub와 같은 많은 pjax 기반 사이트 에서 사용되는 경우 pjax로드 전후에 jQuery를 실행하는 방법을
    참조하십시오 .
  • message에 window크롬 브라우저에서 예를 들어, Google 검색에서 사용하는,
    참조 크롬 확장 프로그램 Google 검색 새로 고침을 감지
  • spfdonedocumentYoutube 에서 사용하는 방법 은 Youtube에서 페이지 탐색을 감지하고 페이지를 렌더링하기 전에 HTML을 수정하는 방법을
    참조하십시오 .

• setInterval을 통해 DOM을 주기적으로 검사 :
  이것은 분명히 id / selector로 식별되는 특정 요소가 나타날 때까지만 작동하며 어떤 종류의 지문을 만들지 않으면 동적으로 추가 된 새로운 내용을 보편적으로 감지 할 수 없습니다 기존 내용.

• 주입 된 DOM 스크립트 내에서 클로킹 히스토리 API :

  document.head.appendChild(document.createElement('script')).text = '(' +
      function() {
          // injected DOM script is not a content script anymore, 
          // it can modify objects and functions of the page
          var _pushState = history.pushState;
          history.pushState = function(state, title, url) {
              _pushState.call(this, state, title, url);
              window.dispatchEvent(new CustomEvent('state-changed', {detail: state}));
          };
          // repeat the above for replaceState too
      } + ')(); this.remove();'; // remove the DOM script element
  
  // And here content script listens to our DOM script custom events
  window.addEventListener('state-changed', function(e) {
      console.log('History state changed', e.detail, location.hash);
      doSomething();
  });

• hashchange , popstate 이벤트 청취 :

  window.addEventListener('hashchange', function(e) {
      console.log('URL hash changed', e);
      doSomething();
  });
  window.addEventListener('popstate', function(e) {
      console.log('State changed', e);
      doSomething();
  });

확장 프로그램 별 : 백그라운드 / 이벤트 페이지 에서 URL 변경을 감지 합니다 .

이 탐색과 작업에 고급 API 있습니다 webNavigation , WebRequest 클래스는 하지만, 우리는 간단한 사용합니다 chrome.tabs.onUpdated의 이벤트 리스너 메시지를 전송 내용 스크립트를 :

• manifest.json을 :
  선언 배경 / 이벤트 페이지
  선언 콘텐츠 스크립트
  추가 "tabs" 허가 .

• background.js

  var rxLookfor = /^https?:\/\/(www\.)?google\.(com|\w\w(\.\w\w)?)\/.*?[?#&]q=/;
  chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
      if (rxLookfor.test(changeInfo.url)) {
          chrome.tabs.sendMessage(tabId, 'url-update');
      }
  });

• content.js

  chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
      if (msg === 'url-update') {
          doSomething();
      }
  });

답변

(function( $, oldHtmlMethod ){
    // Override the core html method in the jQuery object.
    $.fn.html = function(){
        // Execute the original HTML method using the
        // augmented arguments collection.

        var results = oldHtmlMethod.apply( this, arguments );
        com.invisibility.elements.findAndRegisterElements(this);
        return results;

    };
})( jQuery, jQuery.fn.html );

var observer = new MutationSummary({
  callback: updateWidgets,
  queries: [{
    element: '[data-widget]'
  }]
});

function updateWidgets(summaries) {
  var widgetSummary = summaries[0];
  widgetSummary.added.forEach(buildNewWidget);
  widgetSummary.removed.forEach(cleanupExistingWidget);
}