javascript - Chrome 扩展程序中的功能无法运行

标签 javascript html google-chrome google-chrome-extension

所以我前几天制作了一个小 html 文件,它只是一个带有时钟、gif 背景和一个用于搜索 Google 的搜索栏的页面。

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

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

这是我的 list 文件:

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

这是我的 html 文件:

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

这是我的脚本:

function search() {
  
    var text = document.getElementById("searchBar").value;

    window.open("https://www.google.com/search?q=" + text)

}

最佳答案

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

更改此:<button onclick="search()">Search</button>至:<button id='searchButton'>Search</button>

并在单独的 script.js 文件中放置一些代码,将事件监听器附加到点击操作上的搜索按钮。

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

关于javascript - Chrome 扩展程序中的功能无法运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48716896/

相关文章:

javascript - 使用javascript动态刷新图像时的内存泄漏

javascript - 奇怪的 HTML 5 Canvas 抗锯齿

javascript - 多个可拖动的 iFrame,始终将 iFrame 放在首位

javascript - Chrome 浏览器版本 72.0.3626.96 错误触发<输入类型 ="file"> 从 javascript 函数单击(文件选择对话框)

javascript - Chrome 忽略动态更改元素的相对定位

internet-explorer - 使用 Chrome 远程调试工具进行跨浏览器调试

javascript - 如何更改 HTML 表单中某些元素的颜色

javascript - Php回显从javascript函数返回的值

javascript - jQuery No-Ui-Slider,如何锁定多个互连的 slider 总和为 100?

javascript - 如何防止使用javascript弹出?