如何从chrome扩展程序访问iframe?

时间:2017-05-22 22:07:20

标签: javascript jquery iframe google-chrome-extension

如何让我的扩展程序适用于像adblock这样的所有框架?

我尝试将"all_frames" : true添加到我的清单文件中,但它无效。

我尝试使用此代码来获取具有特定ID的文本:

var theId = "starts with something";
var myArray = [];
$('[id^="theId"]').each(function(i, obj) {
    myArray.push($(this).text());
}); 

$.unique(myArray);

console.log(myArray);

但它说我的数组是空的。当我检查页面上的元素时,我看到“顶层”图层和“目标内容”图层。该代码仅在我在“目标内容”层的控制台中执行时才有效。我可以在内容脚本中使用此代码,还是需要以某种方式使用background.js?

2 个答案:

答案 0 :(得分:1)

我认为您的脚本可能在DOM加载之前执行,尝试将您的函数放入其中:

document.addEventListener('DOMContentLoaded', function() {

});

修改 这个事件似乎在内容脚本中什么都不做,我认为这是因为它们已经在加载DOM之后加载,并且永远不会触发。

然而,这似乎无法解决,但不确定原因:

$(function(){
//something
});

这需要jQuery注入以及

答案 1 :(得分:1)

Continued from SO44122853

我看到你发现内容是在iframe中加载的。所以我在这里有一个工作演示PLUNKER,这里的代码片段就是以防万一。

详细信息在 PLUNKER

中发表了评论

演示

由于需要运行2个单独的页面而无法正常运行



<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <style></style>
</head>

<body>
  <!--iframe is same as the one on the site, with the exception
  of the src-->
  
  <iframe id="ptifrmtgtframe" name="TargetContent" title="Main Content" frameborder="0" scrolling="auto" width='90%' src="tables.html"></iframe>
  
 <!--The data is displayed as a one string-->
  <output id='display'></output>
  
  <script>
  
  // Reference the iframe
    var iFID = document.getElementById("ptifrmtgtframe");
  // Register the load event on iframe
    iFID.onload = function(e) {
      // Callback is extractText function
      return extractText('#ptifrmtgtframe', '#display', '.PSLONGEDITBOX');
    }

    /* Pass iframe and display as a single selector
    || Pass targets as a multiple selector
    */
    function extractText(iframe, display, targets) {
      var iArray = [];
      var iFrame = document.querySelector(iframe);
      var iView = document.querySelector(display);
      var iNode = "";
      
      /* .contentWindow is property that refers to content
      || that is in an iframe. This is the heart of the
      || demo.
      */
      var iContent = iFrame.contentDocument || iFrame.contentWindow.document;
      var iTarget = iContent.querySelectorAll(targets);
      
      /* .map() will call a function on each element
      || and return a new array as well.
      */
      Array.from(iTarget).map(function(node, idx) {

        iNode = node.textContent;
        iView.textContent += iNode;
        iArray.push(iNode);
        return iArray;
      });
      console.log(iArray);
    }
  </script>
</body>
&#13;
&#13;
&#13;