いまみているウェブページを阿部寛のサイトっぽくするChrome拡張を作った

日本を代表するすばらしい俳優であり, ブルータルウェブレイアウトの先駆者である阿部寛氏と彼のウェブサイト制作者への敬意をこめて.

成果物

左が通常のWikipedia、右がこの拡張機能でAbehiroshize（アベヒロシャイズ）したページ.

Githubレポジトリ

技術仕様

DOM操作

基本的にjQueryでDOM操作しまくっているだけである.

左ナビゲーション判定

• ナビゲーションの判定について、 $('nav') や $('#menu') などをもとに判定して左側に表示しようと思っていたが、意外と世の中のサイトはマークアップが適当なものが多く、うまくいかなかったので <ul>だったらナビゲーションにする という強硬手段に出た. ただし、<main>タグ内にあるそれは除く.

$('ul').each(function() {
  if ($(this).closest('main').length === 0) {
    $(this).find('li').appendTo(`#${navigationInnerListId}`);
  }
});

既存スタイルの削除

雑だが強制的にデフォルトスタイルを全部排除する. リセットすらしない.

function removeExistingStyles() {
  const $styleElements = $('style');
  const $stylesheetElements = $('link[rel="stylesheet"]');
  const $cssElements = $('link[type="text/css"]')

  $styleElements.remove();
  $stylesheetElements.remove();
  $cssElements.remove();
  $('*').removeAttr('style');
}

背景の文字

CSSのbefore擬似要素に対して、<title>の文字列テキストを羅列させた.

#${contentId}:before {
  content: '${documentTitle}　　${documentTitle}　　${documentTitle}　　...　　${documentTitle}';
  z-index: 0;
  font-size: 70px;
  font-family: 'Pinyon Script', cursive;
  word-break: break-all;
  color: #D3F6E0;
}

参考

• 阿部 寛のホームページ
• 爆速でChrome拡張機能を作成する
• Chrome Extension を作って公開する