2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-10-05

#概要

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

##動作環境

  • GoogleChrome

##やりかた(自動化されない)
このコードをコピペしてブックマークする。

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

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

2020-10-05 11.20.49.png

つかいかた

計算化学.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つのファイルを入れて、拡張機能->「パッケージ化されていない拡張機能を読み込む」から、ファイルが入ったフォルダを選択。(拡張機能をいれるときは画面右上のディベロッパーモードをオンにする)

スクリーンショット 2020-10-13 10.19.04.png

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

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

2
0
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?