Javascript 通过chrome扩展注入浮动按钮

我试图通过chrome扩展将浮动按钮（从教程中找到）注入网页。 代码运行时没有错误，但未显示按钮

单击扩展按钮时要侦听的Backgorund脚本：

// for extention button
chrome.browserAction.onClicked.addListener(buttonClicked);

function buttonClicked(tab) {
    
    // Send message to content_script of tab.id
    chrome.tabs.sendMessage(tab.id, 1);
}

chrome.runtime.onMessage.addListener(gotMessage);
let injected = false;

function gotMessage(message, sender, sendResponse) {
     console.log(message);
     if (!injected) {
          injected = true;
          
          var style = document.createElement("link");
          document.getElementsByTagName("head")[0].appendChild(style);
          style.href = "https://localhost/css/test.css";

          var s = document.createElement("script");
          document.body.appendChild(s);
          s.src = "https://localhost/js/test.js";
     }
}

{
    "manifest_version": 2,
    "name": "Counterstring",
    "version": "0.1",
    "description": "simple counterstring generation",
    "content_scripts": [
      {
        "run_at": "document_end",
        "matches": [
          "<all_urls>"
        ],
        "js": ["js/content.js"]
      }
    ],
    "content_security_policy": "script-src 'self' https://localhost/js/test.js; object-src 'self'",
    "background": {
        "persistent": true,
        "scripts": ["js/background.js"]
    },
    "browser_action": {
        "deafult_icon": "icons/icon16x16.png"
    },
    "permissions": [
         "contextMenus",
         "activeTab"
    ],
    "icons": {
         "16": "icons/icon16x16.png",
         "48": "icons/icon48x48.png",
         "128": "icons/icon128x128.png"
    }
}

.beebole_container {
      width: 100%;
      height: 400px;
      background-color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 7px;
      touch-action: none;
}
.beebole_item {
    width: 100px;
    height: 100px;
    background-color: rgb(245, 230, 99);
    border: 10px solid rgba(136, 136, 136, .5);
    border-radius: 50%;
    touch-action: none;
    user-select: none;
}
.beebole_item:active {
    background-color: rgba(168, 218, 220, 1.00);
}
.beebole_item:hover {
    cursor: pointer;
    border-width: 20px;
}

window.$b = {
    alert: function(){
        window.alert("1");
    },
    insert_DOM_button: function(){
        let div1 = document.createElement("div");
        let div2 = document.createElement("div");
        let div3 = document.createElement("div");

        div1.className = "outerContainer";
        div2.className = "beebole_container";
        div3.className = "beebole_item";

        div2.appendChild(div3);
        div1.appendChild(div2);
        document.body.appendChild(div1);
    },
    add_button_functionality: function(){
        var dragItem = document.querySelector(".beebole_item");
        var container = document.querySelector(".beebole_container");

        var active = false;
        var currentX;
        var currentY;
        var initialX;
        var initialY;
        var xOffset = 0;
        var yOffset = 0;

        container.addEventListener("touchstart", dragStart, false);
        container.addEventListener("touchend", dragEnd, false);
        container.addEventListener("touchmove", drag, false);

        container.addEventListener("mousedown", dragStart, false);
        container.addEventListener("mouseup", dragEnd, false);
        container.addEventListener("mousemove", drag, false);

        var dragStart = function(e) {
            if (e.type === "touchstart") {
                initialX = e.touches[0].clientX - xOffset;
                initialY = e.touches[0].clientY - yOffset;
            } else {
                initialX = e.clientX - xOffset;
                initialY = e.clientY - yOffset;
            }

            if (e.target === dragItem) {
                active = true;
            }
        }

        var dragEnd = function(e) {
            initialX = currentX;
            initialY = currentY;

            active = false;
        }

        var drag = function(e) {
            if (active) {
                e.preventDefault();
                if (e.type === "touchmove") {
                    currentX = e.touches[0].clientX - initialX;
                    currentY = e.touches[0].clientY - initialY;
                } else {
                    currentX = e.clientX - initialX;
                    currentY = e.clientY - initialY;
                }

                xOffset = currentX;
                yOffset = currentY;

                setTranslate(currentX, currentY, dragItem);
            }
        }

        var setTranslate = function(xPos, yPos, el) {
            el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
        }
    }
};

$b.alert();
$b.insert_DOM_button();
$b.add_button_functionality();

注入本地主机上存储的代码的内容脚本：

// for extention button
chrome.browserAction.onClicked.addListener(buttonClicked);

