技術とか戦略とか

IT技術者が技術や戦略について書くブログです。

ブラウザで表示される文字列をJavaScriptのURLを読ませて置換する

ブラウザで表示される文字列について、お気に入りからJavaScriptを読みこませることで置換することができます。
例えば、強調表示したいような場合にこれを活用できます。
 
例として、mozillaJavaScriptのページを強調表示してみましょう。
https://developer.mozilla.org/ja/docs/Web/JavaScript
 
今回の例では、「JavaScript」と「ECMAScript」を強調表示します。
 
1.お気に入りにJavaScriptを登録する
Chromeの場合は以下のような手順になります。
 
・ブックマークマネージャーを開く

f:id:akira2kun:20210214180437j:plain
 
 
・右クリックで新しいブックマークを作成する

f:id:akira2kun:20210214180525j:plain
 
・ブックマークのURLにJavaScriptを記述する

f:id:akira2kun:20210214180541j:plain
javascript:(function(){document.body.innerHTML=document.body.innerHTML.replace(/JavaScript/g,'[JavaScript]');document.body.innerHTML=document.body.innerHTML.replace(/ECMAScript/g,'[ECMAScript]');})()
 

2.任意のページでブックマークを開く
今回の例では、このようなページが

f:id:akira2kun:20210214180622j:plain

 
ブックマークを開くことでこのように強調表示されます。

f:id:akira2kun:20210214180647j:plain

 

----
 
このように手軽にブラウザの表示の文字列置換が可能なのですが、この方法では大量の文字列置換ができないことに注意する必要があります。
少なくとも、筆者の環境(OS:Windows8.1、ビット数:64、メモリ:8GB、プロセッサ:Intel(R) Core(TM) i5-4210U CPU @ 1.70GHz 2.40GHz、Chromeバージョン: 88.0.4324.150)では、1000通りの文字列置換を行うことはできませんでした。
(恐らく、ブラウザ毎に設けられているURLの文字数制限によるものです)
これが問題になるのであれば、Chrome拡張機能を開発する等の別の方法を考えた方が良いです。
 
また、文字列置換によりリンク先が変わってしまうことにも注意が必要です。
(逆に、これを利用して、意図的にリンク先を変えることはできそうです)