我刚刚开始通过查看 google 的 example here: 来构建 chrome 扩展。
我所做的与上面提到的完全一样。虽然我可以看到我在 popup.html 正文中写的任何内容，但似乎 popup.js 的任何部分都不起作用。我猜 javascript 不适用于我的 chrome 扩展。
我相信我遵循了 Google 的 CSP，但仍然如此。 感谢期待。
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();
});
list .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"
]
}
最佳答案
好吧，很好又简单的解决方案
更改:
req.open("GET", this.kittensOnFlickr_, true);
致:
req.open("GET", this.searchOnFlickr_, true);
关于javascript - Chrome 扩展程序 - javascript 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15756060/