Chrome扩展程序弹出窗口：运行JavaScript，响应按钮点击

时间：2016-12-01 18:09:01

标签： javascript jquery google-chrome google-chrome-extension

我似乎无法在Chrome扩展程序弹出窗口中运行脚本。

首先是关于我的项目的信息：

文件 popup.html 包含一个ID为newDetails的按钮和一个<h1>类的title标记：

popup.html ：

<button id="newDetails">Click for details</button>
<h1 class="title">Mr Sanderson</h1>

在一个名为 background3.js 的文件中，我有这个脚本：

$(document).ready(function() {
  console.log("Test");
  document.getElementById("newDetails").addEventListener("click", testClick);
});

function testClick() {
  $('.title').html("The New Title");
}

在我的 manifest.json 文件中，我有：

"content_scripts": [ {
  "js": [ "jquery.min.js", "background3.js" ],
  "matches": [ "http://*/*", "https://*/*"]
}]

我发现这个答案有类似的标题，这就是我添加事件监听器的原因：

  

Chrome Extension won't run function on button click

但是这也行不通。我让这个函数只包含一个console.log("test")，但仍然没有。

最终，我想运行一个从在线JSON文件中获取详细信息的AJAX脚本，但我似乎无法让它工作。

如何点击按钮来运行我想要的功能？

附加说明：控制台中没有页面或背景页面。

编辑@Makyen

我在帖子前面提到的HTML是 popup.html 文件中的所有HTML。除了<html>，<head>和<body>标记之外。

以下是您要求的清单部分：

"browser_action": {
   "default_icon": "icon.png",
   "default_popup": "popup.html"
},

对于您的问题：为什么要将content_scripts命名为 background3.js ？我从GitHub获得了Chrome扩展程序的基本模板应用程序。它说要将JavaScript文件命名为我想要的任何名称。所以，我只是应对那里的东西，添加了一个3然后将其删除为空白。然后我将上面的代码添加到它。毕竟，这只是一个学习它的游戏所以我认为它不会对名称产生影响。

接下来你说：请不要在每个http和https页面加载jQuery。这是我得到的模板的一部分。再次不适合生产。但是谢谢你的提醒。我不知道所以我会记下这一点。 :)

你需要知道的其他事情吗？

2 个答案:

答案 0 :(得分：1)

您必须将JavaScript文件包含在<script src="">标记

中

如果您希望JavaScript加载到弹出窗口中，则需要在 popup.html 文件中的src标记中包含<script type="text/javascript" src="">的脚本文件。 manifest.json 中的content_scripts键中的内容对加载到弹出窗口中的内容没有影响。 Content scripts是可以通过加载到某个特权上下文中而与指定网页的DOM交互的脚本。弹出窗口加载到与背景页面相同的上下文中，但是在不同的范围内（例如，不同的window）。

我建议您阅读Chrome extension architecture overview，其中介绍了Chrome扩展程序的组织方式。

根据我对你的弹出窗口的理解，你想要加载/运行 jquery.min.js 和 background3.js ，你会想要一些东西像：

<!doctype html>
<html>
<head>
    <title>My Popup</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="background3.js"> </script>
</head>
<body>
    <button id="newDetails">Click for details</button>
    <h1 class="title">Mr Sanderson</h1>
</body>
</html>

您的JavaScript似乎是按照书面形式运作的。

以上代码是根据我对Simple jQuery within <script> tag in Chrome extension popup is not executing的回答中包含的完整扩展程序的HTML进行修改的。虽然这个问题的标题听起来像是重复，但OP的问题却是不同的。但是，我的答案的小节可以在这里提供答案。

在弹出窗口中看到控制台

在Chrome中，弹出窗口的控制台与背景页面的控制台不同，而控制台的控制台与任何网页的控制台不同。网页的内容也适用于您的内容脚本。有关详细信息，请参阅我对Google Chrome / Firefox do not see WebExtension output in Console

的回答

测试弹出窗口

只要您不使用任何特定于Chrome的API，您就应该能够将弹出页面作为普通网页进行测试。您应该能够从file:// URL加载它以测试它是否正常工作。有时，我甚至为一些Chrome API添加了假占位符，以测试弹出窗口的基本功能。

答案 1 :(得分：0)

如果您想要弹出一个脚本，内容脚本就不是这样了。您需要在popup.html中引用相关脚本。

内容脚本将脚本注入常规网页。扩展程序页面的域名为chrome-extension://...。

（我对我的英语很抱歉......）

相关问题
最新问题