Edited at

chrome extensionでワンクリックでおしゃれな音楽が流れるボタンを作りました

More than 1 year has passed since last update.

こんにちは、エイチーム引越し侍の中川です。

chromeのextensionでおしゃれな音楽がワンクリックで流れるボタンを作成しました。


chrome extensionを作るのは簡単!

[chrome extension 開発]

・・・とかでググると関連記事がたくさん出てきます。

html,js,cssできる人ならほんとに、数分でできます。


制作物

ワンクリックでおしゃれな音楽が流れだすボタンを作りました。


おしゃれな音楽の手配

おしゃれといったら、ボサノバでしょう。知らんけど。

というわけでyoutubeで「ボサノバ」と検索して出てきた動画のURLをコピー。

https://youtu.be/3MKPVEO0MvQ


manifest.json

{

"manifest_version": 2,
"name": "bosa-player",
"description": "ワンクリックでおしゃれなボサノバが流れます",
"version": "0.1",

"browser_action": {
"default_icon": "icon.png",
"default_title": "bosa-player",
"default_popup": "popup.html"
},
"background": {
"scripts": [
"jquery.js",
]
}
}

あ、jquery入れてるけど結局使わなかった。jsでなんか書きたいときは、

上記scriptsの中に書けば実行されます。

iconは取り急ぎ、Youtubeのアイコンぽいものをマウスで書きました(笑)

これ→icon.png


ボタンを押したときに開くhtml

<!DOCTYPE html>

<html lang="ja">
<head>

<meta charset="utf-8">

</head>
<body style='width:100px;'>
<iframe id="ytplayer" type="text/html" width="100" height="80"
src="http://www.youtube.com/embed/3MKPVEO0MvQ?autoplay=1&origin=http://example.com"
frameborder="0"/>

https://www.youtube.com/watch?v=3MKPVEO0MvQ

https://youtu.be/3MKPVEO0MvQ
</body>
</html>

manifestで定義したpopup.htmlという名前で保存します。

youtubeをiframeで再生します。

公式に説明があります。

https://developers.google.com/youtube/player_parameters?hl=ja

autoplay=1にして、押したら再生されるようにしましょう

サイズは小さめがおしゃれかなと思って100 x 80 としました


検証

chrome://extensions/

にアクセスして、いざ登録!!

思惑どおり、ボタンを押したらボサノバが流れ始めました!

text3009 - コピー.png

あとはランダム再生にするなり、お気に入りのリストを流すなり、

いい感じにカスタマイズできればと思います。