Chrome扩展程序弹出式窗口：运行JavaScript，响应按钮点击 [英] Chrome extension popup: running JavaScript, respond to button click
问题描述
我在我的Chrome扩展程序弹出窗口中运行脚本似乎遇到问题。
这是关于我的项目的第一个信息： 文件 popup.html 包含一个标识为 newDetails 和一个< h1> 标签的按钮，并且类 title ：
popup.html ：
< button id =newDetails>点击查看详情< / button>
< h1 class =title> Mr Sanderson< / h1>
在名为 background3.js 的文件中，我有这个脚本：
$（document）.ready（function（）{
console.log（测试）;
document.getElementById（newDetails）.addEventListener（click，testClick）;
}）;
function testClick（）{
$（'。title'）。html（The New Title）;
}
在我的 manifest.json 文件中， ：
$ b
content_scripts：[{
js：[jquery。 min.js，background3.js]，
matches：[http：// * / *，https：// * / *]
}]
我发现这个答案有一个类似的标题，这就是我添加事件监听器的原因：
Chrome扩展程序无法在按钮点击时运行功能 b b 然而，这也不起作用。我让这个函数只包含了一个
console.log（test），而且什么也没有。
最后，我想运行一个AJAX脚本，从一个在线JSON文件中获取详细信息，但我甚至无法完成这项工作。 b
$ b如何点击按钮来运行我想要的功能？
其他注意事项：控制台中没有任何东西对于页面和后台页面。
@Makyen编辑
post是 popup.html 文件中的所有HTML。除了
< html>，< head>和< body>标签。
以下是您要求的清单部分：
browser_action：{
default_icon：icon.png，
default_popup：popup.html
}，
对于您的问题：为什么您命名了content_scripts background3.js ？我得到了这个基本的模板应用程序，用于从GitHub使用Chrome扩展。它说，无论我想要什么名称的JavaScript文件。所以，我只是应付了那里的内容，添加了一个3，然后将其删除为空白。然后我将上面的代码添加到它。毕竟，这只是一个戏剧性的学习，所以我不认为它会影响名称。
接下来你说：请不要加载jQuery到每个http和https页面。这是我得到的模板的一部分。再次不用于生产。但是，谢谢你的领导。我不知道，所以我会记下这一点。 :)
您还需要知道什么？ 必须在
< script src =>tags
中包含JavaScript文件如果您希望JavaScript加载在弹出窗口中，您需要在
< script type =text / javascriptsrc =中包含标签在您的 popup.html 文件中。您的 manifest.json 中的src的脚本文件>content_scripts键中的内容对加载到弹出窗口中的内容没有影响。 内容脚本是一些脚本，它可以通过加载到某个指定网页的DOM中进行交互特权上下文。弹出窗口被加载到与后台页面相同的上下文中，但在不同的作用域中（例如，不同的窗口）。
我建议您阅读 Chrome扩展架构概述，其中介绍了Chrome扩展程序
对于我所了解的弹出窗口，您希望 jquery.min.js 和 background3.js 需要加载/运行，您需要这样的内容：
$ b< ;! doctype html>
< html>
< head>
< title>我的弹出式菜单< / title>
< meta charset =utf-8>
< script type =text / javascriptsrc =jquery.min.js>< / script>
< script type =text / javascriptsrc =background3.js> < /脚本>
< / head>
< body>
< button id =newDetails>点击查看详情< / button>
< h1 class =title> Mr Sanderson< / h1>
< / body>
< / html>
您的JavaScript看起来像书面的功能一样。
上面的代码已经从我的在
中的简单jQuery>< ; Chrome扩展程序弹出窗口中的脚本>标记未执行。虽然这个问题的标题使它听起来像是重复的，但OP的问题却不同。然而，我的答案的小节可能会在这里提供答案。
查看控制台的弹出窗口
In Chrome中，弹出窗口的控制台与后台页面和任何网页的控制台不同。网页的一个也适用于您的内容脚本。有关更多信息，请参阅我对 Google Chrome / Firefox在控制台中未看到WebExtension输出的答案的答案。
测试你的弹出窗口
只要你没有使用任何Chrome特定的API，你应该能够测试你的弹出页面为正常的网页。您应该可以从
file：//URL加载它，以测试它正在工作。有时候，我甚至为某些Chrome API添加了伪造的占位符，只是为了测试弹出窗口的基本功能。I seem to be having trouble running a script in my Chrome extension popup.
Here is the info about my project first:
The file popup.html contains a button with the id of
newDetailsand an<h1>tag with the classtitle: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:
$(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:
"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:
However this is also not working. I made the function only include a
console.log("test")and still nothing.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.
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
The HTML I put up earlier in the post is all the HTML in the popup.html file. Apart from the
<html>,<head>and<body>tags.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? I got this basic template app for Chrome extensions to work with from GitHub. It said to name the JavaScript file whatever I want. So, I just coped what was there, added a 3 and then removed it to be blank. 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. 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?
解决方案You must include the JavaScript files in
<script src="">tagsIf you want JavaScript to load into your popup, you need to include the script files(s) for the
srcwithin<script type="text/javascript" src="">tags in your popup.html file. What is in thecontent_scriptskey in your manifest.json has no effect on what is loaded into your popup. Content scripts are scripts which can interact with the DOM of a specified webpage by being loaded into a somewhat privileged context. Popups are loaded into the same context as the background page, but in a different scope (e.g. a differentwindow).I would suggest that you read Chrome extension architecture overview which describes how Chrome extensions are organized.
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:
<!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.
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. While the title of that question makes it sound like a duplicate, the problem which that OP had was different. 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. 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
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. You should be able to load it from a
file://URL to test that it is working. From time to time, I have even added fake placeholders for some Chrome APIs just to test the basic functionality of a popup.这篇关于Chrome扩展程序弹出式窗口：运行JavaScript，响应按钮点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
