谷歌插件编写_谷歌浏览器插件前端开发悬浮球功能-CSDN博客

本文链接：https://blog.csdn.net/VVVVV16/article/details/139144360

manifest.json

{
    "manifest_version": 3,
    "name": "Floating Ball",
    "version": "1.0",
    "description": "A floating ball on the right side of the webpage.",
    "permissions": ["activeTab"],
    "action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "1.jpg"
      }
    },
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "js": ["content.js"]
      }
    ]
  }

popup.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小宠物插件</title>
    <style>
        #root {
            width: 200px;
        }
    </style>
</head>

<body>
    <div id="root">
        <div>悬浮球插件</div>
        <div>Copyright (c) 2024, Qvfan</div>
    </div>
</body>

</html>

content.js

const floatingBall = document.createElement('div');
const smallBox = document.createElement('div');

Object.assign(floatingBall.style, {
    position: 'fixed',
    right: '20px',
    bottom: '200px',
    width: '50px',
    height: '50px',
    background: 'url(https://pic4.zhimg.com/80/v2-3628c58a24939a53ffd00bb55ccaa7c3_1440w.webp) no-repeat',
    backgroundSize: 'cover',
    borderRadius: '50%',
    boxShadow: '0 0 10px rgba(0,0,0,0.5)',
    zIndex: '1000',
    cursor: 'pointer'
});

Object.assign(smallBox.style, {
    position: 'absolute',
    top: '-270px',
    left: '-298px',
    width: '300px',
    height: '300px',
    backgroundColor: '#fafafa',
    boxShadow: '0 0 10px rgba(0,0,0,0.5)',
    display: 'none' // 初始时隐藏
});

document.body.appendChild(floatingBall);

floatingBall.appendChild(smallBox);

const showSmallBox = () => {
    smallBox.style.display = 'block';
};

const hideSmallBox = () => {
    smallBox.style.display = 'none';
};


floatingBall.addEventListener('mouseover', showSmallBox);
floatingBall.addEventListener('mouseout', hideSmallBox);

smallBox.addEventListener('mouseover', showSmallBox);
smallBox.addEventListener('mouseout', hideSmallBox);



floatingBall.addEventListener('click', (e) => {
    alert('屈凡的悬浮球被点击了!' + JSON.stringify(e));
});

直接打开

效果