grok生成のカスタムcss ポップアップ付き

javascript:(function() {
  // ポップアップウィンドウの作成
  var popup = document.createElement("div");
  popup.style.cssText = "position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:20px;border:1px solid #ccc;z-index:10000;";
  var input = document.createElement("input");
  input.type = "text";
  input.placeholder = "画像URLを入力してください";
  input.style.cssText = "width:100%;margin-bottom:10px;";
  var button = document.createElement("button");
  button.textContent = "変換";
  button.style.cssText = "width:100%;";

  // ボタンクリック時の処理
  button.onclick = function() {
    var imgUrl = input.value.trim();
    if (!imgUrl) {
      alert("URLを入力してください！");
      return;
    }
    document.body.removeChild(popup); // ポップアップを閉じる

    // 画像の読み込みと処理
    var img = new Image();
    img.crossOrigin = "anonymous"; // CORS対応
    img.onload = function() {
      var canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0);

      // カスタムCSSを適用
      var styledImg = document.createElement("img");
      styledImg.src = canvas.toDataURL("image/png");
      styledImg.style.cssText = "filter: grayscale(100%); border: 5px solid red; max-width: 500px;";
      document.body.appendChild(styledImg);
    };
    img.onerror = function() {
      alert("画像の読み込みに失敗しました。CORS制限やURLの誤りかもしれません。");
    };
    img.src = imgUrl; // 直接URLを指定
  };

  // ポップアップに要素を追加して表示
  popup.appendChild(input);
  popup.appendChild(button);
  document.body.appendChild(popup);
  input.focus();
})();