标签： 油猴

再更新一下，接之前的版本油猴脚本，抓取LeetCode题解[2]，在原来的基础上增加了单独抓取单篇题解的功能，再做这个的时候其实遇到个问题，主要难点在于如何监听浏览器地址栏的变化，另开一个文章来说《无刷新页面监听URL变化实现》

至于新增这个功能的原因如下，在使用初版的功能全量的抓取了自己的题解文章之后，对于每天新增的题解不能单独抓取补充到indexDB之中，只能再次全量抓取一下，显然不太方便，所以又改进了下增加了这样的功能

另外我试了下，这个抓取用户题解文章列表的接口是不做权限验证的，也就是说A用户可以抓取B用户的所有题解列表，我找了下使用场景，当A用户点开某个B用户的LeetCode个人主页的时候，下面有一块展示区域是防止当前B用户的题解列表的。这是一个正常使用的场景，也就是说，你可以抓取任何你喜欢的用户的所有题解列表

另外修改了一点样式。在右边单独建了小的Panel把按钮都放进去，到处分散的不大好看，

下一步内容，解析题目、题解中的图片标签，抓取图片内容并base64之后作为文本保存下来，使题解内容脱离对力扣图片资源的依赖

用来抓取自己之前写的LeetCode刷题写的题解

// ==UserScript==
// @name         LeetCode Test
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://leetcode.cn/problems/*/solution/*
// @grant        none
// ==/UserScript==





