谷歌插件编写

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

直接打开