計算化学.comで広告が被って見づらいのでChrome拡張で見やすくした。

概要

計算化学.comは、計算化学のまとめサイトとしていろいろな情報が載っていて重宝する。しかし、レイアウトがよくないのか、GoogleAdsenseの広告が記事にかぶってしまい非常に見づらい。
そのため、Javascriptでレイアウトを修正して記事を見やすくした。

動作環境

• GoogleChrome

やりかた（自動化されない）

このコードをコピペしてブックマークする。

javascript:var elem = document.getElementById('secondary');elem.setAttribute('style','width: 400px; margin-right: 10px;');

Command + D -> その他　-> urlに上記コードをコピペ、名前は自分でわかりやすいものを指定。
（今回は名前をccmodiとした。computational chemistry modifyの意。）

つかいかた

計算化学.comのページにアクセスして、見づらいと思ったら、ブックマークバーにあるこのリンクを押す。
すると、広告が被らなくなる。
（本当はJavascriptを自動で実行できるようにしたかったが、やり方がわからなかったので保留しました。わかる方は教えていただけるとありがたいです。 →自動化しました！）

やりかた（自動化済み）

Chrome拡張にすることで自動化しました。

manifest.json

{
    "name": "Computer Chemistry Modify",
    "version": "1.0.0",
    "manifest_version": 2,
    "description": "計算化学ドットコムのレイアウトを直すクローム拡張です",
    "content_scripts": [{
      "matches": ["https://computational-chemistry.com/*"],
      "js": [
        "ccmodi.js"
      ]
    }]
  }

ccmodi.js

var elem = document.getElementById('secondary');elem.setAttribute('style','width: 400px; margin-right: 10px;');

フォルダにこの2つのファイルを入れて、拡張機能->「パッケージ化されていない拡張機能を読み込む」から、ファイルが入ったフォルダを選択。（拡張機能をいれるときは画面右上のディベロッパーモードをオンにする）

これで、計算化学.comのドメインにあるページを読み込んだときに自動でレイアウトが直される。（めでたしめでたし）

謝辞

自動化については、@ramenhaoishii さんのコメントを参考にさせていただきました。他にコメントをくださった方もありがとうございます！
また、クローム拡張の自作についてはChrome拡張の作り方 (超概要)を参考にさせていただきました。