[学习记录] 使用脚本向页面上添加新元素

李白~

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; //设置跨域发送带上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__里面取的。
我的代码如下

// ==UserScript==
// @name         b站真一键三联
// @namespace    https://bbs.tampermonkey.net.cn/
// @version      0.1.0
// @description  try 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([title="收藏（E）"])');
    likeEle.after(divEle);
})();

但是我发现，B站好像可以知道有脚本在运行，启动脚本之后

右上角账号相关的东西没有了，评论也没有了，关闭脚本后回复正常，是否是我没有使用 MutationObserver直接插入的缘故，最后附上一张勉强算得上成功的截图

李恒道

b站好像现在太早注入出现diff不一致就会报错
我也碰到了好几次这个问题

可以正常加载的在教程的最下方
https://learn.scriptcat.org/%E6% ... E%E4%B8%89%E8%BF%9E