mirror of
https://gitee.com/bitdance-team/chrome-extension
synced 2025-03-13 09:23:34 +08:00
合并鼠标效果以及CSDN文章自动展开（郑小双的代码）
This commit is contained in:
parent
5387ca8d9f
commit
d187418ee0
@ -0,0 +1,96 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
#popup {
|
||||
height: 250px;
|
||||
width: 200px;
|
||||
background: linear-gradient(to right bottom, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);
|
||||
}
|
||||
#popup header {
|
||||
width: inherit;
|
||||
height: 30px;
|
||||
background: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
|
||||
}
|
||||
#popup header img {
|
||||
height: inherit;
|
||||
}
|
||||
#popup .article ul li {
|
||||
margin: 5px 0;
|
||||
height: 45px;
|
||||
background: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
|
||||
}
|
||||
#popup .article ul li span {
|
||||
font-size: 16px;
|
||||
line-height: 45px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
#popup .article ul li #click-per .button {
|
||||
position: relative;
|
||||
float: right;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
width: 66px;
|
||||
height: 32px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
#popup .article ul li #click-per .button .checkbox {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
z-index: 3;
|
||||
}
|
||||
#popup .article ul li #click-per .button .knobs,
|
||||
#popup .article ul li #click-per .button .layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
#popup .article ul li #click-per .button .knobs {
|
||||
z-index: 2;
|
||||
}
|
||||
#popup .article ul li #click-per .button .layer {
|
||||
border-radius: 100px;
|
||||
width: 100%;
|
||||
background-color: #ebf7fc;
|
||||
z-index: 1;
|
||||
}
|
||||
#popup .article ul li #click-per .button .knobs::before {
|
||||
content: "YES";
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 34px;
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
padding: 9px 4px;
|
||||
background-color: #03a9f4;
|
||||
border-radius: 50%;
|
||||
}
|
||||
#popup .article ul li #click-per .button .checkbox:checked + .knobs:before {
|
||||
content: "NO";
|
||||
left: 3px;
|
||||
background-color: #f44336;
|
||||
}
|
||||
#popup .article ul li #click-per .button .checkbox:checked ~ .layer {
|
||||
background-color: #fcebeb;
|
||||
}
|
||||
#popup .article ul li #click-per .button .knobs,
|
||||
#popup .article ul li #click-per .button .knobs:before,
|
||||
#popup .article ul li #click-per .button .layer {
|
||||
transition: 0.3s ease all;
|
||||
}
|
||||
105
packages/shell-chrome/assets/css/main.less
Normal file
105
packages/shell-chrome/assets/css/main.less
Normal file
@ -0,0 +1,105 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#popup {
|
||||
height: 250px;
|
||||
width: 200px;
|
||||
background: linear-gradient(to right bottom, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);
|
||||
header{
|
||||
width: inherit;
|
||||
height: 30px;
|
||||
background: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);;
|
||||
img {
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
.article{
|
||||
ul{
|
||||
li{
|
||||
margin: 5px 0;
|
||||
height: 45px;
|
||||
background: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
|
||||
span{
|
||||
font-size: 16px;
|
||||
line-height: 45px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
#click-per{
|
||||
.button {
|
||||
position: relative;
|
||||
float: right;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
width: 66px;
|
||||
height: 32px;
|
||||
border-radius: 100px;
|
||||
.checkbox {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
z-index: 3;
|
||||
}
|
||||
.knobs,
|
||||
.layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.knobs {
|
||||
z-index: 2;
|
||||
}
|
||||
.layer{
|
||||
border-radius: 100px;
|
||||
width: 100%;
|
||||
background-color: #ebf7fc;
|
||||
z-index: 1;
|
||||
}
|
||||
.knobs::before {
|
||||
content: "YES";
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 34px;
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
padding: 9px 4px;
|
||||
background-color: #03a9f4;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.checkbox:checked+.knobs:before {
|
||||
content: "NO";
|
||||
left: 3px;
|
||||
background-color: #f44336;
|
||||
}
|
||||
.checkbox:checked~.layer {
|
||||
background-color: #fcebeb;
|
||||
}
|
||||
.knobs,
|
||||
.knobs:before,
|
||||
.layer{
|
||||
transition: 0.3s ease all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
packages/shell-chrome/assets/image/logo.png
Normal file
BIN
packages/shell-chrome/assets/image/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
BIN
packages/shell-chrome/assets/image/mouse-effects/mouse.png
Normal file
BIN
packages/shell-chrome/assets/image/mouse-effects/mouse.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 7.0 KiB After Width: | Height: | Size: 7.0 KiB |
25
packages/shell-chrome/assets/js/expand-full-text/expand.js
Normal file
25
packages/shell-chrome/assets/js/expand-full-text/expand.js
Normal file
@ -0,0 +1,25 @@
|
||||
/**
|
||||
* TODO: 实现CSDN自动展开全文
|
||||
*/
|
||||
|
||||
$(function() {
|
||||
console.log("[BitDance extension] 学生助手插件 - CSDN阅读全文自动展开模块加载成功");
|
||||
// 全文自动展开
|
||||
function removeDOM(querySelector) {
|
||||
let element = document.querySelector(querySelector)
|
||||
if (element != null) {
|
||||
element.parentNode.removeChild(element);
|
||||
}
|
||||
}
|
||||
removeDOM(".hide-article-box");
|
||||
$(".article_content").removeAttr('style');
|
||||
window.onload = () => {
|
||||
// 代码块自动展开
|
||||
document.querySelectorAll("pre").forEach(targetNode => {
|
||||
removeDOM(".hide-preCode-box");
|
||||
if (targetNode.classList.contains("set-code-hide")) {
|
||||
targetNode.classList.remove("set-code-hide");
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
12014
packages/shell-chrome/assets/js/lib/vue.js
Normal file
12014
packages/shell-chrome/assets/js/lib/vue.js
Normal file
File diff suppressed because it is too large
Load Diff
94
packages/shell-chrome/assets/js/mouse-effects/click.js
Normal file
94
packages/shell-chrome/assets/js/mouse-effects/click.js
Normal file
@ -0,0 +1,94 @@
|
||||
/**
|
||||
* TODO: 鼠标点击效果
|
||||
*/
|
||||
|
||||
$(function() {
|
||||
console.log("[BitDance extension] 学生助手插件 - 点击特效模块加载成功");
|
||||
|
||||
// 每次改变开关状态时刷新页面使功能及时生效
|
||||
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
|
||||
location.reload();
|
||||
sendResponse('Reload page');
|
||||
})
|
||||
|
||||
// 控制功能是否开启
|
||||
chrome.storage.sync.get('clickState', function(budget) {
|
||||
// 得到按钮开关状态
|
||||
if (budget.clickState == false || budget.clickState == undefined) {
|
||||
// console.log('click功能启动');
|
||||
var hearts = [];
|
||||
|
||||
walk();
|
||||
|
||||
// 走起（初始化）
|
||||
function walk() {
|
||||
// 灵魂 css
|
||||
css(".heart{width: 10px;height: 10px;position: fixed;background: pink;transform: rotate(45deg);}.heart::after,.heart::before{position: absolute;content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;}.heart::after{top: -5px;}.heart::before{left: -5px;}");
|
||||
attachEvent();
|
||||
gameloop();
|
||||
}
|
||||
|
||||
// 动画效果
|
||||
function gameloop() {
|
||||
for (var i = 0; i < hearts.length; i++) {
|
||||
if (hearts[i].alpha <= 0) {
|
||||
document.body.removeChild(hearts[i].el);
|
||||
hearts.splice(i, 1);
|
||||
continue;
|
||||
}
|
||||
hearts[i].y--;
|
||||
hearts[i].scale += 0.004;
|
||||
hearts[i].alpha -= 0.013;
|
||||
hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color;
|
||||
}
|
||||
// refer: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame
|
||||
requestAnimationFrame(gameloop);
|
||||
}
|
||||
|
||||
function attachEvent() {
|
||||
// 点击触发特效（♥）
|
||||
window.onclick = function(event) {
|
||||
createHeart(event);
|
||||
}
|
||||
}
|
||||
|
||||
function createHeart(event) {
|
||||
// 创建一个 div 并指定类名为 heart
|
||||
var d = document.createElement("div");
|
||||
d.className = "heart";
|
||||
/**
|
||||
* @param el: 每个 div 的标识
|
||||
* @param x,y: 当前鼠标位置信息
|
||||
* @param scale: 放大系数
|
||||
* @param alpha: 透明度
|
||||
* @param color: 背景颜色
|
||||
*/
|
||||
hearts.push({
|
||||
el: d,
|
||||
x: event.clientX,
|
||||
y: event.clientY,
|
||||
scale: 1,
|
||||
alpha: 1,
|
||||
color: randomColor()
|
||||
});
|
||||
document.body.appendChild(d);
|
||||
}
|
||||
|
||||
// 给网页加个 style 标签
|
||||
function css(css) {
|
||||
// 创建 style 标签
|
||||
var style = document.createElement("style");
|
||||
style.type = "text/css";
|
||||
// css 内容注入
|
||||
style.appendChild(document.createTextNode(css));
|
||||
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
// 生成随机颜色
|
||||
function randomColor() {
|
||||
return "rgb(" + (Math.random() * 255) + "," + (Math.random() * 255) + "," + (Math.random() * 255) + ")";
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
19
packages/shell-chrome/assets/js/mouse-effects/mouse-style.js
Normal file
19
packages/shell-chrome/assets/js/mouse-effects/mouse-style.js
Normal file
@ -0,0 +1,19 @@
|
||||
/**
|
||||
* TODO: 鼠标样式
|
||||
*/
|
||||
|
||||
$(function() {
|
||||
console.log("[BitDance extension] 学生助手插件 - 鼠标样式模块加载成功");
|
||||
walk();
|
||||
|
||||
// 走起
|
||||
function walk() {
|
||||
changeMouse();
|
||||
}
|
||||
|
||||
function changeMouse() {
|
||||
$('*').hover(function() {
|
||||
$(this).css("cursor", "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c%0A6QAABPxJREFUWEe9lltIalkYx9feak1hDBonIvVM0ZyKLmAM3YyIqB6KCgrK%0Abj710G1gKooJJrCYiB4q6qHefIgoKoaChpiieojQJIWiy0GygzaO0RVhSDTb%0Ae+1hOSlb3d56aL+Iur/1/db3/77/Whj4/6kGAOgAAPq37x/2gQEAyrRa7V9s%0ANhuTSqXk5eXlGUVRTR8FgwC+HB0dfc3JyWG7tq3RaAiZTAY/AgYBgNTU1Bed%0AThfBVHcE09DQQFxfX1+EUJkoAMAnAMDfoWroBMAwTAsh/ClYUACYIQzDfkeg%0ACQkJ5Pz8PG6xWB4oihIEW9MJwCRDsECVSoUqQ97c3BgrKioSNzc3I+kxZrMZ%0AikQinKIoVw7GJd1/BpLBH8zr6ysVHx9Pra2tUS0tLS9CoRBfW1vjJCQksFDM%0Azs4OUV1dPffy8vKLvzXcAKHKQF9ILpeTVVVVFL2B9/f3SQSTlJSEraysRAiF%0AQlagKtDL4zMNwWSoqakhNzY2nLtlehBMSUkJAtgDAKDRfvB+z0OfcGUYHx9/%0ALS4uxgoKCtwj7J0Ax3EAIQR7e3tEc3MzcX9/r6TDeAC8RwYulwufn59xpgos%0ALi46Li4u8LGxMQ9ABINM7+npSeTdoWHLMDIyQqhUKmp7e5tDhzg9PSXFYjEG%0AIWSEQw0cExMz5TMiiYmJNoPB8F0w/en/Ly0tvba2tnIKCgpIkUhEra6u4vn5%0A+VClUjFKgyojk8msFEXxfQDeIwMdBu2Mw+Ewzr5WqyXz8vIICOGPAIB/nCbI%0AsNMvSqXyq0Qi8dtYTNVBLri6usoYY7FYkCkRVqu1CtkDPZ6RVCAQ2A0GQ8To%0A6Cg8Pj4GEokEDg4OemjsDVFbW0vy+XxSoVC4zxRUjeTkZIfJZPoVADDDBM4I%0AgGGYjsfjfdna2oLIZA4PD4ny8nJ8YGAAyuXyoCOHEvX19dlnZ2f/dDgcDYH6%0AiQlgqLKycmh4eJhFdzi0SFlZmaO9vZ2qr6/38H2RSARvb28JkiQj5ubmHB0d%0AHc4qZGdn205OTlJceodUAQzDKGQcaWlpdp1O5zMNLmPp6uoiULPNzMyw0G96%0AvZ64uroCubm5OI/Hc49eMAjvCkRJpdJ/l5eX2fn5+Xa1Wu0DUFhYSCqVSqf9%0ASiQSQq1Ws6Ojo6FCoYBSqZRRnjeIH4JaMQDgc29v7+XU1FSk0WgkHx4ePA4a%0AlLSxsZFYWFhg0UetqamJnJiYwAQCAaPp0OTwgfDpAdTJT09PzoWYZMBxHPpz%0At2DmlZWVZTs/P/eAYDIis8lkike7KSoqsh0cHKBrlvNB9trW1gY0Go37BOzp%0A6bFNT0+73wkXwt8YIm8nMjIyMLPZ7JThzT7Z9N2jOedyuX+kp6dXHR8fvwvC%0A73UpMjJyxuFw/AwAcMoxODhIeJ9qSUlJdqPRiBILxWLxZTgQKSkpdr1eHxXw%0AvvZWzl2Kokq9S4vslc/n99EcLiyIycnJ1/7+/u9DAfi8u7v7rbS01GPEuFyu%0Aw2q1ehgSupKLxeLrYJVYX1931NXVyQEA46EAgLi4ONvd3Z3bE9CplpOTU+F9%0AsLxVKSAEPbm/05CpkT1kYLFYLxDCQHeGT5mZmddnZ2cejemdPBwAtwxoGlpb%0AW5MD+burEnQIpuThAIDY2Fj74+NjJI7jFnSTCTbvdIjOzk68u7t7GGnuHRdS%0AD7gWw3H8NwhhT4jJ6a8hKWxMcf8BWQiA/lSw+WUAAAAASUVORK5CYII=), crosshair");
|
||||
});
|
||||
}
|
||||
})
|
||||
@ -6,33 +6,52 @@
|
||||
"omnibox": {
|
||||
"keyword": "ss"
|
||||
},
|
||||
"icons":{
|
||||
"16": "assets/image/search-256.png",
|
||||
"48": "assets/image/search-256.png",
|
||||
"128": "assets/image/search-256.png"
|
||||
"icons": {
|
||||
"16": "assets/image/logo.png",
|
||||
"48": "assets/image/logo.png",
|
||||
"128": "assets/image/logo.png"
|
||||
},
|
||||
"background": {
|
||||
"scripts": [
|
||||
"assets/js/lib/jquery.min.js",
|
||||
"assets/js/background.js",
|
||||
"pages/advanced-search/js/background.js"
|
||||
"assets/js/advanced-search/background.js"
|
||||
]
|
||||
},
|
||||
"content_scripts": [
|
||||
{
|
||||
"matches": [
|
||||
"<all_urls>"
|
||||
"<all_urls>",
|
||||
"*://*/*"
|
||||
],
|
||||
"js": [
|
||||
"assets/js/lib/jquery.min.js",
|
||||
"assets/js/content.js",
|
||||
"pages/advanced-search/js/content.js"
|
||||
"assets/js/advanced-search/content.js",
|
||||
"assets/js/mouse-effects/click.js",
|
||||
"assets/js/mouse-effects/mouse-style.js"
|
||||
],
|
||||
"css": []
|
||||
"css": [],
|
||||
"run_at": "document_start"
|
||||
},
|
||||
{
|
||||
"matches": [
|
||||
"http://blog.csdn.net/*",
|
||||
"https://blog.csdn.net/*"
|
||||
],
|
||||
"js": [
|
||||
"assets/js/lib/jquery.min.js",
|
||||
"assets/js/expand-full-text/expand.js" //,
|
||||
// "assets/js/content-scripts/click.js",
|
||||
// "assets/js/content-scripts/mouse-style.js"
|
||||
],
|
||||
"run_at": "document_start"
|
||||
}
|
||||
],
|
||||
"browser_action": {
|
||||
"default_icon": "assets/image/icon_disabled.png",
|
||||
"default_icon": "assets/image/logo.png",
|
||||
"default_popup": "popup.html",
|
||||
"default_title": "这是一个默认title"
|
||||
"default_title": "学生助手"
|
||||
},
|
||||
"commands": {
|
||||
"_execute_browser_action": {
|
||||
@ -43,6 +62,10 @@
|
||||
"description": "打开 [学生助手] 插件"
|
||||
}
|
||||
},
|
||||
"web_accessible_resources": [
|
||||
"/assets/image/*"
|
||||
],
|
||||
// "default_locale": "zh_CN",
|
||||
"permissions": [
|
||||
"background",
|
||||
"contextMenus",
|
||||
|
||||
@ -1,18 +1,42 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>BitDance</title>
|
||||
<link href="assets/css/main.css" type="text/css" rel="stylesheet">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>BitDance</title>
|
||||
<link href="assets/css/main.css" type="text/css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="popup">
|
||||
<div class="panel">
|
||||
<p>Hello world!</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="assets/js/common/jquery.min.js"></script>
|
||||
<script src="assets/js/popup.js"></script>
|
||||
<div id="popup">
|
||||
<header>
|
||||
<img src="assets/image/logo.png" alt="Logo">
|
||||
</header>
|
||||
<div class="article">
|
||||
<ul>
|
||||
<li>
|
||||
<div id="expand">
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div id="mouse-style">
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div id="click-per">
|
||||
<span>点击特效</span>
|
||||
<div class="button">
|
||||
<input type="checkbox" id="button-3" class="checkbox" />
|
||||
<div class="knobs"></div>
|
||||
<div class="layer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <script src="assets/js/lib/jquery.min.js"></script> -->
|
||||
<!-- <script src="assets/js/popup.js"></script> -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user