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