Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

成果物

https://chrome.google.com/webstore/detail/abehiroshize/okffapkklocfabdipcgpaiibomcjdopp

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

Screen Shot 2017-11-20 at 11.08.50.png

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;
}

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした