☰

zhihuPostCopy

zhihu Post Copy

// ==UserScript==
// @name         zhihuPostCopy
// @namespace    http://tampermonkey.net/
// @version      2024-08-04
// @description  zhihu Post Copy
// @author       You
// @match        https://zhuanlan.zhihu.com/write
// @match        https://zhuanlan.zhihu.com/p/*
// @match        https://baijiahao.baidu.com/builder/rc/edit*
// @match        https://creator.xiaohongshu.com/publish/publish
// @match        https://cp.11467.com/home/personal/news_add.html
// @match        https://cp.11467.com/home/personal/product_add.html
// @match        https://member.bilibili.com/platform/upload/text/edit
// @match        https://member.bilibili.com/article-text/home*
// @match        https://mp.sohu.com/mpfe/v4/contentManagement/news/addarticle*
// @match        http://mp.163.com/subscribe_v4/index.html#/article-publish
// @icon         https://www.google.com/s2/favicons?sz=64&domain=zhihu.com
// @grant GM.setValue
// @grant GM.getValue
// @license MIT
// ==/UserScript==

(function() {
    'use strict';


// article-copy.tsx
var tips = function(msg) {
  document.querySelectorAll(".article-tips-span").forEach((span2) => {
    span2.remove();
  });
  const span = document.createElement("span");
  span.textContent = msg;
  span.className = "article-tips-span";
  span.style.cssText = `position: fixed;width: fit-content;padding: 0.5em 1em;background: #000;box-shadow: 0 6px 12px -6px #222;border-radius: 6px;left: 0;right: 0;top: 20vh;margin: auto;color: #fff;z-index: 99;font-size: 13px;`;
  setTimeout(() => {
    span.remove();
  }, 3000);
  document.body.appendChild(span);
};
var fetchArticle = function() {
  const url = /^https:\/\/zhuanlan.zhihu.com\/p\/\d+$/;
  const { href } = window.location;
  if (!url.test(href)) {
    return;
  }
  const title = document.title.split(/\s+/).filter((s) => s.trim())[0] || "";
  const h1 = document.querySelector("h1")?.innerText.trim();
  const realy_title = title || h1 || "";
  const container = document.querySelector(".Post-RichTextContainer .RichText");
  const content = container?.innerHTML || "";
  const data = { title: realy_title, content };
  document.querySelectorAll(".article-copy").forEach((e) => {
    e.remove();
  });
  const div = document.createElement("div");
  div.className = "article-copy";
  div.style.cssText = "position:fixed;top:3em;right:2em;border-radius:6px;z-index:999;background:#222;color:#fff;cursor:pointer;padding:0.5em 1em;box-shadow:0 6px 12px -6px #222;";
  div.textContent = "\u590D\u5236\u6587\u7AE0";
  div.addEventListener("click", () => {
    globalThis.GM.setValue("ARTICLE_CACHE", JSON.stringify(data));
    tips("\u590D\u5236\u5B8C\u6210");
  });
  document.body.appendChild(div);
};
var entry = function(data) {
  const url = /^https:\/\/zhuanlan.zhihu.com\/p\/\d+$/;
  const { href } = window.location;
  if (url.test(href)) {
    return;
  }
  if (!data) {
    return;
  }

  class WebComponentExt extends HTMLElement {
    constructor() {
      super(...arguments);
    }
    html_content(html) {
      const doc = new DOMParser().parseFromString(`<html><body>${html}</body></html>`, "text/html");
      const text = doc.body.innerText;
      return text;
    }
    html_images(html) {
      const container = document.createElement("div");
      container.innerHTML = html;
      const images = [];
      container.querySelectorAll("img").forEach((img) => {
        const src = img.getAttribute("src");
        const original = img.getAttribute("data-original");
        if (original && original.startsWith("http")) {
          images.push(original);
        } else if (src && src.startsWith("http")) {
          images.push(src);
        }
      });
      return images;
    }
    copy_image(e) {
      const src = e.getAttribute("src");
      if (src) {
        this.imgToBlob(src).then((blob) => {
          navigator.clipboard.writeText(src);
          const buff = new ClipboardItem({
            "image/png": blob
          });
          navigator.clipboard.write([buff]).then(() => {
            tips("\u590D\u5236\u6210\u529F");
          });
        });
      }
    }
    copy(text, html) {
      this.async_copy(text, html).then(() => {
        tips("\u590D\u5236\u6210\u529F");
      });
    }
    insert(item) {
      this.insert_xiaohongshu(item);
      this.insert_baijiahao(item);
    }
    insert_xiaohongshu(item) {
      if (!/xiaohongshu\.com/.test(window.location.hostname)) {
        return;
      }
      if (!window.location.pathname.endsWith("/publish/publish")) {
        return;
      }
      const title = document.querySelector(".titleInput input");
      if (!title) {
        return;
      }
      this.setNativeValue(title, item.title);
      this.fireInputEvent(title);
      const content = document.querySelector("#post-textarea");
      const text = this.html_content(item.content);
      const html = text.replace(/\n{2}/g, "\n").replace(/\n{3,}/g, "\n\n").replace(/\n/g, "<br>");
      if (content) {
        content.innerHTML = html;
        this.fireInputEvent(content);
      }
    }
    insert_baijiahao(item) {
      if (!/baidu\.com/.test(window.location.hostname)) {
        return;
      }
      if (!window.location.pathname.endsWith("/builder/rc/edit")) {
        return;
      }
      const title = document.querySelector(".client_pages_edit_components_titleInput textarea");
      if (!title) {
        console.log("title input not found");
        return;
      }
      this.setNativeValue(title, item.title);
      this.fireInputEvent(title);
    }
    insert_bilibili(item) {
      const url2 = "https://member.bilibili.com//article-text/home";
      if (!window.location.href.startsWith(url2)) {
        return;
      }
      const title = document.querySelector(".bre-title-input textarea");
      if (!title) {
        return;
      }
      this.setNativeValue(title, item.title);
      this.fireInputEvent(title);
    }
    render_style() {
      const style = document.createElement("style");
      style.innerHTML = `
        .hidden .item, .hidden .images{
          display: none;
        }
        .item{
          display: flex;
          flex-direction: row;
          font-size: 12px;
          cursor:pointer;
        }
        .item span:first-child{
          flex: 1;
        }
        .item .copy{
          padding-left: 1em;
          color:#2c2;
        }
        .item *{
          pointer-events: none;
        }
        .images{
          align-items: center;
          padding-top: 6px;
        }
        .images span{
          padding-top: 100%;
          position: relative;
          background: #fff2;
          border-radius: 3px;
        }
        .images img{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: contain;
          transition: 0.3s all;
          cursor:pointer;
          width: 100%;
        }
        .images img:hover{
          background: #fff2;
        }
      `;
      return style;
    }
    render_images_html(images) {
      const container = document.createElement("div");
      container.className = "images";
      let columns = "";
      if (images.length === 1) {
        columns = "1fr";
      } else if (images.length === 2) {
        columns = "1fr 1fr";
      } else if (images.length === 3) {
        columns = "1fr 1fr 1fr";
      } else {
        columns = "1fr 1fr 1fr 1fr";
      }
      container.style.cssText = `display:grid;grid-template-columns:${columns};grid-gap:4px;`;
      images.forEach((url2) => {
        const span = document.createElement("span");
        span.innerHTML = `<img src="${url2}" crossOrigin="anonymous">`;
        container.appendChild(span);
      });
      return container.outerHTML;
    }
    async imgToBlob(imgUrl) {
      const img = new Image;
      img.crossOrigin = "Anonymous";
      return new Promise((resolve, reject) => {
        img.onload = () => {
          const canvas = document.createElement("canvas");
          const ctx = canvas.getContext("2d");
          canvas.width = img.width;
          canvas.height = img.height;
          ctx?.drawImage(img, 0, 0);
          canvas.toBlob((blob) => {
            if (blob) {
              resolve(blob);
            } else {
              reject("\u56FE\u7247\u8F6C\u6362\u5931\u8D25");
            }
          }, "image/png");
        };
        img.onerror = function() {
          reject("\u56FE\u7247\u52A0\u8F7D\u5931\u8D25");
        };
        img.src = imgUrl;
      });
    }
    async async_copy(text, html) {
      if (html) {
        const doc = new DOMParser().parseFromString(`<html><body>${text}</body></html>`, "text/html");
        const html2 = doc.documentElement.outerHTML;
        const plain = doc.body.innerText;
        const buff2 = new ClipboardItem({
          "text/plain": new Blob([plain], { type: "text/plain" }),
          "text/html": new Blob([html2], { type: "text/html" })
        });
        await navigator.clipboard.write([buff2]);
        return;
      }
      const buff = new ClipboardItem({
        "text/plain": new Blob([text], { type: "text/plain" })
      });
      await navigator.clipboard.write([buff]);
    }
    async load() {
      const text = await globalThis.GM.getValue("ARTICLE_CACHE", "");
      try {
        const data2 = JSON.parse(text);
        return Promise.resolve(data2);
      } catch (error) {
        return Promise.reject(error);
      }
    }
    async render(data2) {
      const { title, content } = data2;
      const images = this.html_images(content);
      const image_html = this.render_images_html(images);
      const intro = this.html_content(content).substring(0, 10);
      const container = document.createElement("div");
      container.style.cssText = "position:fixed;top:2em;right:2em;z-index:999;padding:0.5em 1em;border-radius:6px;background:#000;color:#fff";
      container.innerHTML = `<div class="item title"><span>\u6807\u9898\uFF1A${title}</span><span class="copy">\u590D\u5236</span></div><div class="item content"><span>\u6B63\u6587\uFF1A${intro}</span><span class="copy">\u590D\u5236</span></div>${image_html}`;
      container.className = "root";
      container.addEventListener("click", (e) => {
        const target = e.target;
        if (target.classList.contains("root")) {
          if (target.classList.contains("hidden")) {
            target.classList.remove("hidden");
          } else {
            target.classList.add("hidden");
          }
          return;
        }
        if (target.tagName === "IMG") {
          this.copy_image(target);
          return;
        }
        if (target.classList.contains("item")) {
          if (target.classList.contains("title")) {
            this.copy(title);
            this.insert(data2);
          } else if (target.classList.contains("content")) {
            this.copy(content, true);
          }
        }
      });
      container.appendChild(this.render_style());
      const shadow = this.attachShadow({ mode: "open" });
      shadow.appendChild(container);
    }
    setNativeValue(element2, value) {
      const { set: valueSetter } = Object.getOwnPropertyDescriptor(element2, "value") || {};
      const prototype = Object.getPrototypeOf(element2);
      const { set: prototypeValueSetter } = Object.getOwnPropertyDescriptor(prototype, "value") || {};
      if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
        prototypeValueSetter.call(element2, value);
      } else {
        if (valueSetter) {
          valueSetter.call(element2, value);
        } else {
          throw new Error("The given element does not have a value setter");
        }
      }
    }
    fireInputEvent(element2) {
      element2.dispatchEvent(new InputEvent("input", {
        bubbles: true,
        cancelable: false,
        composed: true
      }));
    }
    fireChangeEvent(element2) {
      element2.dispatchEvent(new Event("change", {
        bubbles: true,
        cancelable: false
      }));
    }
    fireClickEvent(element2) {
      element2.dispatchEvent(new MouseEvent("click", {
        bubbles: true,
        cancelable: true,
        button: 0,
        composed: true
      }));
    }
    connectedCallback() {
      this.load().then((data2) => {
        this.render(data2);
      });
    }
    disconnectedCallback() {
    }
  }
  const elements = document.querySelectorAll(".web-component-article,web-component-article");
  if (elements.length > 0) {
    elements.forEach((element2) => {
      element2.remove();
    });
  }
  const nodeName = `web-component-article-${Date.now()}`;
  customElements.define(nodeName, WebComponentExt);
  const element = document.createElement(nodeName);
  element.className = "web-component-article";
  if (window.top !== window) {
    setTimeout(() => {
        console.log("insert after 10s");
      document.body.appendChild(element);
    }, 1e4);
  } else {
    document.body.appendChild(element);
  }
};
window.addEventListener("load", () => {
  fetchArticle();
  entry("highlight");
});


    // Your code here...
})();