公众号阅读助手

微信公众号文章菜单选项,展示一些有用的选项

  1. // ==UserScript==
  2. // @name Wechat Article Menu
  3. // @name:zh-CN 公众号阅读助手
  4. // @description Wechat Article Menu, Show Some Useful Options
  5. // @description:zh-CN 微信公众号文章菜单选项,展示一些有用的选项
  6. // @namespace https://www.runningcheese.com
  7. // @version 1.6
  8. // @author RunningCheese
  9. // @match https://mp.weixin.qq.com/s/*
  10. // @match https://mp.weixin.qq.com/s?*
  11. // @run-at document-start
  12. // @icon https://t1.gstatic.cn/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://mp.weixin.qq.com
  13. // @license MIT
  14. // ==/UserScript==
  15.  
  16.  
  17. (function() {
  18. 'use strict';
  19.  
  20. // 小书签代码开始
  21. (function() {
  22. 'use strict';
  23.  
  24. // 创建浮动窗口
  25. const panel = document.createElement('div');
  26. panel.id = 'wx-reader-panel';
  27. panel.style.cssText = 'position:fixed;top:12%;left:20%;background:#fff;border:none;border-radius:8px;padding:4px;width:200px;box-shadow:0 4px 12px rgba(0,0,0,0.25);z-index:999999;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;display:none;';
  28.  
  29. // 增强样式隔离性
  30. const styleElement = document.createElement('style');
  31. styleElement.textContent = `
  32. .wx-reader-icon {
  33. cursor: pointer;
  34. margin-left: 5px;
  35. vertical-align: middle;
  36. opacity: 0.7;
  37. transition: opacity 0.2s;
  38. display: inline-flex;
  39. align-items: center;
  40. }
  41. .wx-reader-icon:hover {
  42. opacity: 1;
  43. }
  44. `;
  45. document.head.appendChild(styleElement);
  46.  
  47. // 创建工具图标
  48. function createToolIcon() {
  49. const icon = document.createElement('span');
  50. icon.className = 'wx-reader-icon';
  51. icon.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  52. <defs>
  53. <linearGradient id="toolGradient" x1="0%" y1="0%" x2="100%" y2="100%">
  54. <stop offset="0%" stop-color="#1E88E5" />
  55. <stop offset="100%" stop-color="#1565C0" />
  56. </linearGradient>
  57. </defs>
  58. <rect x="2" y="2" width="20" height="20" rx="4" ry="4" fill="url(#toolGradient)"/>
  59. <path d="M6 9h12v1.5H6V9zm0 3h12v1.5H6V12zm0 3h12v1.5H6V15z" fill="white"/>
  60. </svg>`;
  61. icon.title = "微信阅读助手";
  62.  
  63. icon.addEventListener('click', function(e) {
  64. e.stopPropagation();
  65. panel.style.display = 'block';
  66.  
  67. // 调整面板位置到图标附近
  68. const rect = icon.getBoundingClientRect();
  69. panel.style.top = (rect.bottom + window.scrollY + 10) + 'px';
  70. panel.style.left = (rect.left + window.scrollX - 100) + 'px';
  71. });
  72.  
  73. return icon;
  74. }
  75.  
  76. // 添加图标到页面
  77. function addToolIcon() {
  78. // 微信公众号文章页面的选择器
  79. const selectors = ['#js_ip_wording', '#publish_time', '#js_author_name', '.rich_media_meta_list'];
  80.  
  81. let targetElement = null;
  82.  
  83. // 查找合适的元素放置图标
  84. for (const selector of selectors) {
  85. const element = document.querySelector(selector);
  86. if (element) {
  87. targetElement = element;
  88. break;
  89. }
  90. }
  91.  
  92. // 如果找到目标元素,添加图标
  93. if (targetElement && !targetElement.querySelector('.wx-reader-icon')) {
  94. const icon = createToolIcon();
  95. targetElement.appendChild(icon);
  96. }
  97. }
  98.  
  99. // 创建标题栏
  100. const titleBar = document.createElement('div');
  101. titleBar.style.cssText = 'display:flex;justify-content:space-between;align-items:center;padding:4px 10px;font-size:14px;color:#333;border-bottom:1px solid #eee;margin-bottom:2px;cursor:move;border-radius:8px 8px 0 0;';
  102.  
  103. // 创建标题文本
  104. const titleText = document.createElement('span');
  105. titleText.textContent = '▼ 微信阅读助手';
  106. titleText.style.cssText = 'flex:1;';
  107. titleBar.appendChild(titleText);
  108.  
  109. // 创建关闭按钮
  110. const closeBtn = document.createElement('span');
  111. closeBtn.textContent = '×';
  112. closeBtn.style.cssText = 'cursor:pointer;color:#999;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all 0.2s ease;margin-left:10px;';
  113.  
  114. closeBtn.addEventListener('mouseover', () => closeBtn.style.backgroundColor = '#dadada');
  115. closeBtn.addEventListener('mouseout', () => closeBtn.style.backgroundColor = '');
  116. closeBtn.addEventListener('click', (e) => {
  117. e.stopPropagation();
  118. panel.style.display = 'none';
  119. });
  120.  
  121. titleBar.appendChild(closeBtn);
  122.  
  123. // 拖动相关变量和事件
  124. let startX = 0, startY = 0, startLeft = 0, startTop = 0, isDragging = false;
  125.  
  126. titleBar.addEventListener('mousedown', function(e) {
  127. if (e.target === closeBtn) return;
  128. isDragging = true;
  129. startX = e.clientX;
  130. startY = e.clientY;
  131. startLeft = parseInt(window.getComputedStyle(panel).left);
  132. startTop = parseInt(window.getComputedStyle(panel).top);
  133. e.preventDefault();
  134. });
  135.  
  136. function mouseMoveHandler(e) {
  137. if (!isDragging) return;
  138. const deltaX = e.clientX - startX;
  139. const deltaY = e.clientY - startY;
  140. panel.style.left = (startLeft + deltaX) + 'px';
  141. panel.style.top = (startTop + deltaY) + 'px';
  142. }
  143.  
  144. function mouseUpHandler() {
  145. isDragging = false;
  146. }
  147.  
  148. document.addEventListener('mousemove', mouseMoveHandler);
  149. document.addEventListener('mouseup', mouseUpHandler);
  150.  
  151. // 双击Esc关闭窗口
  152. let lastEscTime = 0;
  153. document.addEventListener('keydown', function(evt) {
  154. if (evt.key === 'Escape') {
  155. const now = Date.now();
  156. if (now - lastEscTime <= 300) {
  157. panel.style.display = 'none';
  158. }
  159. lastEscTime = now;
  160. }
  161. });
  162.  
  163. // 功能菜单项
  164. const menuItems = [
  165. {title: '1、原始链接', code: 'prompt(\'原始链接:\', \'https://mp.weixin.qq.com/s?__biz=\'+biz+\'&idx=1&mid=\'+mid+\'&sn=\'+sn)'},
  166. {title: '2、文章摘要', code: 'summary = document.querySelector(\'meta[name="description"]\').content; prompt(\'文章摘要:\',summary)'},
  167. {title: '3、文章封面', code: 'const cover = document.querySelector(\'meta[property="twitter:image"]\').content; window.open(cover, "_blank");'},
  168. {title: '4、历史消息链接', code: 'prompt(\'历史消息链接:\',\'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=\'+biz+\'#wechat_redirect\')'},
  169. {title: '5、查看所有图片', code: 'const images = Array.from(document.querySelectorAll("img")).filter(img => (img.src || img.dataset.src) && !(img.src && img.src.startsWith("data:image/svg+xml")) && !(img.dataset.src && img.dataset.src.startsWith("data:image/svg+xml"))); if(images.length === 0) { alert("未找到图片"); return; } const win = window.open("", "_blank"); win.document.write("<html><head><title>网页所有图片</title><style>body{margin:20px auto;font-family:sans-serif;max-width:700px;}img{max-width:100%;margin:10px 0;border:1px solid #eee;padding:5px;}</style></head><body><h2>网页所有图片("+images.length+"张)</h2>"); images.forEach((img, i) => { const src = img.src || img.dataset.src; win.document.write(`<p>${i+1}.</p><img src="${src}" />`); }); win.document.write("</body></html>"); win.document.close();'}
  170. ];
  171.  
  172. // 创建菜单项
  173. menuItems.forEach((item) => {
  174. const menuItem = document.createElement('div');
  175. menuItem.style.cssText = 'cursor:pointer;padding:4px 10px;transition:all 0.2s ease;border-radius:6px;font-size:14px;color:#333;display:flex;align-items:center';
  176. menuItem.textContent = item.title;
  177.  
  178. menuItem.onmouseover = () => menuItem.style.backgroundColor = '#dadada';
  179. menuItem.onmouseout = () => menuItem.style.backgroundColor = '';
  180.  
  181. if (item.code) {
  182. menuItem.onclick = (e) => {
  183. e.preventDefault();
  184. try {
  185. const func = new Function(`return (function(){${item.code}})();`);
  186. func();
  187. } catch (err) {
  188. console.error('执行代码时出错:', err);
  189. }
  190. };
  191. }
  192.  
  193. panel.appendChild(menuItem);
  194. });
  195.  
  196. // 添加到页面 - 将标题栏放在最上面
  197. panel.insertBefore(titleBar, panel.firstChild);
  198. document.body.appendChild(panel);
  199.  
  200. // 添加点击页面其他区域关闭面板
  201. document.addEventListener('click', function(e) {
  202. if (!panel.contains(e.target) && !e.target.classList.contains('wx-reader-icon')) {
  203. panel.style.display = 'none';
  204. }
  205. });
  206.  
  207. // 添加工具图标
  208. setTimeout(addToolIcon, 1000);
  209.  
  210. // 监听DOM变化,确保在动态加载的页面上也能添加图标
  211. const observer = new MutationObserver(function(mutations) {
  212. mutations.forEach(function(mutation) {
  213. if (mutation.addedNodes.length > 0) {
  214. setTimeout(addToolIcon, 500);
  215. }
  216. });
  217. });
  218.  
  219. observer.observe(document.body, { childList: true, subtree: true });
  220. })();
  221. // 小书签代码结束
  222. })();