AIが生成したとてもおしゃれな写真で、とても可愛いと思ったので表紙に使わせていただきました。
この記事では、サイト B の閲覧に時間がかかりすぎないよう、Web 版サイト B の機能を制限するための JS スクリプトを開発します。機能は次のとおりです。
- 検索、ビデオ ページ、プライベート メッセージ ページ以外のページは検索ページにリダイレクトされます。
- 関連するおすすめは動画ページから削除され、自分の動画ではないコメントは削除されます。
次の内容は、ビデオブラウザ スクリプト開発の 6 分間の簡単な紹介 - Bilibili-shandianchengzi のテキストです。具体的には、ビデオ読書と組み合わせる必要があります。
スクリプトのダウンロード リンク:https://github.com/shandianchengzi/Bilibili-self-discipline-script/blob/main/README.md
使用するだけの場合は、下を見る必要はなく、直接インストールするだけです。
1 スクリプトの作成
ブラウザでスクリプトを実行する場合は、まずブラウザでスクリプトを管理するための拡張機能をダウンロードする必要があります。スクリプトの管理によく使用されるブラウザ プラグインは、Microsoft 独自のブラウザで直接検索できます。Google ストアで検索することもできますが、Google ストアは科学的なインターネット アクセスを必要とするため、適切ではありません。
現在、Microsoft Store の tampermonkey は TamperMonkey という名前に変更されました。このプラグインをインストールすると、右上隅に追加のアイコンが表示されます。数が少ない場合は、釘を押して表示する必要があります。
次に、このアイコンで [新しいスクリプトを作成] をクリックすると、入力する最小限のスクリプト テンプレートが生成されます。
2 スクリプト情報
このスクリプトのヘッダーにはいくつかのスクリプト情報が含まれており、主に変更する必要があるのは、スクリプトの紹介と作成者情報です。今回開発したスクリプトはB局の自制スクリプトです。最初に設計した機能は、トップページに関連動画が表示されないよう強制的に検索ページにジャンプする機能です。 2 番目の機能は、関連する推奨事項をビデオから削除することです。そして、以下のコメントを削除してください。コメントを読むたびに、非常に長い間読んでしまうからです。
どちらの関数も非常に単純であることがわかるので、このスクリプトを教育スクリプトとして使用したいと思います。
注意が必要な追加情報は match です。これは、スクリプトがどの Web ページにロードされるかを参照します。たとえば、私たちはステーション B にいるので、試合はステーション B で行われる可能性があります。
初心者として知っておくべき最も重要なことは、ワイルドカード * です。コードをよく書く人なら誰でもこれを知っていますが、これは、その後に追加されたものはすべて一致するとみなされることを意味します。
アイコンはスクリプトのアイコンです。著作権フリーの画像を見つけて画像のリンクをコピーするだけで、変更する必要はありません。
3 スクリプトリポジトリ
スクリプトを作成した後、スクリプトに一致するページをクリックすると、右上隅に小さな赤い点が表示されます。これは、スクリプトが読み込まれたことを意味します。
次に、スクリプトの内容をさらに調整していきます。
私の提案は、新しい github リポジトリを作成して、スクリプトをバージョン管理してオープンソース化し、他の人がスクリプトの改善に協力できるようにすることです。
新しい倉庫を作成するには、名前と説明を入力する必要があります。特別なのは契約です。初心者は契約に注意を払わないことがよくありますが、実際には契約は非常に重要ですあなたの倉庫があなたに適しているかどうかを直接宣言します。著作権があると言われています。
より一般的に使用される 3 つのプロトコルは、Apache、MIT、および GNU です。 Apache では、派生製品の商用利用または専有利用が許可されていますが、Mit は作者の著作権のみを保持し、それ以外の利用については制限はありません。 Gnu は商用利用を許可していません。生成される派生コードは引き続き GNU プロトコルを使用し、オープン ソースである必要があります。
ここで私が使用しているのは、私が好む GNU プロトコルです。なぜなら、私の小さな壊れたスクリプトが商業的に使用されたくないからです。このような純粋にオープンソースとして共有され、商用目的で使用されるスクリプトの場合、共有者にとって大きな損害となります。
ウェアハウスを作成したら、ローカルにクローンを作成し、VScode で開き、書き込みを開始します。
4 基本的なスクリプト開発
このような従来のスクリプトは、AIと組み合わせるのが一番手っ取り早いです。VscodeにはMicrosoft社が開発したGithub Copilotがあります。学生や教師はGithub上で申請するだけで有効化できます。具体的な申請方法については、 Github公式サイト。
プラグインをインストールした後、いくつかのコメントを入力すると、人工知能がコードの一部を自動的に生成します。最初に URL を解析することを選択します。サイト b に移動してこれらの URL の特徴を見つけ、それをコメントで提供することで、解析コードがランダムに生成されないようにすることができます。
実装するのがより簡単な機能はビデオ以外のページのリダイレクトで、ウィンドウ リンクを検索ページと強制的に一致させることができます。ただし、スクリプトを作成するときに、スクリプトが何度もロードされるという、ブラウザ スクリプトに関する一般的な問題が発生します。
ブラウザ コンソールの出力情報を分析すると、新しい xhr リクエストが受信されるたびに再ロードされることがわかり、その主な読み込みがサブページにある可能性があることがわかります。フロントエンド開発者は、一部の境界コンポーネントを繰り返し開発しないようにするために、開発中に最初にボックスを作成し、そのボックス内にサブページを入れ子にする、つまり他の Web ページ ファイルを入れ子にすることがよくあることを知っています。
解決策を探していると、トップローディングのみを許可することが見つかりました。この設定はスクリプト管理プラグインに手動で追加する必要があり、スクリプト開発時にこの設定を追加するのは非常に面倒です。独自のスクリプトを使用または作成する場合は、開発者に頼るのではなく、この設定をオンにすることをお勧めします。
を再度実行すると、一度しかロードされていないことがわかりました。
ビデオのこの時点で、最も単純なスクリプトの開発が完了しました。次のビデオでは、スクリプト全体の機能をさらに改善します。
5 スクリプト機能が充実
これで機能 1 は完了しました。つまり、他のページをクリックすると検索ページにリダイレクトされます。機能 2 は少し複雑で、ビデオ ページ上の Web ページ要素を削除し、現在のビデオが自分のビデオかどうかを確認する必要があります。
まず、後でテストしやすくするためにビデオ ページを開く必要があります。 F12 キーを押してデバッグ ツールを開いた後、ソース コードをクリックし、削除する部分の要素情報を表示します。
id は通常、各要素の一意の識別子です。クラスは要素のクラスであり、一意ではありません。削除する要素に ID がある場合は、その ID を直接使用するのが最も簡単です。クラスの場合は、特別なクラスを見つけて、このクラスに対応する要素が 1 つだけであることを確認できます。
ステーション b のページには明らかにこれらの少数の要素しかないため、この関数は簡単に作成でき、クラスまたは ID を見つけることができます。
まず、右側のおすすめ動画の ID が reco_list であることがわかります。 xpath をコピーしてコメントとして使用すると、AI がコードを自動生成します。
しかし、実際に使ってみると、動画のおすすめは消えたものの、ライブブロードキャストが押し上げられ、視聴体験に大きな影響を与えていることがわかりました。したがって、display:none を Visibility:hidden に変更すると、ビデオの推奨事項が表示されなくなりますが、ビデオの推奨事項は引き続きその位置を占め、ライブ ブロードキャストはプッシュされません。
次に、コメントの場合、ID が comment であることがわかり、同様に xpath をコメントとしてコピーすると、AI が自動的に削除コードを生成します。
第三に、現在のページが自分のビデオかどうかを確認します。最初は、現在の所有者のアバター リンクを使用して、右上隅のアバター リンクと一致するかどうかを確認し、それが私であるかどうかを判断しました。ただし、右上隅のアバターのレンダリングに時間がかかり、クリックするたびにこの要素が空になり、エラーが発生します。
そこで、後で、アップ メイン アバター リンクの uid を使用して、Cookie に保存されている DedeUserID と一致するように変更し、それが自分のビデオかどうかを検出できるようにしました。
この時点で、スクリプト全体が最初に作成されました。
自分のビデオの下にはコメント エリアがありますが、他の人のビデオの下にはコメント エリアがないことがわかります。また、任意のページをクリックすると、自動的に検索ページにジャンプします。
ご視聴いただきありがとうございます。