2013-06-29 2 views
2

Я создаю это расширение Google Chrome, которое переопределит главную страницу браузера Chrome с помощью пользовательской поисковой системы Google.Почему расширение Chrome не возвращает результаты API поиска Google?

Эта обычная поисковая система Google предполагает, что она возвращает результат запроса, введенного пользователем. Чтобы проверить это, я сначала создаю html-версию этой пользовательской поисковой системы, и она работает хорошо. Ниже приведен скриншот:

enter image description here

Но когда я попытался сделать это как расширение хром, он не с никаких результатов поиска не возвращаются.

вот мой 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> 

и вот мой 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 
} 

вот мой search.js:

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

и это последний мой main.js файл:

// 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); 
} 

* я сделал сценарий jsapi.js тоже, но это слишком долго, поэтому я не разместить его здесь.

Почему это происходит? это потому, что хром не позволяет взаимодействовать с внешним сервером на своей домашней странице или что? Благодаря!

+0

Переведите встроенный скрипт в отдельный файл JS. Откройте консоль для своей страницы расширения, и вы увидите предупреждение о нарушении [политики безопасности контента] (https://developer.chrome.com/extensions/contentSecurityPolicy.html). –

+0

Хорошо, я сделал то, что вы сказали, переместив мои встроенные скрипты, чтобы разделить файл js (см. Выше для изменений), но все же результаты поиска не выйдут. Что еще я мог сделать неправильно? благодаря! –

+1

'http: // www.google.com/' -> 'http: // www.google.com/*'. Проверьте ошибки в консоли, вы сможете самостоятельно отлаживать значительную часть проблемы. –

ответ

1

Благодаря @Rob W, теперь моя проблема решена. Кажется, мне нужно сделать две вещи, чтобы заставить эту штуку работать правильно.

Во-первых, мне нужно связать jsapi с протоколом https.

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

Затем мне нужно отредактировать файл manifest.json, чтобы дать разрешение на любой поисковой связи от google.com с протоколом HTTPS, и указать content_security_policy.

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