Question

所以我前几天做了一个小html文件，它只是一个有时钟，gif背景和搜索谷歌的搜索栏的页面。

之前我把它作为一个html文件工作但后来我想把它变成一个chrome扩展。我不得不制作一个manifest.js文件并将脚本放在一个单独的文件中，然后搜索就不再工作了。

我真的不知道我做错了什么。

这是我的清单文件：

＆＃13;

{
  "name": "THE GOODEST",
  "description": "Overrides the new tab page",
  "version": "0.1",
  "icons": {"48": "icon.png"},
  "incognito": "split",
  "chrome_url_overrides": {
    "newtab": "newTab.html"
  },
  "manifest_version": 2
}

＆＃13;

这是我的html文件：

＆＃13;

<!DOCTYPE html>

<html>

<title>New Tab</title>

<body onload = "resizeWindow()">
  
<iframe src="http://free.timeanddate.com/clock/i63s4yyj/n224/ahl/avb/pa10/tt0/tw1/tm1/ts1" frameborder=0 width="195" height="37" style="position:fixed; bottom: 10px"></iframe>

<input id="searchBar">

<button onclick="search()">Search</button>

<script type = "text/javascript" src = "scripts.js"></script>

</body>

</html>

＆＃13;

这是我的剧本：

＆＃13;

function search() {
  
    var text = document.getElementById("searchBar").value;

    window.open("https://www.google.com/search?q=" + text)

}

＆＃13;

Answer 1

正如@Deliaz在评论中所述，由于严格的环境隔离，内联javascript不允许在chrome扩展中使用。

将此更改为<button onclick="search()">Search</button>：<button id='searchButton'>Search</button>

并将一些代码放在单独的 script.js 文件中，该文件会在点击操作中将eventlistener附加到您的搜索按钮。

// Triggers when all DOM elements are loaded
document.addEventListener('DOMContentLoaded', function(event) {
  // Attaches listener for click event on search button
  document.querySelector('#searchButton').addEventListener('click', function(e) {
    return search();
  });
});

function search() {
    var text = document.getElementById("searchBar").value;
    window.open("https://www.google.com/search?q=" + text)
}

或者您也可以在输入字段上使用搜索事件：https://developer.mozilla.org/en-US/docs/Web/Events/search

功能在Chrome扩展程序中无效

1 个答案: