bilibili三连按钮demo

王一之

[油猴脚本开发指南]脚本往页面上添加新元素
https://bbs.tampermonkey.net.cn/thread-237-1-1.html
(出处: 油猴中文网)

Neon

意思是点一下就可以 不用长按了吗

王一之

Neon 发表于 2021-9-13 16:33
意思是点一下就可以 不用长按了吗

对的

harrydeng

太棒了，真是我的偶像，又学习到了：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

但是发现一个问题：

刚刚看了一下，好像确实是没有了

可能更新了

nlgyj003

太方便了

MikerChen

b站前端页面好像更新了，所以也改了一下代码：

1. // ==UserScript==
   
2. // [url=home.php?mod=space&uid=23356]@name[/url]         bilibili三连按钮demo
   
3. // @namespace    https://bbs.tampermonkey.net.cn/
   
4. // @version      0.1
   
5. // @description  给bilibili增加一个真三连按钮
   
6. // @author       Wyz
   
7. // [url=home.php?mod=space&uid=52134]@match[/url]        https://www.bilibili.com/video/*
   
8. // @grant        none
   
9. // @run-at       document-end
   
10. // ==/UserScript==
    
11. 
    
12. let triple=document.createElement("button");
    
13. triple.innerText="三连";
    
14. triple.style.background="#757575";//颜色弄得差不多吧
    
15. triple.style.color="#fff";
    
16. triple.onclick=function(){
    
17.     //三连代码
    
18.     let httpRequest = new XMLHttpRequest();
    
19.     httpRequest.open('POST', 'https://api.bilibili.com/x/web-interface/archive/like/triple');
    
20.     httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    
21.     httpRequest.withCredentials = true;//设置跨域发送
    
22.     let aid=window.__INITIAL_STATE__.aid;
    
23.     let sKey="bili_jct";
    
24.     let csrf=decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[-.+*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
    
25.     httpRequest.send('aid='+aid+'&csrf='+csrf);
    
26.     httpRequest.onreadystatechange = function () {
    
27.         if (httpRequest.readyState == 4 && httpRequest.status == 200) {
    
28.             var json = JSON.parse(httpRequest.responseText);
    
29.             console.log(json);
    
30.             if(json.code==0){
    
31.                 alert("三连成功!刷新页面可见");
    
32.             }else{
    
33.                 alert("三连失败/(ㄒoㄒ)/~~");
    
34.             }
    
35.         }
    
36.     };
    
37. };
    
38. let ops=document.querySelector('#arc_toolbar_report').querySelector(':first-child');
    
39. console.log(ops);
    
40. //插入三连之后好像会重新生成,不添加就不会重新生成,暂时没弄清什么情况,先这样处理了.
    
41. //主要作用是监听ops的修改,等它修改完成之后再插入我们的三连按钮,另外注意run-at是document-end,要等待ops生成之后再监听,不然query返回null会报错
    
42. //这个事件会多次调用,但是我们insertBefore插入如果元素存在,只是修改而不会新增
    
43. ops.addEventListener("DOMNodeInserted", function(event) {
    
44.     let share=document.querySelector('#share-btn-outer');
    
45.     console.log("share-parent"+share.parentElement.parentElement.parentElement.outerHTML);
    
46.     share.parentElement.parentElement.parentElement.insertBefore(triple,share.parentElement.parentElement);
    
47. });
    
48. 
    
49. 
    
50. 
    

复制代码

superBiuBiu

当然,后面不想刷新就可以自己添加样式上去就可以

1. 
   
2. (function() {
   
3.     'use strict';
   
4.     setTimeout(() => {
   
5.         const videoBarDOM = document.querySelector('.video-toolbar-left');
   
6.         const btnDOM = document.createElement('button');
   
7.         btnDOM.textContent = '三连';
   
8.         btnDOM.onclick = () => {
   
9.             const aid = unsafeWindow.__INITIAL_STATE__.aid;
   
10.             const csrf = Cookies.get('bili_jct');
    
11.             fetch('https://api.bilibili.com/x/web-interface/archive/like/triple',{
    
12.                 method:"POST",
    
13.                 headers:{
    
14.                     'Content-Type': 'application/x-www-form-urlencoded',
    
15.                 },
    
16.                 credentials:'include',
    
17.                 body:`aid=${aid}&csrf=${csrf}`,
    
18.             }).then((res) => {
    
19.                 return res.json();
    
20.             }).then(result => {
    
21.                 const code = result.code;
    
22.                 if(code === 0){
    
23.                     alert("三连成功!刷新页面可见");
    
24.                 }else{
    
25.                     alert("三连失败/(ㄒoㄒ)/~~");
    
26.                 }
    
27.             })
    
28.         }
    
29.         videoBarDOM.append(btnDOM)
    
30.     },3000)
    
31. })();
    

复制代码