背景#
背景は次のようなものです。私は Safari で「hackingwithswift」というウェブサイトを見ているとき、上部に常に固定されている赤色と黒色の 2 つのバーが非常に目立つため、これらを削除する方法を考えました。
実装#
まず、これらの 2 つのバーがどのように実装されているかを確認します。右クリックして「要素を検証」を選択し、対応する 2 つの領域を選択して表示します。
2 つのモジュールの「class」または「id」がわかったら、次のステップはコンソールで取得してみて、実現できるかどうかを確認することです。
取得できることがわかりました。次のステップは、「Safari 拡張機能スクリプトエディタ」を使用して自動的に削除する方法を考えることです。
まず、UserscriptsまたはStay-Userscript Extensionという Safari 拡張機能をインストールします。どちらか一つを選択してください。自分で JavaScript を書く場合は、最初のものを使用することをお勧めします。なぜなら、Userscriptsの編集画面の方が使いやすいからです。
インストール後、Safari 拡張機能の画面を開き、有効にします。
次に、次の図のように「Open Extension Page」をクリックします。
そして、「New Javascript」をクリックすると、JavaScript のスクリプト編集ページに移動します。
JavaScript のスクリプト編集ページに入ると、次のようなページが表示されます。以下の項目に注意してください。
- @name はこのファイルまたはこの JavaScript スクリプトの名前です。
- @description はこのファイルの機能の説明です。
- @match は一致させたいウェブサイトのアドレスです。ブラウザのアドレスバーに入力されたアドレスが @match と一致する場合、true を返して
$(function(){})のエントリーメソッドが呼び出されます。
次に、問題が発生します。具体的なコードはどのように書けばよいのでしょうか？正直なところ、JavaScript のコードを真剣に書いたことがなく、ユーザースクリプトも書いたことがありません。どうやって始めればいいのでしょうか？簡単です、参考にしてください。
以前に「xxx 広告クリーナー」をインストールして、その中のコードの構造と形式を見てみました。まず、形式をどのように書くかを確認し、その中で機能をどのように実現するかを確認しました。大まかな形式は次のようになります。
(function() {
'use strict';
xxx
function clearAD(){
xxx
}
xxx
setTimeout(()=>{clearAD();},2000);
})();
したがって、同じロジックに従って実装するだけで、clearADメソッドをremoveNavbarAndSkybarに変更し、メソッド内でnavbarとskybarを削除するだけです。
これは理論ですが、具体的な実装方法はまだわかりません。どうすればいいでしょうか？引き続き参考にしてみましょう。以下のコードを参考にすると、document.querySelectorAllメソッドを使用してclassまたはidを取得し、for ループで削除していることがわかります。
function clearAD(){
if(!document.querySelectorAll)return;
var mAds=document.querySelectorAll(".ec_wise_ad,.ec_youxuan_card,.page-banner"),i;
for(i=0;i<mAds.length;i++){
var mAd=mAds[i];
mAd.remove();
}
var list=document.querySelectorAll("#content_left>div,#content_left>table");
for(i=0;i<list.length;i++){
let item = list[i];
let s = item.getAttribute("style");
if (s && /display:(table|block)\s!important/.test(s)) {
item.remove();
}else{
var span=item.querySelector("div>span");
if(span && span.innerHTML=="广告"){
item.remove();
}
xxx
}
}
}
したがって、上記のコードを参考にして、次のように自分自身のコードを実装します。
// ==UserScript==
// @name Remove Hacking With Swift Navbar and skybar
// @description Remove Hacking With Swift Navbar and skybar
// @match *://*/*
// ==/UserScript==
(function() {
'use strict';
function removeNavbarAndSkybar(){
var mAds=document.querySelectorAll(".navbar"),i;
for(i=0;i<mAds.length;i++){
var mAd=mAds[i];
mAd.remove();
}
var list=document.querySelectorAll("#hws-latest-tutorial");
for(i=0;i<list.length;i++){
let item = list[i];
item.remove();
}
}
setTimeout(()=>{removeNavbarAndSkybar();},2000);
})();
次に、右下の保存をクリックし、左側の開始をクリックします。
そして、https://www.hackingwithswift.com/books/ios-swiftui/reading-text-from-the-user-with-textfield というウェブサイトを開いてみると、赤色と黒色のバーが削除されていることがわかります。ほぼ完了です。
最適化ポイント：
- 上記のスクリプトのコードを注意深く見ると、最終的な呼び出しは
setTimeout(){}を使用して遅延させています。この遅延は適切ですか？何か問題がありますか？ページの読み込みが完了した後に削除するように変更すると、より良いでしょうか？ - 上記のコードは「hackingwithswift」ウェブサイトに対して対応していますが、スクリプト内でドメインを判断する処理がありません。ドメインに対して判断を追加できるでしょうか？
最終的なコードは次のようになります。
// ==UserScript==
// @name Remove Hacking With Swift Navbar and skybar
// @description Remove Hacking With Swift Navbar and skybar
// @match *://www.hackingwithswift.com/*
//
// ==/UserScript==
(function() {
'use strict';
function removeNavbarAndSkybar(){
var mAds=document.querySelectorAll(".navbar"),i;
for(i=0;i<mAds.length;i++){
var mAd=mAds[i];
mAd.remove();
}
var list=document.querySelectorAll("#hws-latest-tutorial");
for(i=0;i<list.length;i++){
let item = list[i];
item.remove();
}
}
window.addEventListener('load', function() {
removeNavbarAndSkybar();
}, false);
})();