问题描述
我知道当一个人点击扩展程序时,我可以使用浏览器操作创建一个弹出窗口。但就我而言,我试图创建一个按钮元素,每当我访问某个站点时都会打开一个弹出窗口。我面临的问题是,每当我单击按钮时,它都不会打开弹出窗口。
这是我的文件
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-
scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Popup</title>
<link href="style.css" rel="stylesheet">
<script defer src="popup.js"></script>
</head>
<body>
<div class="popup" id="pup">
<div class="header">
<h1>Learn More About Animals</h1>
</div>
<div class="popup-body">
<div class="animals">
<div class="animal">
<img id="img" src="images/cat.jpg" alt="">
<a href='https://en.wikipedia.org/wiki/Cat'><button>Learn More</button></a>
</div>
<div class="animal">
<img id="img" src="images/dog.jpg" alt="">
<a href='https://en.wikipedia.org/wiki/Dog'><button>Learn More</button></a>
</div>
<div class="animal">
<img id="img" src="images/bunny.jpg" alt="">
<a href='https://en.wikipedia.org/wiki/Rabbit'><button>Learn More</button></a>
</div>
<div class="animal">
<img id="img" src="images/horse.JPG" alt="">
<a href='https://en.wikipedia.org/wiki/Horse/'><button>Learn More</button></a>
</div>
</div>
</div>
</div>
</body>
</html>
content.js:
const button = document.createElement("button");
button.style.backgroundColor = "blue";
button.style.color = "white";
button.innerText = "More Animals";
chrome.runtime.sendMessage({text: "get site"});
chrome.runtime.onMessage.addListener((request,sender,sendResponse) => {
if (request === "https://www.humanesociety.org/animals") {
site = document.getElementById("main-content");
//gives us the clickable chrome extension button
site.insertBefore(button,site.children[3]);
//sends button object to popup.js
chrome.runtime.sendMessage(button);
}
});
background.js:
chrome.runtime.onMessage.addListener(function(request,sendResponse) {
if(request.text === "get site") {
chrome.tabs.query({currentwindow: true,active: true},(tabs) => {
chrome.tabs.sendMessage(tabs[0].id,tabs[0].url);
});
}
});
popup.js:
chrome.runtime.onMessage.addListener(function(req,sendResponse) {
req.addEventListener("click",() => {
const popupOpener = document.querySelector(".popup");
openPopup(popupOpener);
});
function openPopup(popup) {
popup.classList.add("active");
}
});
manifest.json:
{
"manifest_version": 2,"name": "Animal Info","version": "1.0.0","background":
{
"scripts": ["background.js"],"persistent": false
},"content_scripts": [
{
"matches": ["<all_urls>"],"js": ["content.js"]
}
],"web_accessible_resources": ["popup.html","popup.js","style.css"],"permissions": ["tabs"]
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)