0

我剛開始看在谷歌的example here:Chrome擴展JavaScript的不工作

我做了完全一樣的上述建設Chrome擴展程序。雖然我可以看到我在popup.html的主體中寫的任何內容,但似乎popup.js的任何部分都不起作用。我猜JavaScript不適用於我的Chrome擴展。

我相信我依然是谷歌的CSP。 感謝anticiptaion。

POPUP.HTML

<!doctype html> 
<html> 
    <head> 
    <title>Getting Started Extension's Popup</title> 
    <style> 
     body { 
     min-width: 357px; 
     overflow-x: hidden; 
     } 

     img { 
     margin: 5px; 
     border: 2px solid black; 
     vertical-align: middle; 
     width: 75px; 
     height: 75px; 
     } 
    </style> 

    <!-- 
     - JavaScript and HTML must be in separate files: see our Content Security 
     - Policy documentation[1] for details and explanation. 
     - 
     - [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html 
    --> 
    <script src="popup.js"></script> 
    </head> 
    <body> 
    </body> 
</html> 

POPUP.JS

var QUERY = 'Kittens'; 

var kittenGenerator = { 
    /** 
    * Flickr URL that will give us lots and lots of whatever we're looking for. 
    * 
    * See http://www.flickr.com/services/api/flickr.photos.search.html for 
    * details about the construction of this URL. 
    * 
    * @type {string} 
    * @private 
    */ 
    searchOnFlickr_: 'https://secure.flickr.com/services/rest/?' + 
     'method=flickr.photos.search&' + 
     'api_key=90485e931f687a9b9c2a66bf58a3861a&' + 
     'text=' + encodeURIComponent(QUERY) + '&' + 
     'safe_search=1&' + 
     'content_type=1&' + 
     'sort=interestingness-desc&' + 
     'per_page=20', 

    /** 
    * Sends an XHR GET request to grab photos of lots and lots of kittens. The 
    * XHR's 'onload' event is hooks up to the 'showPhotos_' method. 
    * 
    * @public 
    */ 
    requestKittens: function() { 
    var req = new XMLHttpRequest(); 
    req.open("GET", this.kittensOnFlickr_, true); 
    req.onload = this.showPhotos_.bind(this); 
    req.send(null); 
    }, 

    /** 
    * Handle the 'onload' event of our kitten XHR request, generated in 
    * 'requestKittens', by generating 'img' elements, and stuffing them into 
    * the document for display. 
    * 
    * @param {ProgressEvent} e The XHR ProgressEvent. 
    * @private 
    */ 
    showPhotos_: function (e) { 
    var kittens = e.target.responseXML.querySelectorAll('photo'); 
    for (var i = 0; i < kittens.length; i++) { 
     var img = document.createElement('img'); 
     img.src = this.constructKittenURL_(kittens[i]); 
     img.setAttribute('alt', kittens[i].getAttribute('title')); 
     document.body.appendChild(img); 
    } 
    }, 

    /** 
    * Given a photo, construct a URL using the method outlined at 
    * http://www.flickr.com/services/api/misc.urlKittenl 
    * 
    * @param {DOMElement} A kitten. 
    * @return {string} The kitten's URL. 
    * @private 
    */ 
    constructKittenURL_: function (photo) { 
    return "http://farm" + photo.getAttribute("farm") + 
     ".static.flickr.com/" + photo.getAttribute("server") + 
     "/" + photo.getAttribute("id") + 
     "_" + photo.getAttribute("secret") + 
     "_s.jpg"; 
    } 
}; 

// Run our kitten generation script as soon as the document's DOM is ready. 
document.addEventListener('DOMContentLoaded', function() { 
    kittenGenerator.requestKittens(); 
}); 

的manifest.json

{ 
    "manifest_version": 2, 

    "name": "WikiConnect", 
    "description": "This extension demonstrates a 'browser action' with kittens.", 
    "version": "1.0", 

    "browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
    }, 
    "permissions": [ 
    "https://secure.flickr.com/" 
    ], 

    "web_accessible_resources": [ 
    "notification.html","popup.html","popup.js" 
    ] 
} 
+3

如果您發佈您的代碼,我可以幫你修復它。 – BeardFist

+0

@BeardFist,先謝謝了。一個非常基本的問題,但沒有線索。 – shank

回答

2

好的,好的和簡單的解決方案

變化:

req.open("GET", this.kittensOnFlickr_, true); 

要:

req.open("GET", this.searchOnFlickr_, true); 
+0

謝謝這麼多:) – shank