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

[初心者]5分後に表示してるサイトをタイトルとURLだけのページにリダイレクトする拡張機能

はじめに

私はウェブサイトの巡回がライフワーク…というわけではないのですが、ズボラな性格か、貧乏性なのかタブを消さずに残してしまう事が多いです。全盛期は3000ぐらいのタブを開いていました(ごめんなさい、嘘つきました。今Firefox見たら7000超えてました。)
Chromeは今現在で1500程度でかなり重いのですが、Firefoxは優秀ですね…。まったく重さを感じさせないです。

閑話休題

メインで使っているブラウザはChromeなので、やっぱり普段重い…。The Great Suspenderのような指定した時間使ってないタブを自動的に閉じる拡張機能もあるので勿論これらを利用しているのですが、重いのは全然変わりません…。無いよりはマシなのかもしれませんが、タスクマネージャーで確認すると、なんとその拡張機能だけで既に2GBもメモリを消費してるのです!!
メロスは激怒した。必ず、かの 邪智暴虐 ( じゃちぼうぎゃく ) のリソース消費を除かなければならぬと決意した。

ChromeExtensionを作る。

自作ChromeExtensionのインストール方法

メロスにはChromeExtensionどころかJavaScriptもわからぬ。仕方ないので、Google先生を使い切った貼ったを繰り返すことにした。

Chrome拡張機能の作り方

Twitterから「いいね」を消し去るChrome拡張を作る
2019-12-04.png

上記記事を読むと、自作した拡張機能をChromeにインストールする方法までは理解できると思うので、それを行いました。

すべてのサイトに適用されるよう変更する。

上記のままでは当然Twitter上でしか動かない事になるので、すべてのサイトで動作するように変更しました。

manifest.json
-"matches": ["https://twitter.com/*"],
+"matches": ["http://*/*,https://*/*"],
}

※上記でも動くみたいですけど、「<all_urls>」で指定するのもあるみたいです。そっちが正なのかな…。
Chrome拡張開発: 拡張からページにJavaScriptを送り込みたい

JavaScriptのみでリダイレクト先のウェブページを生成する。

新しいウィンドウの内容を生成する

その名の通りです。これで数分、もしくは数時間経過した後のタブはタイトルとURLだけのページにリダイレクトさせることで、ブラウザのリソース消費を大幅に削減できる!という目論見です。の中身だけコピペします。
※document.writeはHTML5では非推奨らしいです。でも、代替の方法がわからないのでそのままです。

hide-like.js
function newwindow() {
    nwin = window.open("", "Newwindow","width=280,height=480");
    nwin.document.open();
    nwin.document.write("<HTML><HEAD>");
    nwin.document.write("<TITLE>New one</TITLE>");
    nwin.document.writeln("<BODY>");
    nwin.document.write("This is new one. Written in HTML.");
    nwin.document.write("<IMG SRC="http://www.ueda.info.waseda.ac.jp/~gaku/js/latour.gif">); 
    nwin.document.write("</BODY></HTML>");
    nwin.document.close();
}

ページ読み込み時に実行されるようにする。

上述のままではnewwindowのfunctionが叩かれない限りコードの中身は実行されないので、読み込み時に実行されるように内容を修正します。

hide-like.js
-function newwindow() {
+window.onload = function(){
}

自ページで表示させる

上述のままでは、新しいウィンドウで開いてしまうので、自ページで表示されるように修正します。サイズ指定も不要なので消します。

hide-like.js
-nwin = window.open("", "Newwindow","width=280,height=480");
+nwin = window.open("", "_Self");
}

スリープ処理を追加する

[JavaScript] sleep処理を行う

hide-like.js
+Sleep(600000) //10分
nwin = window.open("", "_Self");
}
hide-like.js
    nwin.document.write("</BODY></HTML>");
    nwin.document.close();
}

+//引数にはミリ秒を指定します。(例:5秒の場合は5000)
+function sleep(a){
+  var dt1 = new Date().getTime();
+  var dt2 = new Date().getTime();
+  while (dt2 < dt1 + a){
+    dt2 = new Date().getTime();
+  }
+  return;
+}

URLとタイトルを取得する。

肝ですね。これらをコピペして、リダイレクト先のページを作ります。
ページのURLを取得する方法
ページのタイトル(title要素の値)を取得

hide-like.js
-nwin.document.write("This is new one. Written in HTML.");
+nwin.document.write("<a href=\"" + url + "\">" + getPageTitle + "</a>");
hide-like.js
+var url = location.href ;
+var getPageTitle = document.title;

window.onload = function(){

完成したコード

hide-like.js
var url = location.href ;
var getPageTitle = document.title;

window.onload = function(){
    Sleep(600000) //10分
    nwin = window.open("", "_Self");
    nwin.document.open();
    nwin.document.write("<HTML><HEAD>");
    nwin.document.write("<TITLE>New one</TITLE>");
    nwin.document.writeln("<BODY style=\"font-size:120%;\">");
    nwin.document.write("<a href=\"" + url + "\">" + getPageTitle + "</a>");
    nwin.document.write("</BODY></HTML>");
    nwin.document.close();
}

//引数にはミリ秒を指定します。(例:5秒の場合は5000)
function sleep(a){
  var dt1 = new Date().getTime();
  var dt2 = new Date().getTime();
  while (dt2 < dt1 + a){
    dt2 = new Date().getTime();
  }
  return;
}

結果(未測定)

このシンプル稚拙なコードによって、Chromeがどのように生まれ変わるのか、勿論皆さん気になるところと思いますが、実は試してません。何故かというと下手に拡張機能のON/OFFをしてしまうと、サスペンド状態になったタブがそのまま救済不可能になる事象を何度か経験してるからです。
あと、千以上タブを開いてない環境で少し試したところ。メモリの消費状況について改善が見られず。単純に軽量なページを表示させるようにしただけでは、Chromeのメモリ消費は変わらないということがわかりました(Firefoxでも1つ2つ前のページのキャッシュをどうこうするとかそういう設定ありましたよね。そのあたりの設定を変えればメモリ消費が改善する?)

まとめ

とりあえずChrome拡張機能については、昨日までは全く触れたこともなく。JavaScriptも名前ぐらいしか知らず、ソラで書けるのはHelloWorldってアラートが出る(消すと二度と出てこない警察に捕まらない安心安全なもの)ぐらいの私でも簡単に作れるということがわかりました。もう疲れました。
本当にQiitaに投稿してる方々って本当にすごいと思います。

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