Javascript 如何将弹出窗口添加到Chrome扩展中?
我试图创建一个弹出窗口,显示每页上的时间,但用户可以单击X按钮关闭它 我不能将popup.html用于此,因为我正在将其用于其他内容 基本上,我该如何制作这样的东西,并在每一页上显示:Javascript 如何将弹出窗口添加到Chrome扩展中?,javascript,google-chrome-extension,Javascript,Google Chrome Extension,我试图创建一个弹出窗口,显示每页上的时间,但用户可以单击X按钮关闭它 我不能将popup.html用于此,因为我正在将其用于其他内容 基本上,我该如何制作这样的东西,并在每一页上显示: 您需要使用内容脚本。内容脚本是可以添加到匹配页面的脚本(以及样式表),您可以定义匹配页面是什么。有关可能的匹配模式,请参阅和 在manifest.json中添加以下内容 "content_scripts": [ { "matches": ["<all_urls>"], "
您需要使用内容脚本。内容脚本是可以添加到匹配页面的脚本(以及样式表),您可以定义匹配页面是什么。有关可能的匹配模式,请参阅和 在manifest.json中添加以下内容
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["style.css"],
"js": ["script.js"]
}
]
你试过什么?我尝试使用background.js,但不知道要添加什么代码。我附加的链接使用的是内容脚本而不是背景脚本。你可能会想。谢谢,我刚刚添加了所有代码,但是没有弹出窗口?我不知道如何设计或创建一个弹出窗口,所以我遗漏了什么?我已经更新了我的答案,为您包括这一点。我在这里创建了一个示例扩展哇,谢谢你,伙计!我刚刚添加了代码,它就可以工作了!我需要的另一件事是通过单击扩展图标来隐藏和显示时间。有没有办法做到这一点?对不起,我的意思是有没有办法隐藏和显示日期,直到点击扩展图标。因此,如果我单击一次扩展图标,在我再次单击图标之前,时间不会显示在任何页面上。
var div = document.createElement("div");
div.setAttribute("id", "chromeextensionpopup");
div.innerText = formatAMPM(new Date());
document.body.appendChild(div);
var closelink = document.createElement("div");
closelink.setAttribute("id", "chromeextensionpopupcloselink");
closelink.innerText = 'X';
document.getElementById("chromeextensionpopup").appendChild(closelink);
function formatAMPM(date){
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0'+minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
return strTime;
}
document.getElementById("chromeextensionpopupcloselink").addEventListener("click", removeExtensionPopup);
function removeExtensionPopup(){
document.getElementById("chromeextensionpopup").outerHTML='';
}
#chromeextensionpopup{
background: white;
border: solid 3px black;
line-height: 25px;
position: absolute;
right: 20px;
text-align: center;
top: 20px;
width: 100px;
z-index: 999999999;
}
#chromeextensionpopupcloselink{
background: red;
color: white;
cursor: pointer;
float: right;
height: 25px;
text-align: center;
width: 25px;
}