开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >使用铬扩展名访问iframe

问使用铬扩展名访问iframe
EN

Stack Overflow用户

提问于 2017-05-01 07:30:18

回答 1查看 906关注 0票数 1

我正在开发一个Chrome扩展程序，可以：

访问网站的iframe
检索一些数据
创建CSV文件

我第一步就在挣扎。我尝试过很多方法，但都失败了。

框架集如下所示：

<frameset rows="72,*,0,0,50" onunload="finalize()" frameborder="no" border="0" framespacing="0">
    <frame name="Nav" src="navigation.jsp" scrolling="no" noresize="noresize"/>
    <frame name="Trans" src="summary.do" marginheight="0" marginwidth="0" onload="javascript:logTrack();"/>
</frameset>

我最后一次尝试是：

popup.html

<html>
  <head><script src="jquery.js"></script></head>
  <body>
    <button id="test">TEST!</button>
    <script src="popup.js"></script>
  </body>
</html>

popup.js

document.getElementById("test").addEventListener('click', () => {
    console.log("Popup DOM fully loaded and parsed");

    function modifyDOM() {
        //You can play with your DOM here or check URL against your regex
        console.log('Tab script:');
        //console.log(document.body);

        // Find the frame
        var frame = $(document).find("frame[name='Trans']")[0];
        // Callback once frame's internals are loaded
        $(frame).load(function() {
          console.log('Found!');
        });

        return document.body.innerHTML;
    }

    //We have permission to access the activeTab, so we can call chrome.tabs.executeScript:
    chrome.tabs.executeScript({
        code: '(' + modifyDOM + ')();' //argument here is a string but function.toString() returns function's code
    }, (results) => {
        //Here we have just the innerHTML and not DOM structure
        console.log('Popup script:')
        console.log(results[0]);
    });
});

我得到了错误Uncaught ReferenceError: $ is not defined (可能JQuery没有正确加载)

google-chrome-extension

EN

回答 1

Stack Overflow用户

发布于 2017-05-01 10:21:12

您要求chrome在页面内容脚本的上下文中执行此字符串：

"(function modifyDOM() {
    //You can play with your DOM here or check URL against your regex
    console.log('Tab script:');
    //console.log(document.body);

    // Find the frame
    var frame = $(document).find("frame[name='Trans']")[0];
    // Callback once frame's internals are loaded
    $(frame).load(function() {
      console.log('Found!');
    });

    return document.body.innerHTML;
})"

内容脚本存在于它们自己的独立上下文中，这意味着它们与弹出窗口、本地页面、背景页或其他任何内容没有任何共享。

所以你是对的，JQuery没有被正确的加载--它根本没有被加载。

你能做的就是..。首先是chrome.tab.execute JQuery，然后是chrome.tab.execute脚本。如果您沿着这条路径走下去，请确保在right order and right way中这样做。

我建议不要走那条路。使用没有JQuery的纯javascript，或者使用像Webpack或Grunt这样的模块绑定器将JQuery和脚本打包到一个JS文件中。

您需要注意的另一个问题是，您无法访问嵌入的iframe的内容，除非它具有与父帧完全相同的协议、域和端口。如果不是这样的话，您将不得不通过将frameId传递给chrome.tabs.executeScript来探索在特定框架的上下文中执行内容脚本。

票数 1

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43721701

复制

相似问题