Vue.jsのv-transitionをちょっと実践的に使ってみた

条件に合わせてCSSを変えたくてTransitionについて調べてみた。

でも、公式ガイドにあるサンプルを見ても今ひとつ理解できなかった。
ボタンを押して表示される、消えるだけなので、どんなときに使ってよいかイマイチわからない。

ということで、もうちょっと実践的なサンプルをつくってみた。

JavaScriptでファイルを出力する（fileSystem APIの代用）

Chrome Extensionsの開発をしていて、ファイルをJSON形式で出力したくていろいろ調べていた。
Chromeにはchrome.fileSystemというAPIがあるが、Chrome Appの場合は使えるが、拡張機能（Extensions）の場合は使えない。

▶ google chrome - How to use file system in extension? - Stack Overflow


ということで、Chrome Extensionsでもできるファイルの出力方法をまとめる。

Chrome ExtensionsでUncaught EvalErrorになったときの対処法

Chrome Extensionsで、ブラウザアクションからローカルのページを表示する機能を作成していた。

そのページには、Vue.jsを使っていたのだが

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".

というエラーが出て、うまく表示されなかった。

そのときの対処法をまとめる。

chrome.runtime.sendMessageでcontent_scriptsとbackground間で通信する方法

photo by gfpeck

Chrome Extensionsをつくっていたところ、same-origin policy（同一生成元ポリシー）に阻まれてしまった。
具体的にいうと、content_scriptsでとあるサイトの情報をIndexedDBに登録して、他のページでその情報を表示するということがしたかった。

いろいろググってみたところ、chrome.runtime.sendMessage, onMessageというものを使えば実現できるかもしれないと気づいた。
※ Chrome Extensions以外ならpostMessageやJSONPがヒントになるかも


前置きが長くなってしまったが、chrome.runtime.sendMessage、chrome.runtime.onMessageを使ってcontent_scripts - background間で通信する方法をまとめる。

【JavaScript】コールバックが終わるまで処理を遅延させる方法

photo by Nicholas D.

自分用に作ったIndexedDBライブラリをテストしようとしたときの話。

以下のような手順で、テストを書いていた。

1. データベースの作成
2. データの登録
3. データの検索
4. 以下略

問題は「2.データの登録」で発生した。
エラーの内容は、「データベースがまだ作成されていません」的なものだった。
それを解消するために、いろいろ調べたのでまとめていく。