ブラウザで見たページにOGP画像があったら全部GyazoるUserScript

save_all_ogp_to_gyazo.user.js

// ==UserScript==
// MEMO: See https://www.tampermonkey.net/documentation.php
//
// @name         Save All OGP to Gyazo
// @namespace    http://yuiseki.net
// @version      1.0
// @author       You
//
// MEMO: 発動するURLの条件
// @match        http://*/*
// @match        https://*/*
//
// MEMO: 除外するURLの条件
// @exclude      https://*.gyazo.com/*
// @exclude      https://gyazo.com/*
//
// MEMO: 許可してもらう必要のあるGM_*系関数
// @grant        GM_xmlhttpRequest
//
// MEMO: GM_xmlhttpRequestにアクセスを許可するドメインの一覧
// MEMO: 画像URLをbase64 data urlに変換するためには、
// MEMO: その画像URLをGM_xmlhttpRequestで取得する必要があるので、
// MEMO: あらゆるドメインとの通信を許可してもらう必要がある
// @connect      gyazo.com
// @connect      upload.gyazo.com
// @connect      *
// @noframes
// ==/UserScript==

/**
 * 画像のURLを指定されたらbase64 encodeされたdata urlに変換する
 * @param {string} imageUrl data urlに変換したい画像のURL
 * @param {function} callback
 */
const convertImageUrlToDataUrl = (imageUrl, callback) => {
  GM_xmlhttpRequest({
    method: "GET",
    responseType: "blob",
    url: imageUrl,
    onload: (res) => {
      const { response: blob } = res;
      const reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onloadend = function () {
        const base64data = reader.result;
        callback(base64data);
      };
    },
    withCredentials: true,
  });
};

/**
 * 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,
  });
};

// metaタグにog:imageがある場合だけ発動する
if (!!document.querySelector("meta[property='og:image']")) {
  setTimeout(() => {
    // Webサイト名
    const siteName =
      document
        .querySelector("meta[property='og:site_name']")
        ?.getAttribute("content") || null;
    // Webページのタイトル
    const pageTitle =
      document
        .querySelector("meta[property='og:title']")
        ?.getAttribute("content") || "";
    // OGP画像
    const imageUrl = document
      .querySelector("meta[property='og:image']")
      .getAttribute("content");
    // OGP画像をdata urlに変換する
    convertImageUrlToDataUrl(imageUrl, (imageDataUrl) => {
      console.log("imageDataUrl: ", imageDataUrl.length);
      let title = pageTitle;
      if (siteName) {
        title += " - " + siteName;
      }
      uploadToGyazoEasyAuth(imageDataUrl, location.href, title);
    });
  }, 2000);
}