bilibili三连按钮demo
[油猴脚本开发指南]脚本往页面上添加新元素https://bbs.tampermonkey.net.cn/thread-237-1-1.html
(出处: 油猴中文网)
!(data/attachment/forum/202101/23/172303n96ckwrkskg8ygc8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "image.png")
意思是点一下就可以 不用长按了吗 Neon 发表于 2021-9-13 16:33
意思是点一下就可以 不用长按了吗
对的 太棒了，真是我的偶像，又学习到了：2023/5/9 10:06:41
但是发现一个问题：
最新的b站
let ops=document.querySelector('#arc_toolbar_report .ops');
是不是要改成这样：
let ops = document.querySelector('#arc_toolbar_report');
还有一个疑问：
let share = document.querySelector('.share');
这个 .share 是怎么找到的呢？我看了下页面布局并没有发现这个 关键字。
harrydeng 发表于 2023-5-9 10:54
太棒了，真是我的偶像，又学习到了：2023/5/9 10:06:41
但是发现一个问题：
这个我不知道，我也忘记了，可能有更新？
是不是也更新掉了呀 harrydeng 发表于 2023-5-9 10:54
太棒了，真是我的偶像，又学习到了：2023/5/9 10:06:41
但是发现一个问题：
刚刚看了一下，好像确实是没有了
可能更新了 太方便了 本帖最后由 MikerChen 于 2023-8-16 17:49 编辑
b站前端页面好像更新了，所以也改了一下代码：
// ==UserScript==
// @name bilibili三连按钮demo
// @namespace https://bbs.tampermonkey.net.cn/
// @version 0.1
// @description给bilibili增加一个真三连按钮
// @author Wyz
// @match https://www.bilibili.com/video/*
// @grant none
// @run-at document-end
// ==/UserScript==
let triple=document.createElement("button");
triple.innerText="三连";
triple.style.background="#757575";//颜色弄得差不多吧
triple.style.color="#fff";
triple.onclick=function(){
//三连代码
let httpRequest = new XMLHttpRequest();
httpRequest.open('POST', 'https://api.bilibili.com/x/web-interface/archive/like/triple');
httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
httpRequest.withCredentials = true;//设置跨域发送
let aid=window.__INITIAL_STATE__.aid;
let sKey="bili_jct";
let csrf=decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[-.+*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
httpRequest.send('aid='+aid+'&csrf='+csrf);
httpRequest.onreadystatechange = function () {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
var json = JSON.parse(httpRequest.responseText);
console.log(json);
if(json.code==0){
alert("三连成功!刷新页面可见");
}else{
alert("三连失败/(ㄒoㄒ)/~~");
}
}
};
};
let ops=document.querySelector('#arc_toolbar_report').querySelector(':first-child');
console.log(ops);
//插入三连之后好像会重新生成,不添加就不会重新生成,暂时没弄清什么情况,先这样处理了.
//主要作用是监听ops的修改,等它修改完成之后再插入我们的三连按钮,另外注意run-at是document-end,要等待ops生成之后再监听,不然query返回null会报错
//这个事件会多次调用,但是我们insertBefore插入如果元素存在,只是修改而不会新增
ops.addEventListener("DOMNodeInserted", function(event) {
let share=document.querySelector('#share-btn-outer');
console.log("share-parent"+share.parentElement.parentElement.parentElement.outerHTML);
share.parentElement.parentElement.parentElement.insertBefore(triple,share.parentElement.parentElement);
});
当然,后面不想刷新就可以自己添加样式上去就可以
(function() {
'use strict';
setTimeout(() => {
const videoBarDOM = document.querySelector('.video-toolbar-left');
const btnDOM = document.createElement('button');
btnDOM.textContent = '三连';
btnDOM.onclick = () => {
const aid = unsafeWindow.__INITIAL_STATE__.aid;
const csrf = Cookies.get('bili_jct');
fetch('https://api.bilibili.com/x/web-interface/archive/like/triple',{
method:"POST",
headers:{
'Content-Type': 'application/x-www-form-urlencoded',
},
credentials:'include',
body:`aid=${aid}&csrf=${csrf}`,
}).then((res) => {
return res.json();
}).then(result => {
const code = result.code;
if(code === 0){
alert("三连成功!刷新页面可见");
}else{
alert("三连失败/(ㄒoㄒ)/~~");
}
})
}
videoBarDOM.append(btnDOM)
},3000)
})();
页:
[1]