【Chrome拡張】特定サイトの背景を虎柄ストライプに変更する

前置き

システム開発においてヒューマンエラーとかってのは切っても切れないもので。
検証用に画面操作したらそれが本番環境だった、何てこともよくある話じゃないですか。
（あまりあっちゃいけないんだけど…。）
で、僕の環境だと検証環境の背景色を変えるって事はやってるんですけどそれでも事故が起きてしまったわけで、
もういっそ「本番環境をがっつり警告カラーに変えてしまえればいいのに！」って思ったのでアドオンで対応することに。

フォルダ構成

ProductBgChange
　├manifest.json
　└style.css

んー、シンプル！！

ファイル内容

manifest.json

{
  "name": "ProductBgChange",
  "version": "0.0.1",
  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": ["URL1", "URL2"],
      "css": ["style.css"]
    }
  ]
}

cssを指定するだけの簡単な記述。
適用する対象のURLはカンマ区切りで列挙できます。
ここ指定しないと全てのサイトに適用されてしまうので指定必須です。
nameとかversionも、無いとアドオン追加時にはじかれるので適当につけといてください。（適当）

style.css

body {
background-image: linear-gradient(
	-45deg,
	#ffff00 25%,
	#000000 25%,
	#000000 50%,
	#ffff00 50%,
	#ffff00 75%,
	#000000 75%,
	#000000
)  !important;
background-size: 40px 40px !important;
background-attachment: fixed !important;
}

bodyのbackground-imageをlinear-gradientで指定することでグラデーション指定し、
「-45deg」で斜め45度の傾き
次行以降は2つの色を交互に指定することでストライプ柄を描画しています。
参考サイト：
on-ze.com

大抵のサイトは既にcss指定されてるので、強制的に適用するよう「!important」指定もしてます。

適用イメージ

補足

自作のアドオンはグループポリシーエディタを使ってChrome用のテンプレを追加し、ホワイトリストに追加することで
初めて使えるようになります。
そのお話はまた別の機会にでも…。

雑記

これを適用した職場のオジサマが「これ巨人ファンから怒られるヤツ。12球団分作らないと！」って仰っていたようですが、
そういうアレじゃないからｗｗｗｗｗｗ