2016-05-31 8 views
1

基本的にChrome拡張機能を使用してウェブサイトを自動化したいと考えています。しかし、このウェブサイトにはクライアントサイドのコードが非常に多いので、必要な情報を入手するためにどのリクエストを行う必要があるかを知ることは本当に難しいです。クロム拡張子の目に見えないタブ

私は考えることができる最も簡単な方法は、(この場合はjQueryを使って)このように、入力要素にテキストを入力し、ボタンをクリックし、コンテンツのスクリプトを使用することです:

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

この質問に非常に似:Injecting input into a tab opened by a Chrome Extensionですが、そのウェブサイトとのやり取りは表示されないようにしてください。

So:ユーザーが見ることができない拡張機能のChromeでページを開いて、ウェブサイトとやりとりすることはできますか?

答えて

6

あなたは、ページが完全に見えないようにしたい場合は、私が唯一のオプションは、背景ページ上のiframeにロードすることであると信じています。通常の表示ページにアクセスするのと同様に、コンテンツスクリプトを使用してiframe内のページにアクセスできます。

X-Frame-Optionsヘッダーを使用して埋め込みを制限するサイトが多いため、iframeにページを読み込む前にwebRequest APIを使用してそのヘッダーを削除する必要があります。一部のページでは埋め込みを防止するために他の手法も使用されていますが、これによりさらに複雑になる可能性があります。

例コード:

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

ノートのカップル:

  • の除去X-Frame-Optionsヘッダーはここの背景ページに限定されません。関連するページをiframeに他のページにも埋め込むことができます。申し訳ありませんが、Chromeは埋め込みを自分の拡張機能に限定するために使用できるALLOW-FROM uriの値をサポートしていないようです。
  • コンテンツスクリプトがここのすべてのページに挿入されています。あなたはプログラムで、バックグラウンドページのiframeにのみ注入することができますが、それはもう少し複雑になります。
  • を使用しているため、例としてwww.google.frを使用しましたが、埋め込みを防ぐために他の方法は使用していません。 google.comはローカルの国レベルのドメインに自動的にリダイレクトする傾向があるため、フランス語ドメインを使用しました。
+0

これはまさに私が探していたものです。私の場合は、意外にもX-Frame-Optionsヘッダを削除する必要はありません。 – Pete

0

tabs.createを参照すると、非表示のタブ(アクティブではない)を作成する次のコードを呼び出すことができます。

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

これはまだ表示されているタブです。 – Pete

+0

私は通常、ヘッドレスブラウザではできますが、クロムエクステンションではできません。 – Pete

関連する問題