2017-05-01 2 views
0

Je développe une extension Chrome qui fera:Accès à un iframe avec une extension de chrome

  1. Accès iframe
  2. est un site Récupérer des données
  3. Création d'un fichier CSV

Je me bats sur la première étape. J'ai essayé plusieurs façons de le faire et j'ai échoué.

Le frameset ressemble à ceci:

<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> 

Ma dernière tentative a été:

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]); 
    }); 
}); 

Je reçois l'erreur Uncaught ReferenceError: $ is not defined (probablement JQuery n'est pas correctement chargé)

Répondre

1

Vous vous demandez chrome pour exécuter cette chaîne dans le contexte du script de contenu de la page:

"(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; 
})" 

scripts de contenu vivent dans leur propre contexte isolé, ce qui signifie qu'ils ne partage RIEN avec la fenêtre contextuelle, la page locale, la page d'arrière-plan ou toute autre chose.

Vous avez raison, JQuery n'est pas chargé correctement - il n'est pas chargé du tout. Ce que vous pouvez faire est ... d'abord chrome.tab.execute JQuery, puis chrome.tab.execute votre script. Si vous suivez ce chemin, assurez-vous de le faire dans le right order and right way.

Je déconseille d'aller dans cette direction. Soit 1) utiliser du javascript pur sans JQuery ou 2) utiliser un bundler de module comme Webpack ou Grunt pour empaqueter JQuery et votre script dans un seul fichier JS.

Un autre problème que vous voudrez surveiller est que vous ne pouvez pas accéder au contenu d'un iframe incorporé à moins qu'il n'ait le protocole, les domaines et le port EXACT SAME comme cadre parent. Si ce n'est pas le cas, vous devrez explorer l'exécution d'un script de contenu dans le contexte d'un cadre particulier en passant un frameId à chrome.tabs.executeScript.