[学习记录] 使用脚本向页面上添加新元素
```jslet 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; //设置跨域发送带上cookie
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;
//上面这一段就是取出csrf，在cookie里面是bili_jct，这一段我是直接copy的，总之获取到就好了啦
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 aid = window.__INITIAL_STATE__.aid;` 这行代码是怎么知道要去`window.__INITIAL_STATE__`里面取的。
我的代码如下
```js
// ==UserScript==
// @name b站真一键三联
// @namespace https://bbs.tampermonkey.net.cn/
// @version 0.1.0
// @descriptiontry to take over the world!
// @author You
// @match https://www.bilibili.com/video/*
// @run-at document-end
// @grant none
// ==/UserScript==
(function() {
'use strict';
let divEle = document.createElement("div");
divEle.addEventListener("click", async ()=>{
let csfr = window.document.cookie.match(/(?<=bili_jct=).*?(?=;)/);
let aid = window.__INITIAL_STATE__.aid;
let response = await fetch("https://api.bilibili.com/x/web-interface/archive/like/triple", {
method: "POST",
headers: {
"Content-type": "application/x-www-form-urlencoded"
},
body: `aid=${aid}&eab_x=2&ramval=4&source=web_normal&ga=1&csrf=${csfr}`,
credentials: 'include',
cookie: window.document.cookie
});
let json = await response.json();
if(json?.code == 0){
alert("三连成功");
}else{
alert("三连失败");
}
});
divEle.innerHTML = '<input type="button" value="一键三连"/>';
let likeEle = document.querySelector('.toolbar-left-item-wrap:has()');
likeEle.after(divEle);
})();
```
但是我发现，B站好像可以知道有脚本在运行，启动脚本之后
!(data/attachment/forum/202411/24/182723tm3tk1ny15b0tyk1.png)
右上角账号相关的东西没有了，评论也没有了，关闭脚本后回复正常，是否是我没有使用 `MutationObserver`直接插入的缘故，最后附上一张勉强算得上成功的截图
!(data/attachment/forum/202411/24/183341zc2hmthchhb2u4zv.png)
b站好像现在太早注入出现diff不一致就会报错
我也碰到了好几次这个问题
可以正常加载的在教程的最下方
https://learn.scriptcat.org/%E6%B2%B9%E7%8C%B4%E6%95%99%E7%A8%8B/%E5%85%A5%E9%97%A8%E7%AF%87/%E4%BD%BF%E7%94%A8%E8%84%9A%E6%9C%AC%E5%90%91%E9%A1%B5%E9%9D%A2%E4%B8%8A%E6%B7%BB%E5%8A%A0%E6%96%B0%E5%85%83%E7%B4%A0/#bilibili-%E7%9C%9F%E4%B8%80%E9%94%AE%E4%B8%89%E8%BF%9E
李恒道 发表于 2024-11-25 23:11
b站好像现在太早注入出现diff不一致就会报错
我也碰到了好几次这个问题
使用`MutationObserver`后可以正常插入元素了。非常感谢，还想请问一下三联请求有一个请求参数 `aid` 是怎么知道要从 `window.__INITIAL_STATE__` 里面去获取 李白~ 发表于 2024-11-27 09:37
使用`MutationObserver`后可以正常插入元素了。非常感谢，还想请问一下三联请求有一个请求参数 `aid` ...
遇到个人标识符起手从htlm元素搜和storage搜
算是起手式了
页:
[1]