index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>test</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  
       
    <script>
        /* &#33719;&#21462;&#21442;&#25968; */
        const oParam = function() {
            const pathname = "/jawil/github-extension"
            const parseParam = pathname.replace(/^\//, '').split('/')
            const oParam = {
                userName: '',
                reposName: '',
                branch: ''
            }
            oParam.userName = parseParam[0]
            oParam.reposName = parseParam[1]
            oParam.branch = parseParam[3] ? `trees/${parseParam[3]}` : 'trees/master'
            return oParam
        }()

        /* &#33719;&#21462;&#25152;&#26377;&#30340;&#25991;&#20214;&#21517; */
        const filePathName = function(callback) {
            const API = 'https://api.github.com/repos/'
            let parmArr = []
            for (let attr in oParam) {
                parmArr.push(oParam[attr])
            }
            parmArr.splice(2, 0, 'git')
            const getPathUrl = `${API}${parmArr.join('/')}?recursive=1`
            fetch('./data.json', {
                method: 'get'
            }).then(response => {
                return response.json()
            }).then(data => {
                callback(data.tree, document.body)
            })
        }(generatePath)

        let count = 0
        let isHaveTree = false
            /* &#32452;&#21512;&#25340;&#35013;&#29983;&#25104;&#24819;&#35201;&#30340;&#23884;&#22871;&#26684;&#24335; */
        function generatePath(files, parent) {

            count++
            /* &#31579;&#36873;&#20986;&#31532;&#19968;&#23618;&#30340;tree&#21644;blob*/
            files.forEach((ele, i) => {
                    let oOuterLi = document.createElement('li')

                    const cascading = ele.path.split('/').length

                    if (count === cascading && ele.type === 'blob') {

                        oOuterLi.textContent = ele.path
                        parent.appendChild(oOuterLi)

                    }

                    if (ele.type === 'tree' && count === cascading) {

                        isHaveTree = true

                        oOuterLi.textContent = ele.path
                        parent.appendChild(oOuterLi)

                        let oUl = document.createElement('ul')
                        oOuterLi.appendChild(oUl)

                        const newFiles = function() {
                            let filterArr = []
                            files.forEach((item, index) => {

                                if (new RegExp(`^${ele.path}`).test(item.path)) {

                                    const cascad = item.path.split('/').length

                                    if (cascad === count + 1) {
                                        filterArr.push({
                                            path: item.path
                                        })
                                    }

                                }
                            })


                            generatePath(filterArr, oUl)


                        }()


                    }

                    if (!isHaveTree) {
                        return
                    }


                }


            )

        }
    </script>
</body>

</html>