Question

我知道当一个人点击扩展程序时，我可以使用浏览器操作创建一个弹出窗口。但就我而言，我试图创建一个按钮元素，每当我访问某个站点时都会打开一个弹出窗口。我面临的问题是，每当我单击按钮时，它都不会打开弹出窗口。

这是我的文件

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, sender, 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, sender, 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"]
}

为 Chrome 扩展创建弹出窗口，无需浏览器操作

0 个答案: