如何在Chrome擴展程序中添加彈出窗口？

Question

我正在嘗試創建一個彈出窗口，以在每個頁面上顯示時間，但是用戶可以單擊X按鈕將其關閉。

我不能為此使用popup.html，因為我正在將其用於其他用途。

基本上，我如何做這樣的事情顯示在每個頁面上：

Answer 1

您需要使用內容腳本。 內容腳本是可以添加到匹配頁面的腳本（以及樣式表），您可以定義什么是匹配頁面。 有關可能的匹配模式，請參見https://developer.chrome.com/extensions/content_scripts和https://developer.chrome.com/extensions/match_patterns 。

在您的manifest.json中添加以下內容。

"content_scripts": [
   {
      "matches": ["<all_urls>"],
      "css": ["style.css"],
      "js": ["script.js"]
   }
]

然后，在您的script.js中添加向頁面添加彈出窗口的腳本。 歸功於bbrame 12小時AM / PM代碼 。

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='';
}

在style.css中，您可以將CSS樣式化，放在角落或任何您想要的樣式中。

#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;
}