function buttonClicked(tab) {
    
    // Send message to content_script of tab.id
    chrome.tabs.sendMessage(tab.id, 1);
}

chrome.runtime.onMessage.addListener(gotMessage);
let injected = false;

function gotMessage(message, sender, sendResponse) {
     console.log(message);
     if (!injected) {
          injected = true;
          
          var style = document.createElement("link");
          document.getElementsByTagName("head")[0].appendChild(style);
          style.href = "https://localhost/css/test.css";

          var s = document.createElement("script");
          document.body.appendChild(s);
          s.src = "https://localhost/js/test.js";
     }
}

{
    "manifest_version": 2,
    "name": "Counterstring",
    "version": "0.1",
    "description": "simple counterstring generation",
    "content_scripts": [
      {
        "run_at": "document_end",
        "matches": [
          "<all_urls>"
        ],
        "js": ["js/content.js"]
      }
    ],
    "content_security_policy": "script-src 'self' https://localhost/js/test.js; object-src 'self'",
    "background": {
        "persistent": true,
        "scripts": ["js/background.js"]
    },
    "browser_action": {
        "deafult_icon": "icons/icon16x16.png"
    },
    "permissions": [
         "contextMenus",
         "activeTab"
    ],
    "icons": {
         "16": "icons/icon16x16.png",
         "48": "icons/icon48x48.png",
         "128": "icons/icon128x128.png"
    }
}

.beebole_container {
      width: 100%;
      height: 400px;
      background-color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 7px;
      touch-action: none;
}
.beebole_item {
    width: 100px;
    height: 100px;
    background-color: rgb(245, 230, 99);
    border: 10px solid rgba(136, 136, 136, .5);
    border-radius: 50%;
    touch-action: none;
    user-select: none;
}
.beebole_item:active {
    background-color: rgba(168, 218, 220, 1.00);
}
.beebole_item:hover {
    cursor: pointer;
    border-width: 20px;
}

window.$b = {
    alert: function(){
        window.alert("1");
    },
    insert_DOM_button: function(){
        let div1 = document.createElement("div");
        let div2 = document.createElement("div");
        let div3 = document.createElement("div");

        div1.className = "outerContainer";
        div2.className = "beebole_container";
        div3.className = "beebole_item";

        div2.appendChild(div3);
        div1.appendChild(div2);
        document.body.appendChild(div1);
    },
    add_button_functionality: function(){
        var dragItem = document.querySelector(".beebole_item");
        var container = document.querySelector(".beebole_container");

        var active = false;
        var currentX;
        var currentY;
        var initialX;
        var initialY;
        var xOffset = 0;
        var yOffset = 0;

        container.addEventListener("touchstart", dragStart, false);
        container.addEventListener("touchend", dragEnd, false);
        container.addEventListener("touchmove", drag, false);

        container.addEventListener("mousedown", dragStart, false);
        container.addEventListener("mouseup", dragEnd, false);
        container.addEventListener("mousemove", drag, false);

        var dragStart = function(e) {
            if (e.type === "touchstart") {
                initialX = e.touches[0].clientX - xOffset;
                initialY = e.touches[0].clientY - yOffset;
            } else {
                initialX = e.clientX - xOffset;
                initialY = e.clientY - yOffset;
            }

            if (e.target === dragItem) {
                active = true;
            }
        }

        var dragEnd = function(e) {
            initialX = currentX;
            initialY = currentY;

            active = false;
        }

        var drag = function(e) {
            if (active) {
                e.preventDefault();
                if (e.type === "touchmove") {
                    currentX = e.touches[0].clientX - initialX;
                    currentY = e.touches[0].clientY - initialY;
                } else {
                    currentX = e.clientX - initialX;
                    currentY = e.clientY - initialY;
                }

                xOffset = currentX;
                yOffset = currentY;

                setTranslate(currentX, currentY, dragItem);
            }
        }

        var setTranslate = function(xPos, yPos, el) {
            el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
        }
    }
};

$b.alert();
$b.insert_DOM_button();
$b.add_button_functionality();

我使用DOM，所以我不必刷新页面来查看更改

清单：

// for extention button
chrome.browserAction.onClicked.addListener(buttonClicked);

function buttonClicked(tab) {
    
    // Send message to content_script of tab.id
    chrome.tabs.sendMessage(tab.id, 1);
}

chrome.runtime.onMessage.addListener(gotMessage);
let injected = false;

