web extensions 作ってみた。

how to use lastfm extension

これ以上web extensions勉強しても知見が得られそうにないので実際に作ってみた。

generator-web-extension使用。

インストール方法はコチラ

やりたいことはボタン押したら選択範囲を検知してその選択範囲がアーティストならlast.fmAPIを利用して

似たアーティストを返すというもの。

ソースはこっち

github.com

やっぱ実際に書いてみるのが非常にわかりやすくてよかった。

つまづいたところ、というかなおしたいところ

popup.js

import LastFM from 'last-fm'

browser.tabs.query({
    currentWindow: true,
    active: true
}, function (tab) {
    browser.tabs.sendMessage(tab[0].id, {
        text: ''
    }).then(function (response) {
            const title = response.title
            const str = response.str
            document.getElementById('title').innerText = `you have selected ${str}`
            searchSimilarArtist(str)

        }

    )
})

function searchSimilarArtist(artist) {
    //authentificate
    const auth = new LastFM('6365215872671c325787a220ef38ae1c')
    // for debug:console.log(artist)
    //return artist similar to given name
    const data = {
        isFound: false,
        result: "ea"
    }
    auth.artistSimilar({
        name: artist
    }, (err, data) => {
        if (err) {
            data.isFound = false
            data.result = err
            console.log(data)
        } else {
            data.isFound = true
            data.result = data
            //for debug:console.log(data)
            let html = ""
            for (var i = 0; i < 10; i++) {
                html += `<br /><div>${data.artist[i].name}</div>`
            }
            console.log(html)
            document.getElementById('artist').innerHTML = html
        }
    })
}

この中のfunction searchSimilarArtistのauth.artistSimilar関数のコールバック処理

ここで全部分けてるからそれを別の処理に移したいのだけどlet html ~の部分をdataをreturn するまでのfunction にして以降にdataをレンダリングfunctionに切り分けたいのだがうまくいかない。

dead objectがどうのって怒られた。

多分非同期的にプログラムが進んでてdataが返ってくる前に次に進んじゃっているのが原因のはず。

うまくレンダリングできるようにならないかな。

これからやりたいこと：

これをreduxのフローに沿って書き直してみたい。
うまくフローに乗せれたら次は色々（アーティストの画像とか）も表示できるようにしたい。

さてうまくいくかな

Yado_tech

旅館＋ITとはなんぞ

web extensions 作ってみた。