2011-07-10 204 views
5

在manifest.json文件中,我聲明我要注入一些腳本,像這樣:在Chrome擴展中,內容腳本不會影響iframe內部?

{ 
    "name": "my extension", 

    "version": "1.0", 

    "background_page": "background.html", 

    "permissions": ["contextMenus", "tabs", "http://*.example.com/*"], 

    "content_scripts": [ 
     { 
      "matches": 
       [ 
       "http://*.taobao.com/*", 
       "http://*.yintai.com/*" 
       ], 
      "run_at": "document_idle", 
      "js": ["jquery-1.5.1.min.js","jquery-ui-1.8.13.custom.min.js", "contentscript.js"], 
      "all_frames": true 
     } 
    ] 
} 

在內容腳本,創建一個iframe,等等。到目前爲止它工作正常。像這樣:

$('<div id="my_notifier"></div>').appendTo($('body')).html('<iframe src="http://example.com"></iframe>'); 

問題是,在iframe內部,它不會繼承任何內容腳本。如果我想使用jQuery,我必須使用<script src=...將其再次包含在iframe中。

我不想再次包含jQuery,因爲我已經將它放入擴展中。我不希望用戶在擴展需要運行的每個頁面上一次又一次下載jQuery。

我試過屬性"all_frames": true,但它不起作用。

請指教。謝謝。

編輯:我添加example.com的matches屬性是這樣的:

"content_scripts": [ 
    { 
     "matches": 
      [ 
      "http://*.taobao.com/*", 
      "http://*.yintai.com/*", 
      "http://*.example.com/*" 
      ], 
     "run_at": "document_idle", 
     "js": ["jquery-1.5.1.min.js","jquery-ui-1.8.13.custom.min.js", "contentscript.js"], 
     "all_frames": true 
    } 
] 

但它不工作。

更清晰,說的iframe(example.com)的內容是:

<!DOCTYPE HTML> 

<html> 
<head> 
    <title>Untitled</title> 
</head> 

<body> 

<div></div> 

<script type="text/javascript"> 
    $('div').html('hi'); 

</script> 

</body> 
</html> 

將會有一個錯誤:$未定義

爲了使它的工作,我必須使用方法:

<!DOCTYPE HTML> 

<html> 
<head> 
    <title>Untitled</title> 
</head> 

<body> 

<div></div> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    $('div').html('hi'); 

</script> 

</body> 
</html> 
+0

你可以用'all_frames'集合和你創建iframe的內容腳本代碼顯示你的完整清單嗎? – serg

+0

好的,我編輯了這個問題。 – Betty

+0

嘿貝蒂,現在Serg已經解決了最初的問題,看看這個問題,等待幀加載到訪問它:http:// stackoverflow。com/questions/4669089/how-to-a-google-chrome-extension-and-add-click-event- – Darin

回答

4

你需要你的iframe的網址http://example.com添加到列表中並指定要注入哪些內容腳本:

"content_scripts": [ 
     { 
      "matches": 
       [ 
       "http://*.taobao.com/*", 
       "http://*.yintai.com/*" 
       ], 
      "run_at": "document_idle", 
      "js": ["jquery-1.5.1.min.js","jquery-ui-1.8.13.custom.min.js", "contentscript.js"] 
     },{ 
      "matches":["http://example.com/*"], 
      "run_at": "document_idle", 
      "js": ["jquery-1.5.1.min.js"], 
      "all_frames": true 
     } 
    ] 
+0

我已經試過你的方式,並通過簡單地將example.com添加到'matches'屬性,但沒有運氣的另一種方式。看到編輯的問題。 PS:我按回車來換一個新行,我很驚訝地發現評論已發送。 >< – Betty

+0

@Betty它不會按照你想要的方式工作。內容腳本是沙盒,常規頁面無法訪問作爲內容腳本注入的jquery。如果exam​​ple.com框架是您的擴展的一部分,並且您可以完全控制它,則可以將該頁面中的所有javascript移動到內容腳本中,並將它與jquery一起注入。 – serg

+0

謝謝@serg。我的example.com框架的內容是動態生成的,所以我不能把它放在擴展名中。我認爲這意味着我想要做的事情無法完成。我將不得不使用

0

如果你表現的事情,如果我推薦您使用純JavaScript,而不是jQuery和性能差異將是明顯的重型頁面包含幾個iFrame的;特別是如果您使用jQuery的功能,如追加篩選器複雜的選擇器

相關問題