function gotMessage(message, sender, sendResponse) {
     console.log(message);
     if (!injected) {
          injected = true;
          
          var style = document.createElement("link");
          document.getElementsByTagName("head")[0].appendChild(style);
          style.href = "https://localhost/css/test.css";

          var s = document.createElement("script");
          document.body.appendChild(s);
          s.src = "https://localhost/js/test.js";
     }
}

{
    "manifest_version": 2,
    "name": "Counterstring",
    "version": "0.1",
    "description": "simple counterstring generation",
    "content_scripts": [
      {
        "run_at": "document_end",
        "matches": [
          "<all_urls>"
        ],
        "js": ["js/content.js"]
      }
    ],
    "content_security_policy": "script-src 'self' https://localhost/js/test.js; object-src 'self'",
    "background": {
        "persistent": true,
        "scripts": ["js/background.js"]
    },
    "browser_action": {
        "deafult_icon": "icons/icon16x16.png"
    },
    "permissions": [
         "contextMenus",
         "activeTab"
    ],
    "icons": {
         "16": "icons/icon16x16.png",
         "48": "icons/icon48x48.png",
         "128": "icons/icon128x128.png"
    }
}

.beebole_container {
      width: 100%;
      height: 400px;
      background-color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 7px;
      touch-action: none;
}
.beebole_item {
    width: 100px;
    height: 100px;
    background-color: rgb(245, 230, 99);
    border: 10px solid rgba(136, 136, 136, .5);
    border-radius: 50%;
    touch-action: none;
    user-select: none;
}
.beebole_item:active {
    background-color: rgba(168, 218, 220, 1.00);
}
.beebole_item:hover {
    cursor: pointer;
    border-width: 20px;
}

window.$b = {
    alert: function(){
        window.alert("1");
    },
    insert_DOM_button: function(){
        let div1 = document.createElement("div");
        let div2 = document.createElement("div");
        let div3 = document.createElement("div");

        div1.className = "outerContainer";
        div2.className = "beebole_container";
        div3.className = "beebole_item";

        div2.appendChild(div3);
        div1.appendChild(div2);
        document.body.appendChild(div1);
    },
    add_button_functionality: function(){
        var dragItem = document.querySelector(".beebole_item");
        var container = document.querySelector(".beebole_container");

        var active = false;
        var currentX;
        var currentY;
        var initialX;
        var initialY;
        var xOffset = 0;
        var yOffset = 0;

        container.addEventListener("touchstart", dragStart, false);
        container.addEventListener("touchend", dragEnd, false);
        container.addEventListener("touchmove", drag, false);

        container.addEventListener("mousedown", dragStart, false);
        container.addEventListener("mouseup", dragEnd, false);
        container.addEventListener("mousemove", drag, false);

        var dragStart = function(e) {
            if (e.type === "touchstart") {
                initialX = e.touches[0].clientX - xOffset;
                initialY = e.touches[0].clientY - yOffset;
            } else {
                initialX = e.clientX - xOffset;
                initialY = e.clientY - yOffset;
            }

            if (e.target === dragItem) {
                active = true;
            }
        }

        var dragEnd = function(e) {
            initialX = currentX;
            initialY = currentY;

            active = false;
        }

        var drag = function(e) {
            if (active) {
                e.preventDefault();
                if (e.type === "touchmove") {
                    currentX = e.touches[0].clientX - initialX;
                    currentY = e.touches[0].clientY - initialY;
                } else {
                    currentX = e.clientX - initialX;
                    currentY = e.clientY - initialY;
                }

                xOffset = currentX;
                yOffset = currentY;

                setTranslate(currentX, currentY, dragItem);
            }
        }

        var setTranslate = function(xPos, yPos, el) {
            el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
        }
    }
};

$b.alert();
$b.insert_DOM_button();
$b.add_button_functionality();

按钮js:

// for extention button
chrome.browserAction.onClicked.addListener(buttonClicked);

function buttonClicked(tab) {
    
    // Send message to content_script of tab.id
    chrome.tabs.sendMessage(tab.id, 1);
}

chrome.runtime.onMessage.addListener(gotMessage);
let injected = false;

function gotMessage(message, sender, sendResponse) {
     console.log(message);
     if (!injected) {
          injected = true;
          
          var style = document.createElement("link");
          document.getElementsByTagName("head")[0].appendChild(style);
          style.href = "https://localhost/css/test.css";

          var s = document.createElement("script");
          document.body.appendChild(s);
          s.src = "https://localhost/js/test.js";
     }
}

