読者です 読者をやめる 読者になる 読者になる

素人がプログラミングを勉強していたブログ

プログラミング、セキュリティ、英語、Webなどのブログ since 2008

連絡先: すかいぷ:javascripter_  か javascripter あっと tsukkun.net skypeのほうがいいです

gist.github.comから.user.cssのファイルをstylishにインストールするGreasemonkeyスクリプト(作成失敗、未完成)

gist.github.comに.user.cssのファイルを置いて、userstyles.orgの代わりにしようと思ったのだけど、Stylishのインストール機構が複雑で出来なかった。下のコードは破片。動きすらしない。

分かったことは、

  1. Stylishは、userstyles.orgのインストールボタンを押したかどうかなどのやり取りにイベントを使ってる。
  2. userstyles.org以外ではインストールできない。
  3. CSSのソースは、サイト内の要素のtextContentを取ってきている。idは決めうち。タイトルも同様。

やろうとしたことは、

  1. iframeでuserstyles.orgの一つのページを読み込み、window.postMessageでgist.github.comの.user.cssの中身を渡す。
  2. iframeで読み込まれた側のページでmessageのリスナーを登録し、呼ばれたらページ内のshow codeのtextContentなどを書き換えて、イベントを発火させる。

という感じ。
まあ、結局うまくいかなかったけど(あと少しで出来そうだけど疲れた)。

// ==UserScript==
// @name           userStyleInstaller
// @namespace      http:/d.hatena.ne.jp/javascripter/
// @include        https:/gist.github.com/*
// @include        http:/userstyles.org/styles/8631
// ==/UserScript==

var scriptUrl = "http:/userstyles.org/styles/8631";
if (location.href != scriptUrl) {
  var scriptName = document.querySelector("#files .info span");

  if (! (/\.user\.css$/.test(scriptName))) return;

  var [,actions] = document.getElementsByClassName("actions");
  var installButton = document.createElement("button");
  installButton.textContent = "install";
  actions.appendChild(installButton);

  installButton.addEventListener("click",n  function(elem) {
    var iframe = document.createElement("iframe");
    iframe.src = "http:/userstyles.org/styles/8631";

    window.addEventListener("userStyleInstallerLoad",    function(e) {
      iframe.contentDocument.postMessage(uneval({
        data:document.querySelector(".highlight pre").textContent,        title:scriptName
      }),      "http:/userstyles.org/styles/8631");
    },    false);
  },  false);
} else {
  window.addEventListener("message",n  function(e) {
    if (e.origin.indexOf("http:/gist.github.com/") != 0) return;
    var data = eval(e.data);
    document.getElementById("stylish-code").textContent = data.data;
    document.getElementById("stylish-description").textContent = data.title;
    var event = document.createEvent("Events");
    event.initEvent("stylishInstall",false,false,window,null);
    document.dispatchEvent(event);
  },  false);

}