通过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";
     }
}

我使用DOM，因此不必刷新页面即可查看更改。

清单：

{
    "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"
    }
}

以下是存储在我的https：// localhost上的按钮的代码（该代码取自本教程https://www.kirupa.com/html5/drag.htm，我所做的唯一更改是将项目从id（＃）更改为class （。））：

按钮CSS：

.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,.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;
}

按钮js：

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",false);
        container.addEventListener("mouseup",false);
        container.addEventListener("mousemove",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();

我是Web扩展的初学者，所以请放纵我的无知。

祝你有美好的一天！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）