Chrome拡張機能でJavaScriptを実行する方法

1. Content Scriptを使用する方法: Content Scriptは、特定のウェブページのコンテンツにアクセスし、JavaScriptを実行するためのスクリプトです。以下は、Content Scriptを使用する方法のコード例です。

2. Background Scriptを使用する方法: Background Scriptは、拡張機能のバックグラウンドで実行されるスクリプトであり、ウェブページのコンテンツに直接アクセスすることはできませんが、拡張機能との対話や通信を行うことができます。以下は、Background Scriptを使用する方法のコード例です。

// backgroundScript.js
// 例: ブラウザアクションをクリックしたときにウェブページの背景色を変更する
chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript({
    code: 'document.body.style.backgroundColor = "red";'
  });
});

3. Popup Scriptを使用する方法: Popup Scriptは、拡張機能のポップアップウィンドウで実行されるスクリプトです。以下は、Popup Scriptを使用する方法のコード例です。

// popupScript.js
// 例: ポップアップウィンドウのボタンをクリックしたときにウェブページの背景色を変更する
document.getElementById("changeColorButton").addEventListener("click", function() {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.executeScript(tabs[0].id, {
      code: 'document.body.style.backgroundColor = "blue";'
    });
  });
});