Feishu Doc Markdown Scraper

⚡功能:以Markdown格式复制文档内容; ⚡使用方法:点击[准备复制],然后等自动滑动到底部后,点击[复制]即可; ⚡因为飞书文档本身不支持导出Markdown,所以做了本插件,调试时发现飞书的文档加载是随着页面滚动而动态加载的,所以最终只能这么实现了。。

当前为 2024-06-05 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Feishu Doc Markdown Scraper
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.1.0
  5. // @description ⚡功能:以Markdown格式复制文档内容; ⚡使用方法:点击[准备复制],然后等自动滑动到底部后,点击[复制]即可; ⚡因为飞书文档本身不支持导出Markdown,所以做了本插件,调试时发现飞书的文档加载是随着页面滚动而动态加载的,所以最终只能这么实现了。。
  6. // @author Yearly
  7. // @match *://*.feishu.cn/docx/*
  8. // @match *://*.feishu.cn/wiki/*
  9. // @license AGPL-v3.0
  10. // @grant GM_setClipboard
  11. // @grant GM_addStyle
  12. // ==/UserScript==
  13.  
  14. (function() {
  15. 'use strict';
  16.  
  17. function convertToMarkdown(html) {
  18. // 首先使用正则表达式进行简单的标签替换
  19. let markdown = html
  20. .replace(/<b>(.*?)<\/b>/gi, '**$1**')
  21. .replace(/<i>(.*?)<\/i>/gi, '*$1*')
  22. .replace(/<strong>(.*?)<\/strong>/gi, '**$1**')
  23. .replace(/<em>(.*?)<\/em>/gi, '*$1*')
  24. .replace(/<h1.*?>(.*?)<\/h1>/gi, '# $1\n')
  25. .replace(/<h2.*?>(.*?)<\/h2>/gi, '## $1\n')
  26. .replace(/<h3.*?>(.*?)<\/h3>/gi, '### $1\n')
  27. .replace(/<h4.*?>(.*?)<\/h3>/gi, '#### $1\n')
  28. .replace(/<h5.*?>(.*?)<\/h3>/gi, '##### $1\n')
  29. .replace(/<p>(.*?)<\/p>/gi, '$1\n\n')
  30. .replace(/<br\s*\/?>/gi, '\n')
  31. .replace(/<a href="(.*?)">(.*?)<\/a>/gi, '[$2]($1)')
  32. .replace(/<code>(.*?)<\/code>/gi, '`$1`');
  33.  
  34. // 使用DOM解析处理更复杂的标签和结构
  35. const parser = new DOMParser();
  36. const doc = parser.parseFromString(markdown, 'text/html');
  37.  
  38. // 处理列表嵌套
  39. function countParents(node) {
  40. let depth = 0;
  41. while (node.parentNode) {
  42. node = node.parentNode;
  43.  
  44. if(node.tagName){
  45. if (node.tagName.toUpperCase() === 'UL' || node.tagName.toUpperCase() === 'OL') {
  46. depth++;
  47. }
  48. }
  49. }
  50. return depth;
  51. }
  52. // 处理列表
  53. function processList(element) {
  54. let md = '';
  55. let depth = countParents(element);
  56. let index = null;
  57. if (element.tagName.toUpperCase() === 'OL'){
  58. index = 1;
  59. }
  60. element.childNodes.forEach(node => {
  61. if (node.tagName && node.tagName.toLowerCase() === 'li') {
  62. if(index != null) {
  63. md += '<span> </span>'.repeat(depth*2) + `${index++}\. ${node.textContent.trim()}\n`;
  64. } else {
  65. md += '<span> </span>'.repeat(depth*2) + `- ${node.textContent.trim()}\n`;
  66. }
  67. }
  68. });
  69. return md;
  70. }
  71. let listsArray = Array.from( doc.querySelectorAll('ol, ul'));
  72. listsArray.reverse();
  73. listsArray.forEach(list => {
  74. list.outerHTML = processList(list);
  75. });
  76.  
  77. // heading 处理
  78. doc.querySelectorAll('div.heading').forEach(multifile => {
  79. if ( multifile.classList.contains("heading-h1") ) {
  80. multifile.innerHTML = `\n\n# ${multifile.textContent}\n`;
  81. } else if (multifile.classList.contains("heading-h2")) {
  82. multifile.innerHTML = `\n\n## ${multifile.textContent}\n`;
  83. } else if (multifile.classList.contains("heading-h3")) {
  84. multifile.innerHTML = `\n\n### ${multifile.textContent}\n`;
  85. } else if (multifile.classList.contains("heading-h4")) {
  86. multifile.innerHTML = `\n\n#### ${multifile.textContent}\n`;
  87. } else if (multifile.classList.contains("heading-h5")) {
  88. multifile.innerHTML = `\n\n##### ${multifile.textContent}\n`;
  89. }
  90. });
  91.  
  92. // img处理
  93. doc.querySelectorAll("img[src]").forEach(multifile => {
  94. multifile.innerHTML = `\n![image](${multifile.src})\n`
  95. });
  96.  
  97. // 文件框处理
  98. doc.querySelectorAll("div.chat-uikit-multi-modal-file-image-content").forEach(multifile => {
  99. multifile.innerHTML = multifile.innerHTML
  100. .replace(/<span class="chat-uikit-file-card__info__size">(.*?)<\/span>/gi, '\n$1');
  101. multifile.innerHTML = `\n\`\`\`file\n${multifile.textContent}\n\`\`\`\n`;
  102. });
  103.  
  104. // 处理代码块
  105. doc.querySelectorAll("div[class^=code-block] > div[class^=code-area]").forEach(codearea => {
  106. let header = codearea.querySelector("div[class^=header]");
  107. let language = header.textContent;
  108. header.remove();
  109. codearea.outerHTML = `\n\`\`\`${language}\n${codearea.textContent}\n\`\`\`\n`;
  110. });
  111.  
  112. // 获取最终Markdown文本
  113. markdown = doc.body.innerText ||doc.body.textContent;
  114.  
  115. return markdown.replaceAll(":", "\\:");;
  116. }
  117.  
  118.  
  119. // 等待目标DIV加载完成
  120. function waitForElement(selector, callback) {
  121. const observer = new MutationObserver(() => {
  122. const element = document.querySelector(selector);
  123. if (element) {
  124. observer.disconnect();
  125. callback(element);
  126. }
  127. });
  128. observer.observe(document.body, { childList: true, subtree: true });
  129. }
  130.  
  131. // 初始化数据
  132. const dataBlocks = new Map();
  133. let isScrolling = false;
  134.  
  135. // 获取所有的 data-block-id 元素并存储其内容
  136. function scrapeDataBlocks() {
  137. const blocks = document.querySelectorAll('#docx > div div[data-block-id]');
  138. blocks.forEach(block => {
  139. const id = block.getAttribute('data-block-id');
  140. if (!dataBlocks.has(id)) {
  141.  
  142. const type = block.getAttribute('data-block-type');
  143. // dataBlocks.set(id, block.innerHTML);
  144. // dataBlocks.set(id, block.innerText);
  145. if(type == "page") {
  146. dataBlocks.set(id, convertToMarkdown(block.querySelector('div.page-block-content').innerHTML));
  147. } else if (type != "back_ref_list") {
  148. dataBlocks.set(id, convertToMarkdown(block.innerHTML)) ;
  149. }
  150. //console.log( "add:" + id);
  151. }
  152. });
  153. }
  154.  
  155. // 滚动页面并获取所有的 data-block-id 元素
  156. function scrollAndScrape(container) {
  157. if (isScrolling) return;
  158. isScrolling = true;
  159. let currentY = 0;
  160. let percent = 0;
  161.  
  162. function scroll() {
  163. currentY += container.clientHeight / 3;
  164. container.scrollTo({
  165. top: currentY,
  166. behavior: "smooth",
  167. duration: 333,
  168. });
  169.  
  170. let curPercent = (currentY + container.clientHeight) / container.scrollHeight;
  171. curPercent = (Math.min(1, curPercent * curPercent) * 100);
  172. percent = Math.max((curPercent + percent)/2, percent)
  173. //console.log( container.scrollTop.toFixed() +"+"+ container.clientHeight.toFixed() +" vs "+ container.scrollHeight.toFixed() + ", "+ percent.toFixed(1) + "%" );
  174. document.querySelector('button#scrollCopyButton').textContent = '请勿操作, 正在扫描内容: ' + percent.toFixed(1) + "%";
  175. document.querySelector('button#scrollCopyButton').disabled = true;
  176. document.querySelector('button#scrollCopyButton').style.cursor="not-allowed";
  177. }
  178.  
  179. function scrollData() {
  180. scrapeDataBlocks();
  181. console.log( 'scrollIn '+ container.scrollTop.toFixed() );
  182. if (Math.max(container.scrollTop,currentY) + container.clientHeight >= container.scrollHeight) {
  183. isScrolling = true;
  184. createCopyButton(true);
  185.  
  186. console.log(dataBlocks);
  187. return;
  188. }
  189. scroll();
  190. setTimeout(scroll, 500);
  191. setTimeout(scroll, 1000);
  192. setTimeout(scrollData, 1600);// 控制滚动速度,防止太快导致页面未加载完
  193. }
  194. setTimeout(scrollData, 500);;
  195. }
  196.  
  197. // 点击开始扫描事件
  198. function SyncListener() {
  199. console.log("click sync");
  200. scrollAndScrape(document.querySelector('#docx > div'));
  201. }
  202.  
  203. // 点击复制事件
  204. function CopyListener() {
  205. console.log("click copy");
  206. const allContent = Array.from(dataBlocks.entries())
  207. .sort((a, b) => a[0] - b[0])
  208. .map(entry => entry[1])
  209. .join('\n');
  210. GM_setClipboard(allContent);
  211. alert('内容已复制到剪贴板');
  212. }
  213.  
  214. // 创建复制按钮
  215. function createCopyButton(mode=false) {
  216. let button = document.querySelector('button#scrollCopyButton');
  217. const md_icon = '<svg xmlns="http://www.w3.org/2000/svg" style="height:15px; padding-right:5px; fill:#fff; display:inline;" viewBox="0 0 640 512"><path d="M593.8 59.1H46.2C20.7 59.1 0 79.8 0 105.2v301.5c0 25.5 20.7 46.2 46.2 46.2h547.7c25.5 0 46.2-20.7 46.1-46.1V105.2c0-25.4-20.7-46.1-46.2-46.1zM338.5 360.6H277v-120l-61.5 76.9-61.5-76.9v120H92.3V151.4h61.5l61.5 76.9 61.5-76.9h61.5v209.2zm135.3 3.1L381.5 256H443V151.4h61.5V256H566z"/></svg>'
  218.  
  219. if(!button) {
  220. button = document.createElement('button');
  221. button.id = 'scrollCopyButton';
  222. button.innerHTML = md_icon + '准备复制';
  223. document.body.appendChild(button);
  224.  
  225. GM_addStyle(`
  226. #scrollCopyButton {
  227. position: fixed;
  228. top: 15px;
  229. right: 40%;
  230. padding: 7px 20px;
  231. font-size: 16px;
  232. background: #007bff;
  233. color: white;
  234. border: none;
  235. border-radius: 5px;
  236. cursor: pointer;
  237. z-index: 1000;
  238. display: flex;
  239. place-items: center;
  240. }
  241. #scrollCopyButton:hover {
  242. background: #0056b3;
  243. }
  244. `);
  245.  
  246. button.addEventListener('click', SyncListener);
  247. }
  248.  
  249. if(!mode) {
  250. return;
  251. }
  252.  
  253. button.disabled = false;
  254. button.style.cursor="pointer";
  255. button.innerHTML = md_icon + '复制';
  256.  
  257. button.removeEventListener('click', SyncListener);
  258. button.addEventListener('click', CopyListener);
  259.  
  260. }
  261.  
  262. // 主函数
  263. waitForElement('#docx > div', (container) => {
  264. createCopyButton(false);
  265. });
  266.  
  267. })();