Chrome拡張 : Content ScriptでjQueryを使う.

前回はContent Scriptの作り方について書いた.

shuhelohelo.hatenablog.com

Content Scriptから表示中のウェブページのDOMを操作できるが,素のJavaScriptだと少し効率が良くないこともある.

そこで,今回はContent ScriptでjQueryを使う手順を書く.

jQueryのダウンロード

公式サイトからダウンロードする.

jquery.com

｢Download jQuery｣をクリック.

｢Download the compressed, production jQuery 3.4.1｣を右クリックして｢Save link as｣でファイルをダウンロードする.

拡張機能にjQueryファイルを配置

ダウンロードしたjQueryのファイルを拡張機能のフォルダにコピーする.今回はmanifest.jsonファイルと同じ位置に置くとする.

次に,manifest.jsonファイル内でcontent_scriptsで使用するJavaScriptファイルとしてjQueryのファイルを追加する.

    "content_scripts": [
        {
          "run_at":"document_end",
          "matches": ["<all_urls>"],
          "js": ["jquery-3.4.1.min.js","content_script.js"]
        }
      ]

このとき,content_script.jsファイルよりも前にjQueryのファイルを記述する.

これは記述した順番に読み込まれるため.

これで,content_script.js内でjQueryを使うことができる.

使ってみる

//素のJavaScript
// (function () {
//     document.body.style.backgroundColor = "red";//背景色を赤にする
// })();

//jQuery
$(function(){
    $('body').css('background-color','blue')
});

この拡張機能を読み込んでから,新しくウェブページを読み込むと背景が青になる.

jQueryが使えることが確認できた.