Question

我想构建一个简单的Chrome扩展程序，用于搜索当前活动标签页的HTML / DOM，并在弹出窗口中打印出包含与某个来源匹配的javascript的元素数量。

我在Chrome扩展程序指南中读到，内容脚本无法与页面上的其他javascript进行交互或甚至查看其他javascript，这让我相信这是不可能的。有没有人知道创建这种类型的扩展是否可行？

Answer 1

我不久前做了类似的事;我需要看到元素＆＃39; onclick和其他属性，这通常是不可能的：

值得注意的是，页面和扩展程序共享的JavaScript对象会发生什么 - 例如window.onload事件。每个孤立的世界都会看到自己的对象版本。

有injecting code into the page's context的技巧。这样的代码可以到达窗口的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属性。

通过Chrome扩展程序搜索页面内的javascript

1 个答案: