2016-05-31 11 views
1

Ich möchte im Grunde eine Website mithilfe einer Chrome-Erweiterung automatisieren. Aber diese Website hat sehr viel clientseitigen Code, so dass es wirklich schwierig ist herauszufinden, welche Anfrage ich machen muss, um die benötigten Informationen zu erhalten.Unsichtbare Registerkarten in Chrome-Erweiterung

Der einfachste Weg, die ich denken kann wäre ein Content-Skript zu verwenden, um Text in Eingabeelemente eingeben und Schaltflächen klicken, so (mit jQuery in diesem Fall):

$.ready(function(){ 
    $("#input").val("foo"); 
    $("#submit").click(); 
}); 

Ganz auf diese Frage ähnlich : Injecting input into a tab opened by a Chrome Extension, aber die Interaktion mit dieser Website sollte nicht sichtbar sein.

Also: Kann ich Seiten in Chrome von einer Erweiterung öffnen, die für den Benutzer nicht sichtbar sind und sie verwenden, um mit Websites zu interagieren?

Antwort

6

Wenn Sie die Seite sein, völlig unsichtbar wollen, glaube ich, dass die einzige Option, um es in einen iframe auf dem Hintergrund Seite zu laden ist. Sie können dann mit Inhaltsskripten auf die Seite im Iframe zugreifen, genau so wie Sie auf eine normale sichtbare Seite zugreifen würden.

Da viele Websites die Einbettung mithilfe des Headers X-Frame-Options begrenzen, müssen Sie wahrscheinlich die webRequest-API verwenden, um diesen Header vor dem Laden der Seite in einen Iframe zu entfernen. Einige Seiten verwenden auch andere Techniken, um eine Einbettung zu verhindern, die dies weiter verkomplizieren könnte.

Beispielcode:

manifest.json

{ 
    "manifest_version": 2, 
    "name": "Hidden page in background", 
    "description": "Interact with a hidden page in background", 
    "version": "1.0", 

    "background": { 
    "page": "background.html", 
    "persistent": true 
    }, 
    "content_scripts": [ 
    { 
     "matches": ["*://*.google.fr/*"], 
     "js": ["contentscript.js"], 
     "all_frames": true 
    } 
    ], 
    "permissions": ["*://*.google.fr/*", "webRequest", "webRequestBlocking"] 
} 

background.html

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="background.js"></script> 
    </head> 
    <body> 
    <iframe id="iframe1" width="1000 px" height="600 px" src="http://www.google.fr"></iframe> 
    </body> 
</html> 

background.js

// This is to remove X-Frame-Options header, if present 
chrome.webRequest.onHeadersReceived.addListener(
    function(info) { 
     var headers = info.responseHeaders; 
     var index = headers.findIndex(x=>x.name.toLowerCase() == "x-frame-options"); 
     if (index !=-1) { 
     headers.splice(index, 1); 
     } 
     return {responseHeaders: headers}; 
    }, 
    { 
     urls: ['*://*.google.fr/*'], // 
     types: ['sub_frame'] 
    }, 
    ['blocking', 'responseHeaders'] 
); 

content_script.js

var elementToInsert = document.createElement("h1"); 
elementToInsert.textContent = "This text comes from my content script."; 
document.body.insertBefore(elementToInsert, document.body.firstChild); 

Paar von Noten:

  • Die Entfernung von X-Frame-Options Header ist nicht auf die Hintergrundseite hier beschränkt. Es würde ermöglichen, die relevante Seite in Iframes auf jeder anderen Seite einzubetten. Leider scheint Chrome den ALLOW-FROM uri Wert nicht zu unterstützen, der verwendet werden könnte, um die Einbettung auf Ihre Erweiterung zu beschränken.
  • Das Inhaltsskript wird hier in alle Seiten eingefügt. Sie können es programmatisch nur auf den iframe auf der Hintergrundseite injizieren, aber das wird ein bisschen komplizierter.
  • Ich habe www.google.fr als Beispiel verwendet, weil es X-Frame-Options verwendet, aber keine anderen Techniken verwendet, um die Einbettung zu verhindern. Ich habe die französische Domain verwendet, da google.com automatisch zu lokalen Domains auf Länderebene umleitet.
+0

Genau das habe ich gesucht. In meinem Fall muss ich überraschenderweise nicht einmal den X-Frame-Options-Header entfernen. – Pete

0

Siehe tabs.create, Sie könnten den folgenden Code aufrufen und eine unsichtbare Registerkarte erstellen (nicht aktiv).

chrome.tabs.create({ url: 'https://www.google.com', active: false, }); 
+0

Dies ist immer noch eine sichtbare Registerkarte. – Pete

+0

Was ich gerne tun würde, könnte normalerweise mit einem kopflosen Browser gemacht werden, aber nicht in einer Chrome-Erweiterung. – Pete