Question

我正在制作Chrome扩展程序，我有一个html文件，一个JavaScript文件，可以在新标签页中打开修改后的链接，清单文件和图标。

它工作正常但现在我希望javascript函数仅在用户单击按钮时才能工作。所以我在html文件中创建了一个按钮，将js代码放在一个函数中，并使用onclick调用该函数。

但由于某种原因，它不起作用。点击按钮似乎没有任何事情发生。我试过重新加载扩展程序。另外，我举了一个简单程序的工作示例，在单击按钮时，使用alert（）显示一个简单的“Hello world”消息。

当我直接在chrome中打开html页面时这很好用，但当我用我所做的功能替换它时，点击时似乎没有任何结果。

有人可以找到错误/问题吗？

urltry.html文件是：

<!DOCTYPE html>
<html>
<button onclick="editorial()">View Editorial</button>
<script>
function editorial()
{
chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
    var tab_url=tabs[0].url;
    var new_url=tab_url.slice(11);
    chrome.tabs.create({ url:"http://www.discuss." + new_url});        
});
}
</script>
</html>

Answer 1

由于Google Chrome扩展程序中的默认内容安全策略（CSP），不允许以下内容：

评估及相关功能
内嵌JavaScript

由Google Chrome Extensions documentation on SCP提供的建议是将代码放在单独的文件中，并使用适当的绑定来从JavaScript单击事件。见下文。

您的HTML文件：

<!DOCTYPE html>
<html>
<head>
  <script src="editorial.js"></script>
</head>
<body>
  <button id="viewEditorial">View Editorial</button>
</body>
</html>

您的JavaScript文件 editorial.js

function editorial() {
  chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
    var tab_url=tabs[0].url;
    var new_url=tab_url.slice(11);
    chrome.tabs.create({ url:"http://www.discuss." + new_url});        
  });
}

document.addEventListener('DOMContentLoaded', function () {
  var btn = document.getElementById('viewEditorial');
  if (btn) {
    btn.addEventListener('click', editorial);
  }
});

注意：请勿忘记您需要声明"tabs"权限才能修改网址。请参阅tabs documentation。

Answer 2

您必须将您的按钮放在body标签内，否则可能会发生许多不好的事情，浏览器可能会进入怪癖模式。

解决方案：

<!DOCTYPE html>
<html>
<head>
<script>
function editorial()
{
chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
    var tab_url=tabs[0].url;
    var new_url=tab_url.slice(11);
    chrome.tabs.create({ url:"http://www.discuss." + new_url});        
});
}
</script>
</head>
<body>
   <button onclick="editorial()">View Editorial</button>
</body>
</html>

Answer 3

你可以试试这个，

<body>
  <button onclick="javascript:editorial()">View Editorial</button>
</body>

这也适用于Microsoft EDGE浏览器。

无法在按钮单击时调用html中的JavaScript函数

3 个答案: