[油猴脚本]文章拷贝助手，文章一键拷贝到微信公众平台

「这是我参与2022首次更文挑战的第 5 天，活动详情查看：2022首次更文挑战」。

文章拷贝助手,文章一键拷贝到微信公众平台、知乎 下载 markdown

为什么要写这个脚本

最近开了个前端公众号，需要推送一些优质的文章，但由于时间的关系，原创内容太少，常规的做法是转载一些优秀的文章到自己的公众号。

流程

使用脚本流程

HTML 转 markdown

https://www.bejson.com/convert/html2markdown/

https://devtool.tech/html-md

https://github.com/mixmark-io/turndown

使用

• 第一步： 安装 chrome 油猴扩展
• 第二步： 安装文章拷贝助手

实现代码

大部分代码来自 markdown-nice

javascript 实现下载 markdown 文件， 掘金是使用 NUXT.js 来实现的 ssr， 所以 会将全部的数据保存在全局对象中 __NUXT__，

__NUXT__.state.view.column.entry.article_info.mark_content 这样就可以直接取到markdown 文件内容了，

但是有用户写文章的时候不是用 markdown 写的， 是用富文本编辑器来写的，这个时候就没有 mark_content 数据了，这个时候就要涉及到 HTML 转 markdown

我们可以使用 turndown 这个库来实现。

下载文件 js

export const downLoad = (filename, code) => {
  // 下载的文件名
  var file = new File([code], filename, {
    type: "text/markdown",
  });
  // 创建隐藏的可下载链接
  var eleLink = document.createElement("a");
  eleLink.download = filename;
  eleLink.style.display = "none";
  // 下载内容转变成blob地址
  eleLink.href = URL.createObjectURL(file);
  // 触发点击
  document.body.appendChild(eleLink);
  eleLink.click();
  // 然后移除
  document.body.removeChild(eleLink);
};

复制实现

使用剪切板 api event.clipboardData.setData() 这个是现代浏览器都支持的 api

简单示例

document.addEventListener('copy', function(e){
  e.clipboardData.setData('text/plain', 'foo');
  e.preventDefault(); // 阻止浏览器默认事件
});

通过以上代码就可以用 JavaScript 来修改剪切板的内容了，需要注意的是阻止浏览器默认事件

document.getElementById("copyBtn").onclick = function() {
  document.execCommand('copy');
}

然后需要触发复制

最终代码

export const copySafari = (text) => {
  // 获取 input
  let input = document.getElementById("copy-input");
  if (!input) {
    // input 不能用 CSS 隐藏，必须在页面内存在。
    input = document.createElement("input");
    input.id = "copy-input";
    input.style.position = "absolute";
    input.style.left = "-1000px";
    input.style.zIndex = "-1000";
    document.body.appendChild(input);
  }
  // 让 input 选中一个字符，无所谓那个字符
  input.value = "NOTHING";
  input.setSelectionRange(0, 1);
  input.focus();

  // 复制触发
  document.addEventListener("copy", function copyCall(e) {
    e.preventDefault();
    e.clipboardData.setData("text/html", text);
    e.clipboardData.setData("text/plain", text);
    document.removeEventListener("copy", copyCall);
  });
  document.execCommand("copy");
};

TODO

未来需要兼容更多平台

• [ ] 简书
• [ ] 思否
• [ ] CSDN

Github

tampermonkey-copy-helper

以上就是本文全部内容，希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。