みなさん、こんにちは。マイチョイスで自分を変化させ続ける周です。
Chromeをはじめとするブラウザはユーザーが選んでインストールできる「拡張機能」が用意されています。指定の言語に翻訳できるものや、文字を読み上げることができるものなど、自分が欲しい拡張機能を検索してワンクリックで利用できます。その便利な「拡張機能」は個人でも作成して読み込むことが可能です。
今回は、ページの背景色を自由に変更できる拡張機能の作り方を紹介します。
まずは拡張機能用のフォルダを作成し、中にmanifest.jsonファイルを作ります。以下のように拡張機能の基本情報を定義します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
{ "manifest_version": 3, "name": "Change Background Color ページ背景変換ツール", "version": "1.0.0", "description": "ページの背景色を自由に変更できる拡張機能です。", // 拡張機能のモーダルに使うUIファイルを定義する "action": { "default_popup": "index.html" }, // 拡張機能のロゴを定義する "icons": { "16": "icon16.png", "48": "icon48.png", "128": "icon128.png" } // 仕様に従って、拡張機能にアクセス許可を要求する "permissions": ["activeTab"], // 閲覧ページを操作するJSファイルを定義する "content_scripts": [ { "matches": ["<all_urls>"], "js": ["change-back-color.js"] } ] } |
拡張機能のロゴを16px、48px、128pxの3つのサイズごとに作成し、拡張機能用のフォルダに格納します。
まず、拡張機能のタブを押した後に表示されるコントロール用のモーダルを作成します。
HTMLとCSSを使って構築します。inputのcolorタイプで、ユーザーに好きな色をピックアップしてもらいます。index.htmlファイルを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> body { width: 300px; height: 200px; margin: 0; padding: 10px; font-family: Arial, sans-serif; } </style> </head> <body> <h1>ページ背景変換ツール</h1> <p>好きな色を選んでください。</p> <input type="color" id="page-background-color"> <script src="chrome.js"></script> </body> </html> |
HTMLで読み込んでいるchrome.jsファイルを使って、ユーザーが選んだ色を取得します。
chrome.jsはindex.html対して動作するJSファイルです。
カラーデータを現在閲覧しているページを制御できるJSファイルに送信します。
|
1 2 3 4 5 6 |
// ユーザーがカラーを選んだ際に発火する document.getElementById("page-background-color").addEventListener('change', function() { chrome.tabs.query({active:true, currentWindow:true}, (tabs) => { chrome.tabs.sendMessage(tabs[0].id, {action: 'changeBackgroundColor', value: document.getElementById("page-color").value}); }); }); |
閲覧しているページを制御するためのchange-back-color.jsを作成します。
ユーザーが選んだカラーを受け取り、現在のページのbodyタグの背景色として設定します。
|
1 2 3 4 5 6 7 8 9 10 |
// ユーザーが選んだカラー情報を受け取る chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { // 動作したいアクション名と一致する場合 if (request.action === 'changeBackgroundColor') { // カラーコードを取得する const colorCode = request.value; // カラーコードをbodyの背景色として指定する document.body.style.background = colorCode; } }); |
最後は作成した拡張機能をChromeに読み込みます。
まず、Chromeの設定メニューから「拡張機能」の「拡張機能を管理」をクリックします。
そして、右上にある開発用の「デベロッパーモード」をオンにします。
「パッケージ化されていない拡張機能を読み込む」ボタンをクリックします。拡張機能のディレクトリーへ移動し、「選択」ボタンをクリックします。
以上で拡張機能が使えるようになります。早速試してみると、下記のように…
HTMLとJavaScriptの知識があれば、自分で拡張機能を開発することができます。
みなさんもマイチョイスで独自な拡張機能を作ってみましょう。
