Question

我正在开发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没有正确加载）

Answer 1

您要求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;
})"

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

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

你可以做的是......首先chrome.tab.execute JQuery，然后chrome.tab.exe执行你的脚本。如果沿着这条路走下去，请确保在right order and right way。

中这样做

我建议不要走那条路。要么1）使用没有JQuery的纯javascript，要么2）使用像Webpack或Grunt这样的模块捆绑器将JQuery和你的脚本打包成一个JS文件。

您需要注意的另一个问题是，除非它具有EXACT SAME协议，域和端口作为父框架，否则您无法访问嵌入式iframe的内容。如果不是这种情况，则必须通过将frameId传递给chrome.tabs.executeScript来探索在特定帧的上下文中执行内容脚本。

访问带有Chrome扩展程序的iframe

1 个答案: