Chrome拡張（4）特定のページで背景画像を変更する

今後CSSのプロパティ触ったりするのを簡単に書けたら良いと思ったのでjQueryを読み込んで使うようにした。今後使用する画像が増えてきた場合manifest.jsonのweb_accessible_resourcesに列記するのも大変なので、画像（cat.jpg）はimagesフォルダを作ってそこに置いた。

記述で引っかかるとしたら変数で取得したファイルパスを背景画像で指定するところの書き方。

• manifest.json

{
  "name" : "Google Extension2",
  "version" : "0.1",
  "manifest_version" : 2,
  "description" : "Googleの検索結果のページでCSSとかJS実行する拡張",
  "content_scripts" : [{
    "matches" : ["http://www.google.co.jp/*","https://www.google.co.jp/*"],
    "js" : ["jquery-3.2.1.min.js","script.js"]
  }],
  "web_accessible_resources": ["images/*"]
}

• script.js

//jqueryをダウンロードして配置、manifest.jsonに追記しておく
$(function(){
  var imgURL = chrome.extension.getURL("images/cat.jpg");
  $('body').css('background','url('+imgURL+')');
  $('a').css('color',"#ffffff");
  console.log("execute script.js");
});

JS、CSSでの制御の方法も分かったので、今後はイベントまわり（キーボード入力）などについて調べるつもり。

画像は著作権周りでセーフな以下サイトで見つけたものをつかった。

lorempixel.com