diff --git a/README.md b/README.md index 92b5a5f..7e12260 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ This is a chrome extension that supports parsing articles on GitHub and generating a sidebar directory for indexing of article titles. -> 这是一款 chrome 扩展，支持对 GitHub 上的文章进行解析，生成侧边栏目录，为 GitHub 而生的，文章标题目录索引扩展。 +> 这是一款 chrome 扩展，支持对 GitHub 上的文章进行解析，生成侧边栏文章标题目录。为 GitHub 而生的，文章标题目录索引扩展。 @@ -16,22 +16,46 @@ This is a chrome extension that supports parsing articles on GitHub and generati ## How to use -由于目前插件暂未上传至插件市场，需要手动下载。 +Currently available on the Chrome Market, click on the link to install : [Chrome Extension：GitHub-Markdown-TOC](https://chrome.google.com/webstore/detail/github-markdown-toc/hjjnbcjiekmpmkbogjkpchdblioffihb?hl=zh-CN) -1. 下载本仓库根目录文件 `markdown-toc-code.crx`，[点击下载](https://github.com/fullstack-tutorial/github-markdown-toc/blob/master/markdown-toc-code.crx?raw=true) -2. 直接将 `crx` 扩展文件拖动到 chrome 任意位置，添加即可安装（下载后浏览器直接打开也可安装） -3. 打开任意一个 GitHub 仓库，即可预览左侧目录 +**Support browser**: chrome browser, can also run in all chrome kernel browsers + +> 目前已在 Chrome 市场上架，点击链接前往安装 [Chrome Extension：GitHub-Markdown-TOC](https://chrome.google.com/webstore/detail/github-markdown-toc/hjjnbcjiekmpmkbogjkpchdblioffihb?hl=zh-CN) +> + +> **支持浏览器**：chrome浏览器，还可以运行在所有 webkit 内核的国产浏览器，比如 360 极速浏览器、360 安全浏览器、搜狗浏览器、QQ 浏览器等等 + + + +![1545712158274](assets/1545712158274.png) + + + +## Suggestion about us + +Leave your experience feeling below + +> 在下面可以留下你的体验感受哦 + +https://github.com/fullstack-tutorial/github-markdown-toc/issues/6 ## Contributors - - - +This is a partner of open source contributions, and interested friends are welcome to join the open source team. You can contact me by email, `frank_lin@whu.edu.cn` + +> 这是开源贡献的小伙伴们，欢迎感兴趣朋友加入开源小组。可以通过邮箱联系我，frank_lin@whu.edu.cn + + + + + + + @@ -44,4 +68,6 @@ This is a chrome extension that supports parsing articles on GitHub and generati - features - 侧边栏显示，不遮挡正文内容 - 拖动自适应效果 +- 2018-12-25 + - chrome 市场上架 diff --git a/assets/1545712158274.png b/assets/1545712158274.png new file mode 100644 index 0000000..6e87f36 Binary files /dev/null and b/assets/1545712158274.png differ diff --git a/markdown-toc-code/background.html b/markdown-toc-code/background.html new file mode 100644 index 0000000..e69de29 diff --git a/markdown-toc-code/css/content.css b/markdown-toc-code/css/content.css index 6f01a20..8292429 100644 --- a/markdown-toc-code/css/content.css +++ b/markdown-toc-code/css/content.css @@ -1,61 +1,116 @@ -#panel{ - position: fixed; - width: 400px; - min-height: 200px; - z-index: 999; - right: 0px; - top: 60px; - background: gainsboro; +#panel { + position: fixed; + width: 400px; + min-height: 200px; + z-index: 999; + right: 0px; + top: 60px; + background: gainsboro; } -#panel ul{ - list-style: none; + +#panel ul { + list-style: none; } -#panel ul li{ - list-style: none; + +#panel ul li { + list-style: none; } -#panel ul li a{ - display: block; - text-overflow: ellipsis; + +#panel ul li a { + display: block; + text-overflow: ellipsis; } + /* 目录栏的样式 */ -.div_toc{ - width: -webkit-calc(100% - 5px); - height: 100%; - float: left; - padding: 20px; - overflow: auto; - overflow-x: hidden; - background-color: #fafbfc; - /* border: 1px solid #d1d5da; */ - border-right-width: 0; -} - -.div_right_bar{ - width: 5px; - height: 100%; - background-color: #fafbfc; - cursor: col-resize; - float: left; - border-right: 1px solid #d1d5da; + +.div_toc { + width: -webkit-calc(100% - 5px); + height: 100%; + float: left; + padding: 20px; + overflow: auto; + overflow-x: hidden; + background-color: #fafbfc; + /* border: 1px solid #d1d5da; */ + border-right-width: 0; +} + +.div_right_bar { + /* width: 5px; */ + height: 100%; + background-color: #fafbfc; + cursor: col-resize; + float: left; + border-right: 1px solid #e1e4e8; } + /* 这个地方 */ -.toc{ - position: fixed; - width: 350px; - min-height: 200px; - z-index: 999; - min-width: 200px; - left: 0px; - top: 0px; - border-radius: 0px; - height: 100%; - bottom: 100px; - float: left; +.toc { + position: fixed; + width: 350px; + min-height: 200px; + z-index: 999; + min-width: 200px; + left: 0px; + top: 0px; + border-radius: 0px; + height: 100%; + bottom: 100px; + float: right; + /* border: 1px solid brown; */ } -body{ - margin-left: 350px; +body { + margin-left: 350px; } + + +/* #div_toc li a:link { + text-decoration: none; +} */ + + +/* 滚动条 */ + + +/*水平滚动条的样式*/ + +.toc ::-webkit-scrollbar-thumb:horizontal { + width: 5px; + background-color: #CCCCCC; + -webkit-border-radius: 6px; +} + +.toc ::-webkit-scrollbar-track-piece { + background-color: #fff; + -webkit-border-radius: 0; +} + +.toc ::-webkit-scrollbar { + width: 10px; + height: 8px; +} + + +/*垂直滚动条的样式*/ + +.toc ::-webkit-scrollbar-thumb:vertical { + height: 50px; + background-color: #999; + -webkit-border-radius: 4px; + outline: 2px solid #fff; + outline-offset: -2px; + border: 2px solid #fff; +} + + +/*滚动条的hover样式*/ + +.toc ::-webkit-scrollbar-thumb:hover { + height: 50px; + background-color: #9f9f9f; + -webkit-border-radius: 4px; +} \ No newline at end of file diff --git a/markdown-toc-code/img/logo.png b/markdown-toc-code/img/logo.png new file mode 100644 index 0000000..28a9ff1 Binary files /dev/null and b/markdown-toc-code/img/logo.png differ diff --git a/markdown-toc-code/img/logo.ico b/markdown-toc-code/img/logo2.ico similarity index 100% rename from markdown-toc-code/img/logo.ico rename to markdown-toc-code/img/logo2.ico diff --git a/markdown-toc-code/js/background.js b/markdown-toc-code/js/background.js index bcaafa2..f19635a 100644 --- a/markdown-toc-code/js/background.js +++ b/markdown-toc-code/js/background.js @@ -1,11 +1,51 @@ - chrome.browserAction.setBadgeText({text: 'new'}); - chrome.browserAction.setBadgeBackgroundColor({color: [255, 0, 0, 255]}); +chrome.browserAction.setBadgeText({ text: 'new' }); +chrome.browserAction.setBadgeBackgroundColor({ color: [255, 0, 0, 255] }); chrome.browserAction.onClicked.addEventListener(claaback); -function claaback(){ + +function claaback() { console.log(1); } chrome.runtime.onMessage.addEventListener(bk); -function bk(){ +function bk() { console.log("hello") } + + +// // 右键菜单管理 +// chrome.contextMenus.create({ +// "type": "radio", +// "title": "切换绝对路径抓取", +// "checked": false, +// "onclick": switch_absolute_xpath // 点击时调用方法 +// }); +// chrome.contextMenus.create({ +// "type": "radio", +// "title": "切换NCC路径抓取", +// "checked": true, +// "onclick": switch_ncc_xpath +// }); +// // 参数会传递 tab 信息，通过 tab.id 可以获取用户是在到那个页面里点击我们菜单选项的 +// function switch_absolute_xpath(info, tab) { +// // 然后我通过 tab.id 给对应页面传递消息 +// chrome.tabs.sendMessage(tab.id, { type: 'switch_absolute_xpath' }); +// } +// function switch_ncc_xpath(info, tab) { +// chrome.tabs.sendMessage(tab.id, { type: 'switch_ncc_xpath' }); +// } + + +chrome.contextMenus.create({ + id: 'baidu-search', + title: '使用度娘搜索：%s', + contexts: ['selection'] +}); +chrome.contextMenus.onClicked.addListener(function (info, tab) { + switch (info.menuItemId) { + case 'baidu-search': + chrome.tabs.create({ url: 'https://www.baidu.com/s?ie=utf-8&wd=' + encodeURI(info.selectionText) }); + break; + } +}); + + diff --git a/markdown-toc-code/js/content-script.js b/markdown-toc-code/js/content-script.js index ca64153..9a1c693 100644 --- a/markdown-toc-code/js/content-script.js +++ b/markdown-toc-code/js/content-script.js @@ -1,4 +1,4 @@ -const $ = function (str) { +const $ = function(str) { return document.querySelector(str); }; @@ -28,36 +28,46 @@ let $container; let $repoheadDetailsContainer; let $jsRepoNav; let containerClient; -const domInit = function(){ - console.log(new Date().getTime(),'初始化开始') - var git_reg = /[https://github.com].*/; - if (git_reg.test(document.URL)) { + +const domInit = function() { + // 这里只对 github 域名下的 readme 后缀的生效 + var mdReg = /^.+github.com.+\.md#*.*$/ + var repositoryReg = /^.+github.com\/[\w|-]+\/[\w|-]+$/ + + // alert(repositoryReg.test(document.URL)) + if (!(mdReg.test(document.URL) || repositoryReg.test(document.URL))) { + return + } + else{ var _readme = $('article'); - var data = _readme.querySelectorAll('h1,h2,h3'); + var data = _readme.querySelectorAll('h1,h2,h3,h4'); var div = init(data); document.body.appendChild(div); } + + // console.log(new Date().getTime(), '初始化开始') + // alert($(window).width); console.log(document.getElementById('div_right_bar')); bindResize(document.getElementById('div_right_bar')); const $idHtml = document.querySelector('#js-repo-pjax-container'); - $container = $idHtml.children[1]; + $container = $idHtml.children[1]; $repoheadDetailsContainer = document.querySelector('.repohead-details-container'); $jsRepoNav = document.querySelector('.js-repo-nav'); - containerClient = $container.getClientRects()[0]; + containerClient = $container.getClientRects()[0]; - // 因为你这里你根本不知道页面结构到底加载好了没 资源 z加载enme完毕了吗 + // 因为你这里你根本不知道页面结构到底加载好了没 资源加载enme完毕了吗 // document.querySelector('.Header').style.paddingLeft = '350px'; initTocBar(350); // document.querySelector('#js-repo-pjax-container').style.paddingLeft = '350px'; - - + + // document.getElementsByTagName('html')[0].style.marginLeft = "350px"; } -document.addEventListener('DOMContentLoaded',domInit,false); +document.addEventListener('DOMContentLoaded', domInit, false); -function initTocBar(initWidth){ +function initTocBar(initWidth) { var els = document.getElementById('toc').style; //宇宙超级无敌运算中... @@ -66,52 +76,49 @@ function initTocBar(initWidth){ var minWidth = 200; var moveWidth = parseInt(initWidth); - if(moveWidth < 200){ + if (moveWidth < 200) { return; } var $header = document.querySelector('.Header'); - - - if(moveWidth > minWidth && initWidth > containerClient.left){ + + + if (moveWidth > minWidth && initWidth > containerClient.left) { document.getElementsByTagName('html')[0].style.marginLeft = w2; $header.style.paddingLeft = 0 + 'px'; // $container.style.marginLeft = '10px'; $container.style.marginLeft = '10px'; $repoheadDetailsContainer.style.marginLeft = '10px'; $jsRepoNav.style.marginLeft = '10px'; - }else{ + } else { $header.style.paddingLeft = moveWidth + 'px'; document.getElementsByTagName('html')[0].style.marginLeft = 0; $container.style.marginLeft = 'auto'; $repoheadDetailsContainer.style.marginLeft = 'auto'; $jsRepoNav.style.marginLeft = 'auto'; } - els.width = initTocBar + 'px'; + els.width = initTocBar + 'px'; } - -// 这里是画出 toc的逻辑 +// 这里是画出 toc的逻辑 function init(list) { var toc = document.createElement("div"); - toc.setAttribute("class", "toc"); - toc.setAttribute("id", "toc"); + toc.setAttribute("class", "toc"); + toc.setAttribute("id", "toc"); var div_top = document.createElement("div"); - addStyle(div_top, {"width": "100%"}); + addStyle(div_top, { "width": "100%" }); div_top.setAttribute('id', "top"); var div_toc = document.createElement("div"); div_toc.setAttribute('id', "div_toc"); - div_toc.setAttribute("class", "div_toc"); + div_toc.setAttribute("class", "div_toc"); - var div_right_bar = document.createElement("div"); // 这是一个 拖动bar + var div_right_bar = document.createElement("div"); // 这是一个 拖动bar div_right_bar.setAttribute('id', "div_right_bar"); - div_right_bar.setAttribute("class", "div_right_bar"); + div_right_bar.setAttribute("class", "div_right_bar"); div_right_bar.textContent = ""; - - var toc_ul = document.createElement("ul"); var firstLevel = 0; @@ -122,22 +129,24 @@ function init(list) { var hreftagname = header.firstElementChild.hash; var level = parseInt(header.tagName.replace('H', ''), 10); - - if(!isGetFisrtLevel){ + + if (!isGetFisrtLevel) { firstLevel = level; isGetFisrtLevel = true; var header_p = document.createElement("li"); - header_p.textContent = "GitHub Markdown TOC"; - addStyle(header_p, {"listStyle": "none","font-size":"20px","margin-bottom":"10px"}); + header_p.textContent = "GitHub Markdown TOC v2021.07"; + addStyle(header_p, { "listStyle": "none", "font-size": "18px", "margin-bottom": "10px" }); var gotop_li = document.createElement("li"); var gotop_li = document.createElement("li"); - addStyle(gotop_li, {"listStyle": "none"}); + addStyle(gotop_li, { "listStyle": "none" }); + var gotop_a = document.createElement("a"); - addStyle(gotop_a, {"color": "#0366d6","textOverflow ": "ellipsis","font-weight":"bold"}); + addStyle(gotop_a, { "color": "#0366d6", "textOverflow ": "ellipsis", "font-weight": "bold" }); gotop_a.innerHTML = "▲ GO TOP"; gotop_a.setAttribute("href", "#"); + div_toc.appendChild(header_p); div_toc.appendChild(gotop_li); @@ -145,21 +154,25 @@ function init(list) { } var li = document.createElement("li"); - addStyle(li, {"listStyle": "none"}); + addStyle(li, { "listStyle": "none" }); var a = document.createElement("a"); - addStyle(a, {"color": "#0366d6","textOverflow ": "ellipsis"}); + addStyle(a, { "color": "#0366d6", "textOverflow ": "ellipsis" }); + var span = document.createElement("span"); + // a.innerHTML = level + header.textContent; - if( level == firstLevel ){ + // 如果是第一层 + if (level == firstLevel) { a.innerHTML = header.textContent; - addStyle(a, {"font-weight":"bold"}); - } - else{ - a.innerHTML = new Array(level * 2).join(' ') + header.textContent; + addStyle(a, { "font-weight": "bold" }); + } else { + a.innerHTML = header.textContent; + span.innerHTML = new Array(level * 3).join(' ') } a.setAttribute("href", hreftagname); - // li.appendChild(a); + li.appendChild(span) + li.appendChild(a); div_toc.appendChild(li); div_toc.lastChild.appendChild(a); } @@ -171,32 +184,31 @@ function init(list) { } -// 这里是绑定resize事件的方法 +// 这里是绑定 resize 事件的方法 function bindResize(el) { //初始化参数 var els = document.getElementById('toc').style; //鼠标的 X 和 Y 轴坐标 x = 0; - //邪恶的食指 - el.onmousedown = function(e){ + //邪恶的食指 + el.onmousedown = function(e) { //按下元素后，计算当前鼠标与对象计算后的坐标 x = e.clientX - el.offsetWidth, - y = e.clientY - el.offsetHeight; + y = e.clientY - el.offsetHeight; console.log(x); //在支持 setCapture 做些东东 el.setCapture ? ( - //捕捉焦点 + //捕捉焦点 el.setCapture(), - //设置事件 - el.onmousemove = function (ev) - { + //设置事件 + el.onmousemove = function(ev) { mouseMove(ev || event); }, el.onmouseup = mouseUp ) : ( - function(){ - document.addEventListener('mousemove',mouseMove,false); - document.addEventListener('mouseup',mouseUp,false); + function() { + document.addEventListener('mousemove', mouseMove, false); + document.addEventListener('mouseup', mouseUp, false); }() ); //防止默认事件发生 @@ -214,7 +226,7 @@ function bindResize(el) { // haha xiecuole // els.width = e.clientX - x + 'px'; // 好的你来操作 - + // if(e.clientX && e.clientX > (w-980)/2 ){ // document.getElementsByTagName('html')[0].style.marginLeft = w2; // }else{ @@ -225,43 +237,40 @@ function bindResize(el) { // } // console.log("e.clientX " + e.clientX); - - + + // var readmeWidth = document.getElementById("readme").clientWidth; // var maxWidth = document.getElementById("readme").clientWidth * 0.8; var minWidth = 200; var moveWidth = parseInt(e.clientX); - if(moveWidth < 200){ + if (moveWidth < 200) { return; } var $header = document.querySelector('.Header'); - - - if(moveWidth > minWidth && e.clientX > containerClient.left){ + + + if (moveWidth > minWidth && e.clientX > containerClient.left) { document.getElementsByTagName('html')[0].style.marginLeft = w2; $header.style.paddingLeft = 0 + 'px'; // $container.style.marginLeft = '10px'; $container.style.marginLeft = '10px'; $repoheadDetailsContainer.style.marginLeft = '10px'; $jsRepoNav.style.marginLeft = '10px'; - }else{ + } else { $header.style.paddingLeft = moveWidth + 'px'; document.getElementsByTagName('html')[0].style.marginLeft = 0; $container.style.marginLeft = 'auto'; $repoheadDetailsContainer.style.marginLeft = 'auto'; $jsRepoNav.style.marginLeft = 'auto'; } - els.width = e.clientX + 'px'; + els.width = e.clientX + 'px'; return; - if( moveWidth > minWidth && e.clientX > (w-980)/2 ){ + if (moveWidth > minWidth && e.clientX > (w - 980) / 2) { document.getElementsByTagName('html')[0].style.marginLeft = w2; $header.style.paddingLeft = 0 + 'px'; - } - - - els.width = e.clientX + 'px'; + els.width = e.clientX + 'px'; } //停止事件 function mouseUp() { @@ -272,10 +281,10 @@ function bindResize(el) { //移除事件 el.onmousemove = el.onmouseup = null ) : ( - function(){ - document.removeEventListener("mousemove", mouseMove); - document.removeEventListener("mouseup", mouseUp); - }() - ); + function() { + document.removeEventListener("mousemove", mouseMove); + document.removeEventListener("mouseup", mouseUp); + }() + ); } } \ No newline at end of file diff --git a/markdown-toc-code/manifest.json b/markdown-toc-code/manifest.json index f38027b..c0170b1 100644 --- a/markdown-toc-code/manifest.json +++ b/markdown-toc-code/manifest.json @@ -1,28 +1,39 @@ { - "manifest_version": 2, - - "name": "GitHub-Markdown-TOC", - "description": "a markdown toc tool for GitHub Article", - "version": "0.0.1", - "content_scripts": //用于配置注入页面中的脚本 - [ + "manifest_version": 2, + "name": "GitHub-Markdown-TOC", + "description": "a markdown toc tool for GitHub Article", + "version": "0.0.1", + "content_scripts": [ { - //"matches": ["http://*/*", "https://*/*"], - // "" 表示匹配所有地址 - "matches": [""], - // 多个JS按顺序注入 - "js": [ "js/content-script.js"], - "css":["css/content.css"], - // JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式 - // 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle + "matches": [ + "" + ], + "js": [ + "js/content-script.js" + ], + "css": [ + "css/content.css" + ], "run_at": "document_start" } ], - "background":{// 运行在chrome环境中的 - "script":["js/background.js"] + "background": { + "script": [ + "js/background.js" + ] }, - "browser_action": { - "default_icon": "img/logo.ico", // https://www.easyicon.net/1201150-menu_icon.html - "default_popup": "popup.html" - } + "browser_action": { + "default_icon": "img/logo.png", + "default_popup": "popup.html" + }, + "permissions": [ + "contextMenus", + "tabs", + "notifications", + "webRequest", + "webRequestBlocking", + "storage", + "http://*/*", + "https://*/*" + ] } \ No newline at end of file diff --git a/markdown-toc-code/manifest_back2.json b/markdown-toc-code/manifest_back2.json new file mode 100644 index 0000000..edf8c85 --- /dev/null +++ b/markdown-toc-code/manifest_back2.json @@ -0,0 +1,28 @@ +{ + "manifest_version": 2, + + "name": "GitHub-Markdown-TOC", + "description": "a markdown toc tool for GitHub Article", + "version": "0.0.1", + "content_scripts": //用于配置注入页面中的脚本 + [ + { + //"matches": ["http://*/*", "https://*/*"], + // "" 表示匹配所有地址 + "matches": [""], + // 多个JS按顺序注入 + "js": [ "js/content-script.js"], + "css":["css/content.css"], + // JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式 + // 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle + "run_at": "document_start" + } + ], + "background":{// 运行在chrome环境中的 + "script":["js/background.js"] + }, + "browser_action": { + "default_icon": "img/logo.png", // https://www.easyicon.net/1201150-menu_icon.html + "default_popup": "popup.html" + } +} \ No newline at end of file diff --git a/markdown-toc-code/markdown-toc-code.crx b/markdown-toc-code/markdown-toc-code.crx new file mode 100644 index 0000000..184b0bf Binary files /dev/null and b/markdown-toc-code/markdown-toc-code.crx differ diff --git a/markdown-toc-code/markdown-toc-code.zip b/markdown-toc-code/markdown-toc-code.zip new file mode 100644 index 0000000..1281bd7 Binary files /dev/null and b/markdown-toc-code/markdown-toc-code.zip differ diff --git a/markdown-toc-code/popup.html b/markdown-toc-code/popup.html index 2f4c1a3..54467ea 100644 --- a/markdown-toc-code/popup.html +++ b/markdown-toc-code/popup.html @@ -7,8 +7,16 @@
-

GitHub-Markdown-TOC

-

v0.0.1

+

GitHub-Markdown-TOC v0.0.2

+

GitHub Issue: suggestion about us

+

Author: + frank-lam, + dxiaoqi, + dzeze +
Email: frank_lin@whu.edu.cn

+

from 2018/12/8

- \ No newline at end of file + + +