chrome拡張機能で背景画像を設定する
はじめに
ソフトとかカスタマイズするときに背景画像を設定とか大好きなので普段使うchromeにも背景画像を設定します。
完成品はこんな感じになります。
見た目
chromeのそのままの文字だと背景画像が暗いときに見づらくなってしまうのでchrome://flags/からダークモードをオンにしておきます。(リンク化してありますがセキュリティ上直接URL欄に打たないと飛べません）明るい画像を背景画像にする場合はダークモードをオンにする必要はないと思います。
chrome拡張機能
色々な記事で解説されているので詳しい説明は省きますが最小構成は「manifest.json」があれば拡張機能として認識されるようです。拡張機能はchrome://extensions/からデベロッパーモードをオンにして「パッケージ化されていない拡張機能を読み込む」からmanifest.jsonとかが入っているファイルを選択してあげることで読み込めます。
manifest.jsonの内容は以下の通りです。
manifest.json
{
"manifest_version": 2,
"name": "background",
"description": "",
"version": "1.0",
"icons": {
"32": "icon_32.png",
"48": "icon_48.png",
"128": "icon_128.png"
},
"content_scripts": [{
"matches": ["http://*/*", "https://*/*" ],
"js": ["jquery-3.5.1.min.js","content_scripts.js"]
}],
"browser_action": {
"default_icon": "icon_32.png",
"default_title": "",
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"background",
"http://*/*",
"https://*/*"
],
"web_accessible_resources": [
"*.png"
]
}
アイコン関連は省略可能です。書いた場合は実際にpngで画像を作成しておく必要があります。ペイントか何かで編集しておきましょう。
重要なのは以下の項目です。
"web_accessible_resources": [
"*.png"
]
これによりローカルで保存してあるpngファイルを読み込むことができます。manifest.jsonで宣言したファイル達をそれぞれ作成していきます。
jQueryはここから取ってきます。
popup.html
<!DOCTYPE HTML> <BODY> <script src="jquery-3.5.1.min.js"></script> <script src="content_scripts.js"></script> </BODY> </HTML>
content_scripts.js
$(document).ready(function() { var image = '<style type="text/css"> body{background-image:url(' image+=chrome.extension.getURL('background.png') image +=');background-attachment: fixed;}</style>' $('head').append($(image)) });
以上を保存して再度読み込ませれば完成です。
解説
やってることは単純です。chromeの検証からソースを見てみると以下のようなCSSが挿入されていることがわかります。
<style type="text/css"> body{ background-image:url(chrome-extension://aghlpijkpccdlefanpfdahlicenikdpd/background.png); background-attachment: fixed; } </style>
CSSでbackground-imageを付けると背景画像を設定することができるのでJavascriptを利用してこれを挿入しているわけです。 ローカル画像を読み込むには「chrome.extension.getURL('パス')」と記述する必要があります。また、ダークモード限定ですが画像の置き方を指定する「background-attachment:」はfixedで固定しておかないとダークモードの反転対象になって白くなるという悲惨なことが起きます。
popup.htmlには何も書いてないので複数画像を管理したり画像処理して明るさを暗くしたりといった機能を付けるのもありかもしれませんね。
