独自のブラウザ拡張機能の作成方法 [サンプル プロジェクトを含む]

この記事では、ブラウザーの拡張機能について説明します。拡張機能とは何か、どのように機能するのか、独自の拡張機能を構築する方法について説明します。

最後に、ボタンを 1 回クリックするだけで任意のコード スニペットをクリップボードにコピーできる独自の拡張機能を実際に作成します (非常に楽しい!)。

この記事を続けるには:

• JavaScript の基本的な知識が必要です。
• Firefox ブラウザが必要です (または他のブラウザでも動作します)

ブラウザ拡張機能とは?

ブラウザ拡張機能は、ブラウザに追加するもので、ブラウザの容量を拡張してブラウジング エクスペリエンスを向上させます。

例として、デバイスにインストールした可能性のある広告ブロッカーについて考えてみましょう。これにより、ウェブ サーフィン時に広告がブロックされるため、ブラウジング エクスペリエンスが向上します。

独自の基本的なブラウザ拡張機能を作成する方法

それでは、非常に基本的な拡張機能を作成することから始めましょう。

まず、manifest.json という名前のファイルを作成するフォルダーを作成します。 .

マニフェスト ファイルとは?

マニフェスト ファイルは、すべてのブラウザー拡張機能で必須のファイルです。このファイルには、名前、バージョンなど、拡張機能に関する基本データが含まれています。

manifest.json の内部 ファイルに次のスニペットをコピーします:

{
  "manifest_version":2,
  "version":"1.0",
  "name":"Test",
}

拡張ファイルのロード方法

Firefox ユーザーの場合は、次の手順に従ってください:

アドレスバーで、これを検索してください:

about:debugging#/runtime/this-firefox

一時的なアドオンをロードするオプションが表示されます .そのオプションをクリックして、manifest.json を選択します ディレクトリからのファイル。

Chrome ユーザーの場合:

アドレスバーでこれを検索してください:

chrome://extensions.

• 開発者モードを有効にして切り替える
• [解凍されたものをロード] ボタンをクリックして、拡張機能のディレクトリを選択します。

万歳！拡張機能が正常にインストールされました。しかし、拡張機能は現在何もしません。それでは、拡張機能にいくつかの機能を追加しましょう。これを行うには、 manifest.json を編集します 次のようなファイル:

{
  "manifest_version":2,
  "version":"1.0",
  "name":"Test",
  "content_scripts":[
    {
     "matches":["<all_urls>"],
     "js":["main.js"]
    }
  ]
}

上記のコードでは、コンテンツ スクリプトを manifest.json に追加しました。 .コンテンツ スクリプトは、Web ページのドキュメント オブジェクト モデルを操作できます。コンテンツ スクリプトを使用して、JS (および CSS) を Web ページに挿入できます。

"matches" コンテンツスクリプトを追加する必要があるドメインとサブドメインのリストと js が含まれています 読み込まれる JS ファイルの配列です。

同じディレクトリ内に main.js を作成します ファイルに次のコードを追加します:

alert("The test extension is up and running")

拡張機能をリロードし、 URLs にアクセスすると 警告メッセージが表示されます。

コードを編集するたびに拡張機能をリロードすることを忘れないでください。

ブラウザ拡張機能をカスタマイズする方法

それでは、拡張機能をもっと楽しんでみましょう。

これから行うことは、アクセスする Web ページのすべての画像を選択した画像に変更する Web 拡張機能を作成することです。

このためには、現在のディレクトリに画像を追加し、 main.js を変更するだけです ファイルの宛先:

console.log("The extension is up and running");

var images = document.getElementsByTagName('img')

for (elt of images){
   elt.src = `${browser.runtime.getURL("pp.jpg")}`
   elt.alt = 'an alt text'
}

ここで何が起こっているか見てみましょう:

var images = document.getElementsByTagName('img')

このコード行は、Web ページ内の img を持つすべての要素を選択します タグ .

次に、src を変更する for ループを使用して配列イメージをループします。 すべての img の属性 runtime.getURL の助けを借りて URL への要素 関数。

こちら pp.jpg デバイスの現在のディレクトリにある画像ファイルの名前です。

pp.jpg についてコンテンツ スクリプトに通知する必要があります。 manifest.json を編集してファイル ファイルの宛先:

{
  "manifest_version":2,
  "version":"1.0",
  "name":"Test",
  "content_scripts":[
   {
    "matches":["<all_urls>"],
    "js":["main.js"]
   }
  ],
  "web_accessible_resources": [
        "pp.jpg"
  ]
}

次に、拡張機能をリロードして、好きな URL にアクセスします。これで、すべての画像が現在の作業ディレクトリにある画像に変更されるはずです。

拡張機能にアイコンを追加する方法

manifest.json に次のコードを追加します ファイル:

"icons": {
  "48": "icon-48.png",
  "96": "icon-96.png"
}

拡張機能にツールバー ボタンを追加する方法

次に、ブラウザのツールバーにボタンを追加します。ユーザーは、このボタンを使用して拡張機能を操作できます。

ツールバー ボタンを追加するには、次の行を manifest.json に追加します。 ファイル:

"browser_action":{
   "default_icon":{
     "19":"icon-19.png",
     "38":"icon-38.png"
   }
  }