(function() {
    'use strict';
    let createButton = (func, btnText, top) => {
        let btn = document.createElement("button")
        btn.style.position = "fixed"
        btn.style.right = 0
        // btn.style.top='30%'
        btn.style.top = top
        btn.style.padding = "10px"
        btn.style.zIndex = 99999
        btn.innerText = btnText
        btn.addEventListener("click", func)
        document.body.append(btn)
    }

    let dbName = 'solutionArticle', version = 1, storeName = 'mySolution'

    let indexedDB = window.indexedDB
    let db
    const request = indexedDB.open(dbName, version)
    request.onsuccess = function(event) {
        db = event.target.result // 数据库对象
        console.log('数据库打开成功')
    }

    request.onerror = function(event) {
        console.log('数据库打开报错')
    }

    request.onupgradeneeded = function(event) {
        // 数据库创建或升级的时候会触发
        console.log('onupgradeneeded')
        db = event.target.result // 数据库对象
        let objectStore
        if (!db.objectStoreNames.contains(storeName)) {
            objectStore = db.createObjectStore(storeName, { keyPath: 'questionFrontendId' }) // 创建表
            // objectStore.createIndex('name', 'name', { unique: true }) // 创建索引 可以让你搜索任意字段
        }
    }
    let saveToIndeDB = (data)=>{
        let request = db.transaction([storeName], 'readwrite') // 事务对象 指定表格名称和操作模式（"只读"或"读写"）
        .objectStore(storeName) // 仓库对象
        .add(data)

        request.onsuccess = function(event) {
            console.log('数据写入成功')
        }

        request.onerror = function(event) {
            console.log('数据写入失败')
            throw new Error(event.target.error)
        }
    }
    let cursorGetData = () =>{
        let list = []
        let store = db.transaction(storeName, 'readwrite') // 事务
        .objectStore(storeName) // 仓库对象
        let request = store.openCursor() // 指针对象
        return new Promise((resolve, reject) => {
            request.onsuccess = function(e) {
                let cursor = e.target.result
                if (cursor) {
                    // 必须要检查
                    list.push(cursor.value)
                    cursor.continue() // 遍历了存储对象中的所有内容
                } else {
                    resolve(list)
                }
            }
            request.onerror = function(e) {
                reject(e)
            }
        })
    }

    createButton( ()=>{
        cursorGetData().then(list=>{
            console.log(list)
        })
    } , "列表", "160px")




    let key = ''
    let addLocal = (k,v)=>{
        let oldJson = localStorage.getItem(key)
        if(null==oldJson){
            oldJson = {}
        }else{
            oldJson = JSON.parse(oldJson);
        }
        oldJson[k] = v;
        localStorage.setItem(key,JSON.stringify(oldJson))
    }
    let getQuestion = (slug)=>{
        let p = {
            "operationName":"questionData",
            "variables":{"titleSlug":slug},
            "query":"query questionData($titleSlug: String!) {\n  question(titleSlug: $titleSlug) {\n    questionId\n    questionFrontendId\n    categoryTitle\n    boundTopicId\n    title\n    titleSlug\n    content\n    translatedTitle\n    translatedContent\n    isPaidOnly\n    difficulty\n    likes\n    dislikes\n    isLiked\n    similarQuestions\n    contributors {\n      username\n      profileUrl\n      avatarUrl\n      __typename\n    }\n    langToValidPlayground\n    topicTags {\n      name\n      slug\n      translatedName\n      __typename\n    }\n    companyTagStats\n    codeSnippets {\n      lang\n      langSlug\n      code\n      __typename\n    }\n    stats\n    hints\n    solution {\n      id\n      canSeeDetail\n      __typename\n    }\n    status\n    sampleTestCase\n    metaData\n    judgerAvailable\n    judgeType\n    mysqlSchemas\n    enableRunCode\n    envInfo\n    book {\n      id\n      bookName\n      pressName\n      source\n      shortDescription\n      fullDescription\n      bookImgUrl\n      pressImgUrl\n      productUrl\n      __typename\n    }\n    isSubscribed\n    isDailyQuestion\n    dailyRecordStatus\n    editorType\n    ugcQuestionId\n    style\n    exampleTestcases\n    jsonExampleTestcases\n    __typename\n  }\n}\n"
        }
        let options = {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(p)
        }
        fetch("https://leetcode.cn/graphql/",options).then((res)=>{
            if(res.ok){
                //如果取数据成功
                res.json().then((data)=>{
                    //转化为json数据进行处理
                    console.log(data.data)
                    let question = data.data.question
                    addLocal('questionTitle',question.translatedTitle)
                    addLocal('questionFrontendId',question.questionFrontendId)
                    addLocal('questionFullTittle',"LeetCode刷题【"+question.questionFrontendId+"】"+question.translatedTitle)
                    let questionContentAppend = "<div>Related Topics</div><div><ul>"
                    let questionTags = [];
                    for(let tag of question.topicTags){
                        questionTags.push(tag.translatedName);
                        questionContentAppend += "<li>"+tag.translatedName+"</li>"
                    }
                    questionContentAppend += "</ul></div></div><br><div><li>👍 "+question.likes+"</li><li>👎 "+question.dislikes+"</li></div>"
                    addLocal('questionContent',question.translatedContent+questionContentAppend)
                    addLocal('questionTags',questionTags)
                    addLocal('questionTagsStr',"算法,LeetCode,"+questionTags.join(",")+",")
                    saveToIndeDB(JSON.parse(localStorage.getItem(key)))

                })
            }else{
                console.log(res.status);
                //查看获取状态
            }
        }).catch((res)=>{
            //输出一些错误信息
            console.log(res.status);
        })
    }
    let pathname = window.location.pathname
    let param = {
        "operationName":"solutionDetailArticle",
        "variables":{
            "slug":pathname.split("/")[4],
            "orderBy":"DEFAULT"
        },
        "query":"query solutionDetailArticle($slug: String!, $orderBy: SolutionArticleOrderBy!) {\n  solutionArticle(slug: $slug, orderBy: $orderBy) {\n    ...solutionArticle\n    content\n    question {\n      questionTitleSlug\n      __typename\n    }\n    position\n    next {\n      slug\n      title\n      __typename\n    }\n    prev {\n      slug\n      title\n      __typename\n    }\n    __typename\n  }\n}\n\nfragment solutionArticle on SolutionArticleNode {\n  rewardEnabled\n  canEditReward\n  uuid\n  title\n  slug\n  sunk\n  chargeType\n  status\n  identifier\n  canEdit\n  canSee\n  reactionType\n  reactionsV2 {\n    count\n    reactionType\n    __typename\n  }\n  tags {\n    name\n    nameTranslated\n    slug\n    tagType\n    __typename\n  }\n  createdAt\n  thumbnail\n  author {\n    username\n    profile {\n      userAvatar\n      userSlug\n      realName\n      __typename\n    }\n    __typename\n  }\n  summary\n  topic {\n    id\n    commentCount\n    viewCount\n    __typename\n  }\n  byLeetcode\n  isMyFavorite\n  isMostPopular\n  isEditorsPick\n  hitCount\n  videosInfo {\n    videoId\n    coverUrl\n    duration\n    __typename\n  }\n  __typename\n}\n"
    }
    let options = {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(param)
    }
    fetch("https://leetcode.cn/graphql/",options).then((res)=>{
        if(res.ok){
            //如果取数据成功
            res.json().then((data)=>{
                //转化为json数据进行处理
                //console.log(data);
                let {data:solutionArticle} = data
                let {solutionArticle:{author,content,question,title}} = solutionArticle
                if(author.username != "cheungq-6"){
                    return
                }
                console.log(solutionArticle)
                getQuestion(question.questionTitleSlug)
                key = '_____'+question.questionTitleSlug
                console.error("key:"+key)
                addLocal('title',title)
                addLocal('content',title+"\n"+content)
                addLocal('slug',question.questionTitleSlug)
            })
        }else{
            console.log(res.status);
            //查看获取状态
        }
    }).catch((res)=>{
        //输出一些错误信息
        console.log(res.status);
    })
    // Your code here...
})();

抓到的数据最终存到indexdDB中，中间存了下localStorage，后来改的存indexdDB，但是没删掉中间存localStorage的过程