盆栽

金令木の記録ページ

拡張への道#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

ステッカー

学祭で販売するステッカーを制作しました

「水没iPhobeおくやみステッカー」

f:id:coralpunk:20170927172944j:plain

何種類もの新聞のお悔やみ欄を参考にしデザインを作り上げていきました

水没させた人は誰でも使えるよう名前が書き込めるようになってます

販売価格未定

全世界のiPhoneを水没させた人に捧ぐ

HTML#3

ドットインストールhtml講座を半分進めたところで 思いついたアイデアを形にしたいと思ったので実験的に作ってみた

f:id:coralpunk:20170925003428p:plain

ヘッターにwebサイトのタイトル・ フッターに著作権的なやつ・ 本文に検索埋め込みタイムラインの埋め込み をしてみた

ハッシュタグ自体誰にも呟かれていないものなので真っ白になった

埋め込みタイムラインが面白い

参考サイト

ninoya.co.jp

heo.jp