すべての画像ファイルが現在のディレクトリに存在する必要があります。

拡張機能をリロードすると、ブラウザのツールバーに拡張機能のアイコンが表示されます。

ツールバー ボタンのリッスン イベントを追加する方法

ユーザーがボタンをクリックしたときに何かをしたい場合があります。たとえば、ボタンがクリックされるたびに新しいタブを開きたいとしましょう。

このために、次を manifest.json に再度追加します ファイル:

"background":{
        "scripts":["background.js"]
  },
  "permissions":[
      "tabs"
  ]

次に、background.js という名前の新しいファイルを作成します。 現在の作業ディレクトリに移動し、ファイルに次の行を追加します:

function openTab(){
    
    var newTab = browser.tabs.create({
        url:'https://twitter.com/abhilekh_gautam',
        active:true
    })
}

browser.browserAction.onClicked.addListener(openTab)

拡張機能をリロードしてください!

誰かがボタンをクリックするたびに、openTab が呼び出されます Twitter プロフィールにリンクする URL で新しいタブを開く機能。また、アクティブ キーを true に設定すると、新しく作成されたタブが現在のタブになります。

バックグラウンド スクリプトでは、ブラウザーが提供する API を使用できることに注意してください。 API の詳細については、記事「Javacript API」を参照してください。

ブラウザー拡張機能の基本をいくつか学んだので、開発者が日常生活で使用できる拡張機能を作成しましょう。

最終プロジェクト

よし、次は日常生活に役立つことを書きます。ワンクリックで StackOverflow からコード スニペットをコピーできる拡張機能を作成します。したがって、拡張機能は Copy を追加します ボタンをクリックすると、コードがクリップボードにコピーされます。

デモ

まず、新しいフォルダー/ディレクトリを作成し、その中に manifest.json を追加します ファイル。

次のコードをファイルに追加します:

{
  "manifest_version":2,
  "version":"1.0",
  "name":"copy code",
  "content_scripts":[
    {
     "matches":["*://*.stackoverflow.com/*"],
     "js":["main.js"]
    }
  ]
}

matches を見てください content script の中 – 拡張機能は、StackOverflow のドメインとサブドメインでのみ機能します。

main.js という名前の別の JavaScript ファイルを作成します。 同じディレクトリに次のコード行を追加します:

var arr =document.getElementsByClassName("s-code-block")

for(let i = 0 ; i < arr.length ; i++){
 var btn = document.createElement("button")
 btn.classList.add("copy_code_button")
 btn.appendChild(document.createTextNode("Copy"))
 arr[i].appendChild(btn)
 //styling the button
 btn.style.position = "relative"
 
 if(arr[i].scrollWidth === arr[i].offsetWidth && arr[i].scrollHeight === arr[i].offsetHeight)
  btn.style.left = `${arr[i].offsetWidth - 70}px`

  else if(arr[i].scrollWidth != arr[i].offsetWidth && arr[i].scrollHeight === arr[i].offsetWidth)
   btn.style.left = `${arr[i].offsetWidth - 200}px`
 else 
   btn.style.left = `${arr[i].offsetWidth - 150}px`
  
 if(arr[i].scrollHeight === arr[i].offsetHeight)
   btn.style.bottom = `${arr[i].offsetHeight - 50}px`
   
 else
   btn.style.bottom = `${arr[i].scrollHeight - 50}px`
 //end of styling the button
   
   console.log("Appended")
}

まず、クラス名が s-code-block の要素をすべて選択しました - しかし、なぜ？これは、StackOverflow のサイトを調べたところ、すべてのコード スニペットがその名前のクラスに保持されていることがわかったためです。

そして、それらすべての要素をループして、それらの要素にボタンを追加します。最後に、ボタンを適切に配置してスタイルを設定します (スタイルはまだ完璧ではありません。これはほんの始まりに過ぎません)。

上記のプロセスを使用して拡張機能をロードし、StackOverflow にアクセスすると、コピー ボタンが表示されます。

ボタンに機能を追加する方法

ここで、ボタンがクリックされたときに、スニペット全体がクリップ ボードにコピーされるようにします。これを行うには、次のコード行を main.js に追加します。 ファイル:

var button = document.querySelectorAll(".copy_code_button")
 button.forEach((elm)=>{
  elm.addEventListener('click',(e)=>{
    navigator.clipboard.writeText(elm.parentNode.childNodes[0].innerText)
    alert("Copied to Clipboard")
  })
 })

まず、querySelectorAll を使用して、サイトに追加したすべてのボタンを選択します。 .次に、ボタンがクリックされるたびにクリック イベントをリッスンします。

navigator.clipboard.writeText(elm.parentNode.childNodes[0].innerText)

上記のコード行は、コードをクリップボードにコピーします。スニペットがコピーされるたびに、メッセージ Copied to clipboard でユーザーに警告します

最後の言葉

Web 拡張機能はさまざまな方法で役立ちます。この記事の助けを借りて、独自の拡張機能を作成できるようになることを願っています。

すべてのコードは、この GitHub リポジトリにあります。良いスタイリングや、クリップボードの履歴などの新機能を思いついたときはいつでもプル リクエストを送信することを忘れないでください。

ハッピーコーディング！