2016-07-24 11 views
0

私はChrome拡張開発の初心者です。新しいタブを開くたびにランダムな漫画を表示する拡張機能を作成しようとしています。Chromeで新しいタブを開くときに画像を表示

以下は、私のファイルは、

newtab.html

<html> 
    <head> 
     <script src="newtab.js"></script> 
     </head> 
    <body> 
    </body> 
</html> 

newtab.js(私は絵をランダム化する必要はありません。リンクは自動でランダムな画像を提供します)

var ImageSource = 'http://explosm.net/comics/random', 
parser = new DOMParser(); 

chrome.tabs.onCreated.addListener(function(tab) { 
var xhr = new XMLHttpRequest(); 
xhr.open("GET", ImageSource, true); 
xhr.onreadystatechange = function() { 
    if(xhr.readyState == 4) 
    { 
     var xml = parser.parseFromString(xhr.responseText, 'text/xml'), 
      imageUrl = getValueForElementNode(xml, 'img'); 

     document.write('<div><img src="'+imageUrl+'"></div>'); 
     setTimeout(function() { notify.close(); }, 4000); 
    } 
} 
xhr.send(); 
}); 

function getValueForElementNode(doc, node) { 
return doc.getElementsByTagName(node)[7].childNodes[0].nodeValue; 
} 

manifest.jsonを

{ 
"name": "Comic of the tab", 
"description": "Delivers random comic strip from your favourite series!", 
"version": "1.0.0", 
"manifest_version": 2, 
"icons": {"128": "icon_128.png"}, 
"chrome_url_overrides" : { "newtab": "newtab.html"}, 
"permissions" : [ 
       "clipboardWrite", 
       "webRequest", 
       "http://*", 
       "http://explosm.net/" 
      ], 
"background": { 
     "scripts": ["newtab.js"] 
} 
} 

私は次のエラーが取得しています:

  • VM472拡張子:: uncaught_exception_handler:tabs.onCreatedのイベントハンドラ で8エラー:例外TypeError: 未定義のプロパティを読み取ることができません 'のchildNodes' をgetValueForElementNodeで (クロム拡張://pnhbnidjljkmhmnomejbfniemnpembea/newtab.js:17:45) クロム拡張時://pnhbnidjljkmhmnomejbfniemnpembea/newtab.js:9:28
  • のXMLHttpRequestがをロードできません。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。 Origin 'chrome-extension:// pnhbnidjljkmhmnomejbfniemnpembea'はアクセスできません。

答えて

0

あなたはchromeの同じ起点ポリシーの対象となります。これは基本的に、あなた自身が所有していない起源(「ウェブサイト」)のページをリクエストすることを許可されていないことを意味します。これはChrome拡張機能にも適用されますが、これを上回る方法があります。そのようなあなたのmanifest.jsonを変更します。

"permissions": [ 
    "http://explosm.net/" 
] 

これは、あなたがhttp://explosm.netに要求を行うことができ(また、インストール時にユーザーに通知)します

に加えて、あなたはあなたに上書きしようとしているページを指定する必要がありますmanifest.json、そのような:

"chrome_url_overrides": { 
    "newtab": "mytab.html" 
} 

次に、あなたのスクリプトがexplosmから漫画に引っ張り、ページ上に表示書く

+0

これでも動作しません! – Bharg

+0

新しいウィンドウを作成したい場合は、単に 'window.open'を実行することができます – MayorMonty

+0

いいえ、私は新しいウィンドウを作成したくありません。新しいタブを開くたびに新しいタブ画面にコミックを表示したいのですが。 – Bharg

関連する問題