指定したパターンがHTMLソース中に存在することを検出するGreasemonkeyスクリプト

greasemonkey Microformats

というかこないだのこれ

hCalendar の存在を検出するだけの Greasemonkey スクリプト（誤検出もあるよ） - 再発明日記

を複数のパターンに対応させただけですが。

指定したパターンを検出すると画面左上にこのように表示されます。クリックすると消えます。

detect-in-html-src

document.body.innerHTML.match( pattern ) ってやってるだけなので、たとえば vevent がマイクロフォーマットとしてマークアップされていなくても検出します。コードもシンプルなままにできますし個人的にはこれで十分です。

「hAtom は割と使われてるなー」とか「クリエイティブ・コモンズって書かれてるけどコモンズ証へのリンクはないのか……」とか「おっ スラッシュドットが hReview 使ってる！」とかいろいろ気づけて面白いです。

別にマイクロフォーマット専用というわけではないので patterns に好きなパターンを追加して使うと良いと思います。

      • -

追記 2011-01-29

gist に置きました。最新版はそっちを見てください。
→ gist: 801914

function createElement(parent, tagName, attributes, styles, innerHTML){
  var e = document.createElement(tagName);

  if(attributes){
    for(var key in attributes){
      e.setAttribute(key, attributes[key]); }}
  if(styles){
    for(var key in styles){
      e.style[key] = styles[key]; }}
  if(innerHTML){
    e.innerHTML = innerHTML; }
  if(parent){
    parent.appendChild(e); }

  return e;
}


var container = createElement(
  document.body
  , "div"
  , {}
  , { position: "fixed"
      , right: "0", top: "0"
      , color: "#fff"
      , padding: "0"
      , zIndex: "1000"
      , background: "#fff"
      , opacity: "0.8"
    }
);

container.addEventListener(
  "click"
  , function(e){
    e.target.style.display = "none"; 
  }
  , false
);


function detect(pattern){
  if( ! document.body.innerHTML.match(pattern) ){
    return;
  }
  
  createElement(
    container
    , "p"
    , {}
    , { background: "#c00"
        , color: "#fff"
        , padding: "1ex"
        , margin: "1ex"
        , zIndex: "1000"
        , fontWeight: "bold"
      }
    , pattern.toString()
  );
}

var patterns = [
    "vevent"
    , "vcalendar"
    , "rel='license'"
    , 'rel="license"'
    , "hreview"
    , "hentry"
    , "creativecommons.org"
    , "commons"
];

for(var a=0; a<patterns.length; a++){
  detect(patterns[a]);
}

2011年 1月 18日 火曜日 20:29:17 JST

  • patterns を修正
  • 左側に表示されると邪魔なので右側に表示するように変更

2011年 1月 30日 日曜日 00:59:00 JST