Chrome扩展程序弹出窗口：运行JavaScript，响应按钮单击
[英]Chrome extension popup: running JavaScript, respond to button click
问题描述
I seem to be having trouble running a script in my Chrome extension popup. 
我似乎无法在Chrome扩展程序弹出窗口中运行脚本。
Here is the info about my project first: 以下是有关我的项目的信息：
The file popup.html contains a button with the id of newDetails and an <h1> tag with the class title : 文件popup.html包含一个ID为newDetails的按钮和一个带有类title的<h1>标记：
popup.html : popup.html ：
<button id="newDetails">Click for details</button>
<h1 class="title">Mr Sanderson</h1>
In a file called background3.js , I have this script: 在一个名为background3.js的文件中，我有以下脚本：
$(document).ready(function() {
console.log("Test");
document.getElementById("newDetails").addEventListener("click", testClick);
});
function testClick() {
$('.title').html("The New Title");
}
In my manifest.json file I have this: 在我的manifest.json文件中，我有以下内容：
"content_scripts": [ {
"js": [ "jquery.min.js", "background3.js" ],
"matches": [ "http://*/*", "https://*/*"]
}]
I found this answer which has a similar title, and this is why I added the event listener: 我发现这个答案具有相似的标题，这就是为什么我添加了事件侦听器的原因：
Chrome Extension won't run function on button click
However this is also not working. 但是，这也不起作用。 I made the function only include a console.log("test") and still nothing. 我使函数仅包含console.log("test") ，什么也没有。
Eventually, I want to run an AJAX script that gets details from an online JSON file but I can't even seem to get this to work. 最终，我想运行一个AJAX脚本，该脚本从在线JSON文件中获取详细信息，但我什至无法使它正常工作。
How do I get the click of the button to run the function I want? 如何单击按钮以运行所需功能？
Additional notes: There is nothing in the console for the page nor the background page. 附加说明：控制台中该页面或背景页面均没有任何内容。
edit for @Makyen 编辑@Makyen
The HTML I put up earlier in the post is all the HTML in the popup.html file. 我在文章前面提到的HTML是popup.html文件中的所有HTML。 Apart from the <html> , <head> and <body> tags. 除了<html> ， <head>和<body>标记。
Here is the manifest section you asked for: 这是您要求的清单部分：
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
For your question: Why have you named a content_scripts background3.js ? 您的问题：为什么命名为content_scripts background3.js ？ I got this basic template app for Chrome extensions to work with from GitHub. 我从GitHub获得了可用于Chrome扩展程序的基本模板应用程序。 It said to name the JavaScript file whatever I want. 它说我想给JavaScript文件起任何名字。 So, I just coped what was there, added a 3 and then removed it to be blank. 因此，我只是处理了那里的内容，添加了3，然后将其删除为空白。 I then added the code above to it. 然后，我在上面添加了代码。 This is, after all, only a play around to learn it so I did not think it would matter on the name. 毕竟，这只是玩耍而已，所以我认为名字并不重要。
Next you say: Please do not load jQuery into every http and https page. 接下来，您说：请不要将jQuery加载到每个http和https页面中。 This was part of the template I got. 这是我得到的模板的一部分。 Again not for production. 再次不用于生产。 But thank you for the heads up. 但是，谢谢您的注意。 I did not know so I will make a note of that. 我不知道，所以我会记下来。 :) :)
Anything else you need to know? 您还有其他需要知道的吗？
2 个解决方案
解决方案1
1 2016-12-02 01:53:11
You must include the JavaScript files in <script src=""> tags 您必须在<script src="">标签中包含JavaScript文件。
If you want JavaScript to load into your popup, you need to include the script files(s) for the src within <script type="text/javascript" src=""> tags in your popup.html file. 如果要将JavaScript加载到弹出窗口中，则需要在popup.html文件的<script type="text/javascript" src="">标记内包括src <script type="text/javascript" src="">文件。 What is in the content_scripts key in your manifest.json has no effect on what is loaded into your popup. manifest.json的content_scripts键中的内容对加载到弹出窗口中的内容没有影响。 Content scripts are scripts which can interact with the DOM of a specified webpage by being loaded into a somewhat privileged context. 内容脚本是可以通过加载到具有一定特权的上下文中来与指定网页的DOM交互的脚本。 Popups are loaded into the same context as the background page, but in a different scope (eg a different window ). 弹出窗口被加载到与背景页面相同的上下文中，但是处于不同的范围（例如，不同的window ）中。
I would suggest that you read Chrome extension architecture overview which describes how Chrome extensions are organized. 我建议您阅读Chrome扩展程序架构概述 ，其中概述了Chrome扩展程序的组织方式。
For what I understand of your popup, which is that you want both jquery.min.js and background3.js to be loaded/run, you would want something like: 据我对您的弹出窗口的了解，即您希望同时加载/运行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>
Your JavaScript appears to be functional as written. 您的JavaScript似乎具有书面功能。
The above code was modified from the HTML for the complete extension included in my answer to Simple jQuery within <script> tag in Chrome extension popup is not executing . 上面的代码已从HTML修改为完整的扩展名，该扩展名包含在我对Chrome扩展程序弹出窗口中<script>标签内的Simple jQuery的回答中未执行的位置 。 While the title of that question makes it sound like a duplicate, the problem which that OP had was different. 虽然该问题的标题听起来像是重复的，但OP所遇到的问题却有所不同。 However, subsections of my answer there could provide an answer here. 但是，这里我的回答的各个部分可能会提供答案。
Seeing the console for your popup 查看弹出式控制台
In Chrome, the console for your popup is a different console than the one for the background page and the one for any webpage. 在Chrome浏览器中，用于弹出窗口的控制台与用于后台页面的控制台和用于任何网页的控制台是不同的。 The one for the web page is also for your content scripts. 网页上的一个也适用于您的内容脚本。 For more information, please see my answer to Google Chrome / Firefox do not see WebExtension output in Console 有关更多信息，请参阅我对Google Chrome / Firefox的回答， 但在控制台中看不到WebExtension输出
Testing your popup 测试您的弹出窗口
As long as you are not using any Chrome specific APIs, you should be able to test your popup page as a normal webpage. 只要您不使用任何特定于Chrome的API，就应该能够将弹出页面作为普通网页进行测试。 You should be able to load it from a file:// URL to test that it is working. 您应该能够从file:// URL加载它以测试它是否正常工作。 From time to time, I have even added fake placeholders for some Chrome APIs just to test the basic functionality of a popup. 有时，我甚至为某些Chrome API添加了虚假的占位符，目的只是为了测试弹出窗口的基本功能。
解决方案2
0 2016-12-01 21:01:46
If you want a script in popup, content script isn't the way. 如果要在弹出窗口中使用脚本，则不能使用内容脚本。 You need reference the relevant script in popup.html. 您需要在popup.html中引用相关脚本。
Content script inject scripts into regular web pages. 内容脚本将脚本注入常规网页。 The domain of extension's pages is chrome-extension://... . 扩展程序页面的域是chrome-extension://...
(I'm sorry about my english... ) （对不起我的英语...）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.