ウェブサイトを編集するためにクロム拡張をつくる方法

文脈
あなたはウェブサイトには、別のレイアウトをしたいと思ったことがありますか?またはいくつかの機能が不足していただけで実装することができますか?
あなたは別の類似したサイトに行くことを選ぶことができます、しかし、時々、適当な選択肢がないかもしれません、そして、あなたはそれに立ち往生します..😕
あなたがそのウェブサイトを維持する会社のための開発者であると想像してください.残念ながら、あなたはおそらく従業員ではない、またはあなたはそれを変更することはできません.🙁
幸いにも、あなたがすることができる何かがあります、そして、あなたが考えるより単純です.続きを読むには、このチュートリアルを学ぶ方法.🤓

何を学びますか.
このチュートリアルでは、約5分で学ぶべきです.

最小限のクロム拡張をつくる方法

ブラウザに読み込む方法

どのように拡張機能は、ウェブサイトのHTMLを変更することができます

私は、15分未満で、あなたのブラウザーで働く単純なクロム拡張子を持っているとかなり確信します.準備ができましたか.🙃

変更したいウェブサイトの例
しかし、始める前に、あなたが修正したいケースの架空の例を見ましょうDOM ウェブサイトのホームページwww.cinoche.com .

I really want to point out that I have nothing against this website, I just needed to have a concrete example of a website I could edit. As I love to watch movies, this site was one of the first websites I thought of. In fact, I ❤️ Cinoche.com. 😉

cinocheのスクリーンショット.COM .
あなたはそれに気付かないかもしれませんが、ニュースが表示される右側のセクションに大きなスペースがあります.何がこの間違ったレイアウトを引き起こしている?広告は存在したが、uBlock Origin 拡張.それが削除されなかったのでdiv 親flex レイアウトはもはや動作しません.😟

マニフェストを作成します.JSONファイル
空のフォルダの中にmanifest.json 以下の内容のファイル.それはあなたの拡張子に関するブラウザ情報(そして、あなたがそれを公開するならば、ユーザー)を与えるファイルです.すべてのブラウザ拡張機能が機能する必要がある唯一の必須ファイルです.

{
  "manifest_version": 3,
  "name": "Make Cinoche Great Again",
  "version": "1.0.0"
}

マニフェストの最初のバージョン.JSONファイル.
これらの属性は

マニフェストバージョン:マニフェストのバージョン.3 最新バージョンが利用可能です.

name :拡張モジュールの名前です.

バージョン:私たちの拡張機能のバージョン.

そして、我々はされます!すべての必要なコードが書かれている!私たちのケースでは、我々の拡張はかなり役に立たないが、我々は先に行くことができますし、クロムに追加!😅

拡張子をブラウザに読み込みます
あなたのカスタム拡張子のディレクトリを選択するには、“Load unpack”ボタンをクリックしてください.つのボタンを参照するには、右上の“開発者モード”を有効にする必要があります.

マイスクリーンショットchrome://extensionsつの拡張子を持つページ.
これで、同じページに拡張子が表示されます.おめでとう!🥳

あなたのエクステンションは現在chrome://extensionsページ.
選択したディレクトリ内の任意のファイルを編集する必要がある場合は、[更新]ボタンをクリックして拡張子をChromeに再読み込みする必要があります.それ以外の場合、変更内容は拡張モジュールに表示されません.
さて、拡張機能にいくつかの機能を追加する方法を見てみましょう.😃

ウェブサイトを修正するスクリプトを注入する
覚えてるかexample website ? あなたがそこに行って、開くならばDevTools とF12 ), この単純な行のコードをタイプしてバグを修正できます.

document.querySelector('div.featured-box-right').remove();

私の例では、それは私たちの経験を改善するために多くのコードを取ることはありませんか?😆
あなたがそれを試みたならば、あなたはレイアウトが整えられたのを見ました、しかし、あなたがページを更新するならば、あなたの変化は保存されません..😭
どのように我々はウェブサイトの各ページに私たちの小さなスクリプトを注入することができますか?次のコードを新しいファイルに入れましょうcinoche.js . しかし、今では、このコードが存在する拡張子にすべてのページに注入する必要があります.
再開するmanifest.json 拡張モジュールのcontent_scripts 属性

{
  "content_scripts": [
    {
      "js": ["cinoche.js"],
      "matches": ["https://www.cinoche.com/*"]
    }
  ],

  // ...
}

この属性は、拡張子がJavaScriptファイルをcinoche.js ( js ) 現在のURLmatches https://www.cinoche.com/* .
次のようなファイルがあります.

{
  "content_scripts": [
    {
      "js": ["cinoche.js"],
      "matches": ["https://www.cinoche.com/*"]
    }
  ],
  "manifest_version": 3,
  "name": "Make Cinoche Great Again",
  "version": "1.1.0"
}

Note : you may have noticed that I've incremented its version. Doing this make it easier to know if your extension has been successfully reloaded and that you have the latest changes.

あなたは今あなたの拡張子をリロードしてwww.cinoche.com 最終結果を確認するには、次の手順に従います.

cinocheのスクリーンショット.COMは、私たちの拡張子が空の部門を削除した後.
我々の拡張が我々のスクリプトをドメインのあらゆるページに注入するので、あなたのスクリプトが失敗しないことを確認するために、保護を加えなければなりません:

const featureBoxRight = document.querySelector('div.featured-box-right');

if (featureBoxRight) {
  featureBoxRight.remove();
}

このスクリプトは、機能ボックスが削除される前に存在することを確認します.

One last tip : the auto-injected script is equivalent to opening the DevTools and pasting it there. So, if there is any error or logs, you will see them in the console. 🤖

結論
このチュートリアルでは、Chrome拡張モジュールを作成するための基礎を学びました.あなたがそれについてもっと学びたいならばofficial documentation on Chrome Developers .
あなたの拡張モジュールに追加できる多くの属性とカスタマイズがありますが、別のチュートリアルで私からそれらを学ぶよ!🧐
グッドラック!✌️