gpt4 book ai didi

javascript - Chrome扩展程序弹出: running JavaScript,响应按钮点击

转载 作者:行者123 更新时间:2023-12-03 05:31:39 25 4
gpt4 key购买 nike

我在 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")但仍然一无所获。

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

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

附加说明:控制台中没有页面和背景页面的任何内容。

编辑@Makyen

我之前在帖子中放置的 HTML 是 popup.html 文件中的所有 HTML。除了<html> , <head><body>标签。

这是您要求的 list 部分:

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

对于您的问题:为什么您将 content_scripts 命名为 background3.js?我从 GitHub 获得了这个用于 Chrome 扩展程序的基本模板应用程序。它说将 JavaScript 文件命名为我想要的任何名称。所以,我只是处理了那里的内容,添加了一个 3,然后将其删除为空白。然后我将上面的代码添加到其中。毕竟,这只是一个学习它的游戏,所以我认为这对名称来说并不重要。

接下来你说:请不要将 jQuery 加载到每个 http 和 https 页面中。这是我得到的模板的一部分。同样不用于生产。但谢谢你的提醒。我不知道,所以我会记下这一点。 :)

您还需要了解什么吗?

最佳答案

如果您想在弹出窗口中使用脚本,则内容脚本不是正确的方法。您需要在popup.html中引用相关脚本。

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

(我对我的英语感到抱歉......)

关于javascript - Chrome扩展程序弹出: running JavaScript,响应按钮点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40917541/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com