google chrome extension - Using REST to Invoke JSON Custom Search API -


i'm attempting json data google custom search api using javascript, have been unsuccessful @ retrieving data.

this chrome extension.

i've read using rest article multiple times, have still been having problems.

all right results, , show json result in .html file. help/insight.

popup.js file

function getcurrenttaburl(callback) {   var queryinfo = {     active: true,     currentwindow: true   };    chrome.tabs.query(queryinfo, function(tabs) {      var tab = tabs[0];      var url = tab.url;      console.assert(typeof url == 'string', 'tab.url should string');      callback(url);   });    // methods of chrome extension apis asynchronous. means   // cannot this:   //   // var url;   // chrome.tabs.query(queryinfo, function(tabs) {   //   url = tabs[0].url;   // });   // alert(url); // shows "undefined", because chrome.tabs.query async. }  function getsearchurl(searchterm, callback, errorcallback) {   var mgoogleapikey = "myapikey";   var mgooglecustomsearchkey = "0000:mycustomsearchkey";   var startindex = "";   var term= "+added+term";   var searchurl = 'https://www.googleapis.com/customsearch/v1?key=' + mgoogleapikey +    '&num=10&cx=' + mgooglecustomsearchkey + '&q=site:' + encodeuricomponent(searchterm) + term;   var x = new xmlhttprequest();   x.open('get', searchurl);   // google custom search api responds json, let chrome parse it.   x.responsetype = 'json';   x.onload = function() {     // parse , process response google custom search.     var response = x.response;     if (!response || !response.responsedata || !response.responsedata.results ||         response.responsedata.results.length === 0) {       errorcallback('no response google custom search api!');       return;     }     var firstresult = response.responsedata.results[0];     // take thumbnail instead of full image approximately     // consistent image size.     var imageurl = firstresult.tburl;     var width = parseint(firstresult.tbwidth);     var height = parseint(firstresult.tbheight);     console.assert(         typeof imageurl == 'string' && !isnan(width) && !isnan(height),         'unexpected respose google custom search api!');     callback(imageurl, width, height);   };   x.onerror = function() {     errorcallback('network error.');   };   x.send(); }  function renderstatus(statustext) {   document.getelementbyid('status').textcontent = statustext; }  document.addeventlistener('domcontentloaded', function() {   getcurrenttaburl(function(url) {     // put tab url in google search.     renderstatus('performing google custom search ' + url);      getsearchurl(url, function(imageurl, width, height) {        renderstatus('search term: ' + url + '\n' +           'google custom search results: ' + imageurl);       var imageresult = document.getelementbyid('image-result');        imageresult.width = width;       imageresult.height = height;       imageresult.src = imageurl;       imageresult.hidden = false;      }, function(errormessage) {       renderstatus('cannot display image. ' + errormessage);     });   }); }); 

manifest.json

{   "manifest_version": 2,    "name": "getting started example",   "description": "this extension shows google custom search result current page",   "version": "1.0",    "browser_action": {     "default_icon": "icon.png",     "default_popup": "popup.html"   },   "permissions": [     "activetab",     "https://ajax.googleapis.com/"   ] } 

popup.html

<!doctype html> <!--  page shown when extension button clicked, because  "browser_action" field in manifest.json contains "default_popup" key  value "popup.html".  --> <html>   <head>     <title>getting started extension's popup</title>     <style>       body {         font-family: "segoe ui", "lucida grande", tahoma, sans-serif;         font-size: 100%;       }       #status {         /* avoid excessively wide status text */         white-space: pre;         text-overflow: ellipsis;         overflow: hidden;         max-width: 400px;       }     </style>      <!--       - javascript , html must in separate files: see our content security       - policy documentation[1] details , explanation.       -       - [1]: https://developer.chrome.com/extensions/contentsecuritypolicy      -->     <script src="popup.js"></script>   </head>   <body>     <div id="status"></div>     <img id="image-result" hidden>   </body> </html> 


Comments

Popular posts from this blog

Django REST Framework perform_create: You cannot call `.save()` after accessing `serializer.data` -

Why does Go error when trying to marshal this JSON? -