メモ | refirio.org

Memo

Chrome拡張機能の作成

以下を参考に進めてみる。

とほほのChrome拡張機能開発入門 - とほほのWWW入門
https://www.tohoho-web.com/ex/chrome_extension.html

■Hello World 

以下で作業する。
C:\Users\refirio\Chrome\HelloWorld

以下のファイルを作成する。

manifest.json
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
{
  "name": "Hello World",
  "description": "これは拡張機能のサンプルです。",
  "version": "1.0.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "popup.html"
  }
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

popup.html
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <p>ハロー！</p>
</body>
</html>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

Chromeで「chrome://extensions」を開き、ページ上部の「パッケージ化されていない拡張機能を読み込む」をクリック。
これで拡張機能が追加され、追加した拡張機能のアイコンをクリックすると popup.html の内容がポップアップで表示される。

■ショートカットキーを設定する

manifest.json
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
{
  "name": "Hello World",
  "description": "これは拡張機能のサンプルです。",
  "version": "1.0.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "popup.html"
  },
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+H",
        "mac": "MacCtrl+Shift+H"
      },
      "description": "Run extension."
    }
  }
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

Chromeで「chrome://extensions」を開き、対象の拡張機能の右下に表示されている更新ボタンを押す。
「再読み込みされました」と表示される。
これで「Ctrl + Shift + H」のショートカットで popup.html の内容がポップアップで表示される。

■アイコンを設定する

今回は 60px×60px のサイズでアイコンを作成。
作成後、16px×16px のサイズで icon/16_16.png に書き出した。

manifest.json
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
{
  "name": "Hello World",
  "description": "これは拡張機能のサンプルです。",
  "version": "1.0.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon/16_16.png"
  },
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+H",
        "mac": "MacCtrl+Shift+H"
      },
      "description": "Run extension."
    }
  }
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

拡張機能を更新すると、アイコンが反映される。

■スクリプトを実行する

manifest.json
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
{
  "name": "Hello World",
  "description": "これは拡張機能のサンプルです。",
  "version": "1.0.0",
  "manifest_version": 3,
  "permissions": ["activeTab", "scripting"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon/16_16.png"
  },
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+H",
        "mac": "MacCtrl+Shift+H"
      },
      "description": "Run extension."
    }
  }
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

popup.html
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
  body {
    width: 100px;
  }
  </style>
</head>
<body>
  <p>ハロー！</p>
  <button id="exec">実行</button>
  <script src="popup.js"></script>
</body>
</html>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

popup.js
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
document.getElementById('exec').addEventListener('click', async () => {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: onRun,
  });
});

function onRun() {
  document.body.style.backgroundColor = '#fcc';
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

拡張機能を更新すると、ポップアップに「実行」ボタンが表示される。
クリックすると、ページの背景色が変わる。

■オプション設定画面を作成する

manifest.json
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
{
  "name": "Hello World",
  "description": "これは拡張機能のサンプルです。",
  "version": "1.0.0",
  "manifest_version": 3,
  "permissions": ["activeTab", "scripting", "storage"],
  "options_page": "options.html",
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon/16_16.png"
  },
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+H",
        "mac": "MacCtrl+Shift+H"
      },
      "description": "Run extension."
    }
  }
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

options.html
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
  .color {
    margin: .5rem 0 1rem;
    padding: .5rem 1rem;
    color: #666666;
    border: 0;
  }
  </style>
</head>
<body>
  <p>オプション</p>
  <div>
    <button class="color" style="background: #fcc">ピンク</button>
    <button class="color" style="background: #cfc">グリーン</button>
    <button class="color" style="background: #ccf">ブルー</button>
  </div>
  <div id="message"></div>
  <script src="options.js"></script>
</body>
</html>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

options.js
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
document.querySelectorAll('.color').forEach((elm) => {
  elm.addEventListener('click', (e) => {
    var options = {
      colorValue: e.target.style.backgroundColor,
      colorName: e.target.innerText
    }
    chrome.storage.sync.set(options);
    document.querySelector('#message').innerText = `色「${options.colorName}」が選択されました。`;
  });
});
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

popup.js
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
document.getElementById('exec').addEventListener('click', async () => {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: onRun,
  });
});

function onRun() {
  chrome.storage.sync.get(null, (options) => {
    document.body.style.backgroundColor = options.colorValue;
  });
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

拡張機能を更新すると、ポップアップに「実行」ボタンが表示される。
クリックすると、ページの背景色が変わる。

※何らかの色を選択するまで色情報が無いので、初期値を持たせておくと良さそう。
Memo

Advertisement
