Fatal编程技术网
  • javascript/
  • Javascript 为什么Chrome扩展不返回Google搜索API结果？

Javascript 为什么Chrome扩展不返回Google搜索API结果？

javascript google-chrome google-chrome-extension

Javascript 为什么Chrome扩展不返回Google搜索API结果？,javascript,google-chrome,google-chrome-extension,Javascript,Google Chrome,Google Chrome Extension,我正在构建这个Google Chrome扩展，它将用定制的Google搜索引擎覆盖Chrome浏览器主页 这个定制的google搜索引擎假设返回用户输入的查询结果。为了测试这一点，我首先构建了这个定制搜索引擎的html版本，它运行良好。以下是截图： 但当我尝试将其作为chrome扩展时，它失败了，没有返回任何搜索结果 这是我的main.html: <HTML> <HEAD> <script type="text/javascript" src="jquery-1.

我正在构建这个Google Chrome扩展，它将用定制的Google搜索引擎覆盖Chrome浏览器主页

这个定制的google搜索引擎假设返回用户输入的查询结果。为了测试这一点，我首先构建了这个定制搜索引擎的html版本，它运行良好。以下是截图：

但当我尝试将其作为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>

{
  "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
}

// 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);
}
这是我的搜索。js：

google.load('search','1');
最后一个是我的main.js文件：

<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>

{
  "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
}

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

//定义变量
var-webSearch；
var lastSearch=0；
//初始化函数
$（函数（）{
webSearch=new google.search.webSearch（）；
setSearchCompleteCallback（this，webSearchComplete，[webSearch，lastSearch]）；
$（“#搜索框”）.focus（）；
});
//在键盘上开始搜索（实时）
$（“#搜索框”）.keyup（函数（）{
var query=$（this.val（）；
搜索（查询）；
});
//搜索查询
函数搜索（查询）{
如果（query.length>0）{
$（“#搜索内容”）.show（）；
}否则{
$（“#搜索内容”）.hide（）；
}
执行（查询）；
}
函数webSearchComplete（搜索器，searchNum）{
var contentDiv=document.getElementById（'web-content'）；
contentDiv.innerHTML=''；
var results=searcher.results；
var newResultsDiv=document.createElement（'div'）；
newResultsDiv.id='web内容'；
对于（var i=0；i
*我也制作了jsapi.js脚本，但是太长了，所以我不在这里发布

为什么会这样？是因为chrome不允许在其主页上与外部服务器进行任何交互还是什么？谢谢

多亏了@Rob W，现在我的问题解决了。看来我需要做两件事才能让它正常工作

首先，我需要将jsapi与https协议链接起来

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
将内联脚本移动到单独的JS文件中。打开扩展页面的控制台，您会看到关于违反的警告。好的，我已经按照您所说的做了，将我的内联脚本移动到单独的js文件（请参见上面的更改），但仍然不会显示搜索结果。我还可能做错什么？谢谢<代码>http://www.google.com/->
http://www.google.com/*
。检查控制台中的错误，您将能够自己调试大部分问题。嗯，这也不起作用。你能告诉我你在说什么错误吗？因为我从来不使用任何东西。@BhawnaMalhotra当然。看看我在这里写的博客：。请随意阅读或下载那里的代码：）