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
Post a Comment