gpt4 book ai didi

javascript - 如何使用 Chrome 扩展程序将按钮插入网页

转载 作者:搜寻专家 更新时间:2023-11-01 05:10:13 28 4
gpt4 key购买 nike

我正在使用 content scripts我想在网页中插入一个按钮。

这是我的manifest.json:

{
"manifest_version": 2,
"name": "my extension",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
],
"content_scripts": [
{
"matches": ["http://127.0.0.1:8000/*"],
"js": ["script.js"],
"run_at": "document_end"
}
]
}

这是popup.html:

<html>
<body>
<input type="button" id="button" style="display:none;">
</body>
</html>

script.js:

document.body.style.backgroundColor = "yellow";
var button = document.getElementById("button");
button.style.visibility = "visible";

当转到 http://127.0.0.1:8000 时,我看到背景变为黄色,但它没有找到按钮,因为它不是我本地服务器提供的网页的一部分。它显示此错误:

Uncaught TypeError: Cannot read property 'style' of null

我应该怎么做才能在 http://127.0.0.1:8000 中的内容之上插入一个按钮(假设我不知道它的内容)?

最佳答案

要插入一个按钮,只需在您的内容脚本中创建它并插入它,您不需要(不应该)在 popup.html 中声明它

list .json

{
"manifest_version": 2,
"name": "my extension",
"content_scripts": [
{
"matches": ["http://127.0.0.1:5000/*"],
"js": ["script.js"]
}
]
}

脚本.js

document.body.style.backgroundColor = "yellow";
var button = document.createElement("button");
document.body.appendChild(button);

关于javascript - 如何使用 Chrome 扩展程序将按钮插入网页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36136936/

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