Поиск javascript на странице через расширение Chrome

Question

Я хотел создать простое расширение Chrome, которое будет искать HTML/DOM текущей активной вкладки и выводить во всплывающем окне количество элементов, которые содержат javascript, соответствующий определенному источнику.

Я прочитал в руководствах по расширению Chrome, что скрипты содержимого не могут ни взаимодействовать, ни даже видеть другой javascript на странице, что наводит меня на мысль, что это невозможно. Кто-нибудь знает наверняка, возможно ли создание такого типа расширения?

Answer 1

Я сделал нечто подобное не так давно; Мне нужно было видеть элементы onclick и другие атрибуты, что обычно невозможно:

Стоит отметить, что происходит с объектами JavaScript, которые совместно используются страницей и расширением - например, window.onload событие. Каждый изолированный мир видит свою версию объекта.

Существует методика внедрения кода в контекст страницы. Такой код может достичь JS-контекста окна и затем передать его в ваш скрипт контента. В моем случае я просто добавил дополнительный атрибут к узлам с присоединенным JS.

// Fill inline handler copies
function fillClickHandlers(callback) {
  var injected = function() {
    // Note: This executes in another context!
    // Note: This assumes jQuery in the other context!
    $("[onclick]").each(function() {
      this.dataset["onclick"] = this.attributes["onclick"].value;
    });
    $("[onsubmit]").each(function() {
      this.dataset["onsubmit"] = this.attributes["onsubmit"].value;
    });
    $("[onload]").each(function() {
      this.dataset["onload"] = this.attributes["onload"].value;
    });
  }

  var s = document.createElement('script');
  s.textContent = "(" + injected + ")();";
  (document.head||document.documentElement).appendChild(s);
  // Script is synchronously executed here
  s.parentNode.removeChild(s);
  callback();
}

// Erase inline handlers copies
function eraseClickHandlers(callback) {
  $("[data-onclick], [data-onsubmit], [data-onload]").each(function() {
    delete this.dataset.onclick;
    delete this.dataset.onsubmit;
    delete this.dataset.onload;
  });
  callback();
}

// Usage:
fillClickHandlers(function() {
  doActualWork(function() {
    eraseClickHandlers(doSomethingElse) 
  });
});

---

Обратите внимание, что для фактического <script> теги, вы можете свободно проверять src или же textContent приписывать.