{
    "manifest_version": 2,
    "name": "Counterstring",
    "version": "0.1",
    "description": "simple counterstring generation",
    "content_scripts": [
      {
        "run_at": "document_end",
        "matches": [
          "<all_urls>"
        ],
        "js": ["js/content.js"]
      }
    ],
    "content_security_policy": "script-src 'self' https://localhost/js/test.js; object-src 'self'",
    "background": {
        "persistent": true,
        "scripts": ["js/background.js"]
    },
    "browser_action": {
        "deafult_icon": "icons/icon16x16.png"
    },
    "permissions": [
         "contextMenus",
         "activeTab"
    ],
    "icons": {
         "16": "icons/icon16x16.png",
         "48": "icons/icon48x48.png",
         "128": "icons/icon128x128.png"
    }
}

.beebole_container {
      width: 100%;
      height: 400px;
      background-color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 7px;
      touch-action: none;
}
.beebole_item {
    width: 100px;
    height: 100px;
    background-color: rgb(245, 230, 99);
    border: 10px solid rgba(136, 136, 136, .5);
    border-radius: 50%;
    touch-action: none;
    user-select: none;
}
.beebole_item:active {
    background-color: rgba(168, 218, 220, 1.00);
}
.beebole_item:hover {
    cursor: pointer;
    border-width: 20px;
}

window.$b = {
    alert: function(){
        window.alert("1");
    },
    insert_DOM_button: function(){
        let div1 = document.createElement("div");
        let div2 = document.createElement("div");
        let div3 = document.createElement("div");

        div1.className = "outerContainer";
        div2.className = "beebole_container";
        div3.className = "beebole_item";

        div2.appendChild(div3);
        div1.appendChild(div2);
        document.body.appendChild(div1);
    },
    add_button_functionality: function(){
        var dragItem = document.querySelector(".beebole_item");
        var container = document.querySelector(".beebole_container");

        var active = false;
        var currentX;
        var currentY;
        var initialX;
        var initialY;
        var xOffset = 0;
        var yOffset = 0;

        container.addEventListener("touchstart", dragStart, false);
        container.addEventListener("touchend", dragEnd, false);
        container.addEventListener("touchmove", drag, false);

        container.addEventListener("mousedown", dragStart, false);
        container.addEventListener("mouseup", dragEnd, false);
        container.addEventListener("mousemove", drag, false);

        var dragStart = function(e) {
            if (e.type === "touchstart") {
                initialX = e.touches[0].clientX - xOffset;
                initialY = e.touches[0].clientY - yOffset;
            } else {
                initialX = e.clientX - xOffset;
                initialY = e.clientY - yOffset;
            }

            if (e.target === dragItem) {
                active = true;
            }
        }

        var dragEnd = function(e) {
            initialX = currentX;
            initialY = currentY;

            active = false;
        }

        var drag = function(e) {
            if (active) {
                e.preventDefault();
                if (e.type === "touchmove") {
                    currentX = e.touches[0].clientX - initialX;
                    currentY = e.touches[0].clientY - initialY;
                } else {
                    currentX = e.clientX - initialX;
                    currentY = e.clientY - initialY;
                }

                xOffset = currentX;
                yOffset = currentY;

                setTranslate(currentX, currentY, dragItem);
            }
        }

        var setTranslate = function(xPos, yPos, el) {
            el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
        }
    }
};

$b.alert();
$b.insert_DOM_button();
$b.add_button_functionality();

我是一个网络扩展的初学者，所以请原谅我的无知

---

祝你今天愉快

在devtools调试器中调试它，并查看失败的部分。据我所知，没有失败的部分。它只是没有显示按钮。我用调试器检查了每一行，似乎一切都很好。。。如果您在按钮的js中看到一个名为的警报，我可以在屏幕上看到该警报，但之后没有任何更改。css和js都被添加到DOM中。因为它不工作，所以一切都不好。你确认脚本被注入了吗？它显示警报了吗？是否验证侦听器已附加到元素上（使用事件侦听器的devtools面板或控制台中的getEventListeners命令）？在注入的脚本中设置一个断点（或使用

调试器
语句），并验证插入按钮中的代码是否正确运行。我发现了错误，问题是在教程中，他的方法在全局变量中。我的不是这样，所以我必须在调用顶部移动实例化。正如我所说的，我对这一切都很陌生。谢谢你的帮助。你对如何制作一个可拖动并“浮动”在页面顶部的按钮有什么见解吗？听起来对我来说很常见，所以应该有一些例子或库。