盆栽

金令木の記録ページ

拡張への道#5

拡張を作る上でのアイデア書き（2017/10/10現在）

宗教芸術に共通するもの

光

後光

空

花

音楽

華やか

動き

緩やか

神を感じるchrome拡張に必要と思われる要素

光

検索ボタンが光る

後光エフェクト

検索するごとに（特定のコマンドを入れるごとに後光がさす）

音

検索する際に音がなる

ページが切り替わった際に音がなる

動き

ウィンドウ立ち上がり時にゆっくり立ち上がるエフェクト

画面

背景画像が空になる

拡張への道＃4

拡張を作る上でのアイデア書き（2017/10/06現在）

 

宗教芸術に共通するもの

  • 光
    • 後光
  • 空
  • 花
  • 音楽
    • 華やか
  • 動き
    • 緩やか



神を感じるchrome拡張に必要と思われる要素

  • 光
    • 検索ボタンが光る
    • 後光エフェクト
  • 音
    • 検索する際に音がなる
    • ページが切り替わった際に音がなる
  • 動き
    • ウィンドウ立ち上がり時にゆっくり立ち上がるエフェクト
  • 画面
    • 背景画像が空になる

 

もう少し突き詰めようと思う

拡張への道＃3

昨日の拡張

「アイコンを押すとサイト背景が緑になって音が鳴る」

 

manifest.json

{
"name":"My practice Extention 02",
"version": "0.1",
"manifest_version":2,

"description":"dotinstallの背景色を変える",

"permissions":[
"tabs","http://*/*","https://*/*"
],

"background":{
"scripts":["background.js"]
},

"browser_action":{
"default_icon":"iconkami.png",
"default_title":"My Second Extension"
}

}

 

background.js

 

chrome.browserAction.onClicked.addListener(function() {
chrome.tabs.executeScript(null, {
"code": "document.body.style.backgroundColor='green'"

});

var myAudio = new Audio(); // create the audio object
myAudio.src = "nc87906.mp3"; // assign the audio file to its src
myAudio.play(); // play the music


});

 

本日の拡張への道

 

背景色は変えられたので次は画像を指定して敷き詰めようとした

フリー素材のラーメンの画像（jpeg）をファイルに入れ

"code": "document.body.backgroundImage='rrr.jpg'"　　に書き換え

この時点でサイトの背景に変化は無いが音は鳴る状態

画像を敷き詰める命令　"background-repeat: repeat"　を

入れた途端に反応しなくなった

 

明日へ続く

 

参考サイト

background-repeat－スタイルシートリファレンス

スタイルシート［CSS］/ページ全般/背景画像の並び方を指定する - TAG index