見たページ全部GyazoるUserScript

save_all_page_to_gyazo.user.js

// ==UserScript==
// @name         Save All Page to Gyazo
// @namespace    http://ssig33.com
// @version      1.0
// @author       You
// @match        http://*/*
// @match        https://*/*
// @exclude      https://*.youtube.com/
// @exclude      https://youtube.com/
// @exclude      https://mail.google.com/*
// @exclude      https://b.hatena.ne.jp/*
// @exclude      https://*.gyazo.com/*
// @exclude      https://gyazo.com/*
// @exclude      https://localhost*
// @grant        GM_xmlhttpRequest
// @connect      gyazo.com
// @connect      upload.gyazo.com
// @noframes
// @require https://html2canvas.hertzen.com/dist/html2canvas.min.js
// ==/UserScript==

/**
 * HTML DOMを指定されたらcanvasでレンダリングしてdata urlに変化する
 * @param {DOMElement} dom
 * @param {function} callback
 */
const convertDomToCanvasToDataUrl = (dom, callback) => {
  html2canvas(dom).then((canvas) => {
    const canvasOut = document.createElement("canvas");
    const ctxOut = canvasOut.getContext("2d");
    canvasOut.width = Math.floor(canvas.width * 0.5);
    canvasOut.height = Math.floor(canvas.height * 0.5);
    ctxOut.drawImage(
      canvas,
      0,
      0,
      canvas.width,
      canvas.height,
      0,
      0,
      canvasOut.width,
      canvasOut.height
    );
    const imageDataUrl = canvasOut.toDataURL("image/jpeg", "0.5");
    callback(imageDataUrl);
  });
};

/**
 * Gyazo easy_auth APIでのuploadをする
 * https://gyazo.com/api/docs/image#easy_auth
 * @param {string} imageDataUrl 画像をbase64 encodeしたdata url
 * @param {string} refererUrl 画像のメタデータURL
 * @param {string} title 画像のメタデータタイトル
 */
const uploadToGyazoEasyAuth = (imageDataUrl, refererUrl, title) => {
  const formData = new FormData();
  formData.append("image_url", imageDataUrl);
  formData.append("client_id", "p2ITPPSD6YOugx26RVwYTyeDPPYWEhQNBqrNihCJKIg");
  formData.append("referer_url", refererUrl);
  formData.append("title", title);
  // easy_auth APIでの画像アップロード後に、
  // レスポンスで指定されたURLにGETアクセスすることで、
  // アップロードした画像がブラウザでログイン中のGyazoアカウントに結びつく
  const onload = (res) => {
    if (res.status === 200) {
      const data = JSON.parse(res.responseText);
      GM_xmlhttpRequest({
        method: "GET",
        url: data.get_image_url,
        onload: (res) => {
          console.log(res.status);
          console.log(res.finalUrl);
        },
      });
    }
  };
  // easy_auth APIのエンドポイントにPOST
  GM_xmlhttpRequest({
    method: "POST",
    url: "https://upload.gyazo.com/api/upload/easy_auth",
    data: formData,
    onload,
  });
};

window.saveAllPageToGyazoFinish = false;
window.saveAllPageToGyazoInterval = false;
window.saveAllPageToGyazoScrolled = false;

const savePageToGyazo = () => {
  // まだGyazoっていない
  // N秒経過した
  // 少しでもスクロールした
  if (
    !window.saveAllPageToGyazoFinish &&
    window.saveAllPageToGyazoInterval &&
    window.saveAllPageToGyazoScrolled
  ) {
    convertDomToCanvasToDataUrl(
      document.querySelector("body"),
      (imageDataUrl) => {
        const title = document.querySelector("title").textContent || "";
        uploadToGyazoEasyAuth(imageDataUrl, location.href, title);
      }
    );
    window.saveAllPageToGyazoFinish = true;
  }
};

// titleタグがある場合だけ発動する
if (!!document.querySelector("title")) {
  // N秒以上開いていたときだけ発動する
  setTimeout(() => {
    console.log("60s");
    window.saveAllPageToGyazoInterval = true;
    savePageToGyazo();
  }, 30000);
  // スクロールされたとき一度だけ発動する
  window.addEventListener(
    "scroll",
    () => {
      if (window.pageYOffset > 0) {
        console.log("scrolled");
        window.saveAllPageToGyazoScrolled = true;
        savePageToGyazo();
      }
    },
    true
  );
}