CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extension
Ryzal Yusoff
Ryzal Yusoff

Reputation: 1047

Why Chrome Extension wont return Google Search API results?

I am building this Google Chrome extension that will override Chrome Browser homepage with custom google search engine.

This custom google search engine suppose to returns the result from the query that the user entered. To test this, i first build the html version of this custom search engine first and it works well. Below is the screenshot :

enter image description here

But when i tried to make it as the chrome extension, it fails with no search results being returned.

here is my main.html :

<HTML>
<HEAD>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="search.js" type="text/javascript"></script>
<TITLE>Search or Share</TITLE>
<link rel="stylesheet" type="text/css" href="main.css" />
</HEAD>
<BODY>

<center>


<div id="page-wrap">
<div style="height:30px"></div>

<center>
    <div id="logo"><img src="logo.png" /></div>
    <input type="text" title="Real Time Search" id="searchbox" name="searchbox"/>
</center>
<br/><br/>
<div id="search-content">   
    <div class="content" style="width:600px; display:inline">
        <div class="header">Web</div>
        <div class="data" id="web-content"></div>
    </div>
</div>

</div>
</center>
<div id="footer">
Copyright &copy; 2013
</div>
</BODY>
<SCRIPT src="main.js"></SCRIPT>

</HTML>

and here is my manifest.json :

{
  "name": "Search or Share",
  "version": "0.2",
  "incognito": "split",
   "background": { 
    "scripts": ["jquery-1.9.1.js","search.js","main.js"] 
  },
  "permissions": [
    "http://www.google.com/*"
  ],
  "chrome_url_overrides": {
    "newtab": "main.html"
  },
  "manifest_version": 2
}

here is my search.js :

google.load('search','1');

and this last one is my main.js file :

// Define variables
var webSearch;
var lastSearch = 0;

//Init function
$(function () { 
    webSearch = new google.search.WebSearch();
    webSearch.setSearchCompleteCallback(this, webSearchComplete, [webSearch, lastSearch]);

    $('#searchbox').focus();
});

// Begin search on keyup (realtime)
$('#searchbox').keyup(function () {
    var query = $(this).val();
    search(query);
});

// Search for the query 
function search(query) {
    if (query.length > 0) {
        $("#search-content").show();
    } else {
        $("#search-content").hide();
    }
    webSearch.execute(query);
}


function webSearchComplete(searcher, searchNum) {
    var contentDiv = document.getElementById('web-content');
    contentDiv.innerHTML = '';
    var results = searcher.results;
    var newResultsDiv = document.createElement('div');
    newResultsDiv.id = 'web-content';
    for (var i = 0; i < results.length; i++) {
        var result = results[i];
        var resultHTML = '<div style="height:70px; margin-top:5px;">';
        resultHTML += '<a href="' + result.unescapedUrl + '" target="_blank"><b>' + result.titleNoFormatting + '</b></a><br/>' + result.content + '<div/>';
        newResultsDiv.innerHTML += resultHTML;
    }
    contentDiv.appendChild(newResultsDiv);
}

*i have made the jsapi.js script too, but it is too long so i dont post it here.

Why is this happening? is it because chrome wont allow any interaction with the outside server on its homepage or what? Thanks!

Upvotes: 2

Views: 2225

Answers (1)

Ryzal Yusoff
Ryzal Yusoff

Reputation: 1047

Thanks to @Rob W, now my problem is solved. It seems I need to do two things to get this thing working correctly.

First, I need to link the jsapi with the https protocol.

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

Then, I need to edit the manifest.json file to give permission to any search link from google.com with the https protocol, and specify content_security_policy.

  "permissions": [ "https://*.google.com/*"],
  "content_security_policy": "script-src 'self' https://www.google.com; object-src 'self'",

Upvotes: 1

Related Questions