爲什麼Chrome擴展程序不會返回Google搜索API結果？

我正在構建此Chrome瀏覽器擴展程序，該擴展程序將使用自定義Google搜索引擎覆蓋Chrome瀏覽器主頁。爲什麼Chrome擴展程序不會返回Google搜索API結果？

此自定義Google搜索引擎假設返回用戶輸入的查詢結果。爲了測試這個，我首先構建了這個自定義搜索引擎的html版本，並且它運行良好。下面是截圖：

enter image description here

但是，當我試圖使它的Chrome擴展，與正在返回任何搜索結果失敗。

這裏是我的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腳本過，但實在是太長了，所以我不張貼在這裏。

這究竟是爲什麼？是否因爲chrome不允許在其主頁上與外部服務器進行任何交互或什麼？謝謝！

來源

2013-06-29 Rizal Yusoff

將你的內聯腳本移動到一個單獨的JS文件。打開您的擴展頁面的控制檯，您會看到有關違反[內容安全策略]（https://developer.chrome.com/extensions/contentSecurityPolicy.html）的警告。 –

好吧，我已經像你所說的完成了，將我的內聯腳本移動到單獨的js文件（請參閱上面的更改），但搜索結果仍然不會出來。我還有什麼可能做錯了？謝謝！ –

'http：// www.google.com /' - >'http：// www.google.com/*'。檢查控制檯中的錯誤，你將能夠自己調試大部分問題。 –

感謝@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'",

來源

2013-06-29 13:40:19

爲什麼Chrome擴展程序不會返回Google搜索API結果？

回答

相關問題