みなさん、こんにちは。マイチョイスで自分を変化させ続ける周です。
Chromeをはじめとするブラウザはユーザーが選んでインストールできる「拡張機能」が用意されています。指定の言語に翻訳できるものや、文字を読み上げることができるものなど、自分が欲しい拡張機能を検索してワンクリックで利用できます。その便利な「拡張機能」は個人でも作成して読み込むことが可能です。
今回は、ページの背景色を自由に変更できる拡張機能の作り方を紹介します。
まずは拡張機能用のフォルダを作成し、中にmanifest.jsonファイルを作ります。以下のように拡張機能の基本情報を定義します。
{
"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ファイルを作成します。
<!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ファイルに送信します。
// ユーザーがカラーを選んだ際に発火する
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タグの背景色として設定します。
// ユーザーが選んだカラー情報を受け取る
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の知識があれば、自分で拡張機能を開発することができます。
みなさんもマイチョイスで独自な拡張機能を作ってみましょう。
