Help us understand the problem. What is going on with this article?

ChromeExtensionのBrowser actions作ってみてはまったこと

More than 3 years have passed since last update.

概要

ブラウザの右上に表示するタイプのChrome拡張を作ろうとして、デバッグしづらくていろいろハマったのでメモ

前置き

読者としてはこれからChrome拡張作ってみよう、もしくは作り出してみたけど動かない!って方を想定
開発の基礎はあまり説明しないので各自調べて下さい。
http://liginc.co.jp/web/tool/browser/163575

環境

Chrome バージョン 50.0.2661.75 (64-bit)
Mac OS X 10.11.1

Browser actionsでJSが動かない

Browser actionsって…?

ブラウザのタブ右上に出る各Extensionのアイコンメニューのこと
スクリーンショット_2016-04-19_21_33_13_.jpg

manifest.jsonというファイルでbrowser_actionを指定すると表示できます

JSの読み込み方

<script>タグで読み込みするのですが、下記の書き方はエラーでJS動きませんでした

動かないパターン1

<script>
    alert('hoge');
</script>

動かないパターン2

<script src="popup.js"/>

動かないパターン1はcontent security policyにひっかかるそうです。
参考 : http://oxynotes.com/?p=8895
Chrome ExtensionにおいてはインラインJavaScriptは一切動きません。
とりあえず動かそうと思ったら全く動かず、browser_actionはconsoleにエラー吐いたりもしないのでなかなか分からなかったです
動かないパターン2はなんでだか分かりません。動くやつと動かないやつ比べたらこれが原因でした

これなら動く

<script src="popup.js"></script>

JSのデバッグができない

これいまだに解決できてないんですが、browser_actionのdefault_popup(右上に出る各Extensionのアイコンメニュー押した時出るhtml)から読み込んだJSは、console.logがそのままだとどこにも出力されません。
なのでsyntax error等起こっているとJSが全く動かずエラーも出ません。

解決法1

default_popup上で右クリック→検証でdev toolsを開き、consoleを見る
操作がめんどい

解決法2

alertは動くのでconsole.logの代わりに使う
alert仕込むのがめんどい

解決法3

上記のめんどくささを解決する方法知ってる方いたらコメント頂けるとありがたいです

値の保存ができない

右上メニュー(browser_action)とそれ以外(例:content_scripts:Webページに対する拡張、各ページ読み込み時に表示を変えたりするやつ)との連携は基本chrome.extension.sendMessageなどを使いやりとりします。

簡易的なデータの保存が自分が調べた結果ではなかったです。
下記ダメだった手順

localStorage

参考:http://ota42y.com/blog/2014/08/17/local-storage/

manifest.jsonに

"permissions": [
    "storage",
    "unlimitedStorage"
  ]

とかを足して、

var localStorage['data'] = 'aaa'; //データ保存
var data = localStorage['data']; //データ取得

browser_action内default_popup内で保存したデータをcontent_scriptsに設定しているindex.js(webページ読み込み時に呼ばれるやつ)から取得しようとしたりしたけど、取得できない

localStorageの仕様

Content Script(insert_hello.js)内でもwindow.localStorageにアクセスできます。しかし、設定画面で設定した値は、そこにはありません。
window.localStorageは、各ページ毎に持たれるものだからです。
extension全体で共通のwindow.localStrageは、Background Pageにあるものになります。

引用 : http://memememomo.hatenablog.com/entry/20100519/1274220602
なので値はBackground Pageで管理する必要が出てきます。

File API

公式サンプル : https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/filesystem-access
File APIを使うにはmanifest.jsonで

manifest.jsonの一部
"permissions": [
    {"fileSystem": ["write", "retainEntries", "directory"]},
    "storage"
  ],

fileSystemパーミッションが必要
fileSystemのパーミッションを取得するには

manifest.jsonの一部
"app": {
    "background": {
      "scripts": ["background.js"]
    }
  },

のように"app"として宣言が必要。
appはChromeでそれ用に別windowを開くものなので今回の目的にそぐわないものでした。
また、"app"キーの宣言と"browser_action","content_scripts"の宣言は競合するので、どちらかしか指定できません

ダメだった書き方

manifest.jsonの一部
"permissions": [
    {"fileSystem": ["write", "retainEntries", "directory"]},
    "storage"
  ],
"browser_action": {
    "default_icon": "l_2573424_12101819053e50d7315fd8917905ce46.png"
    ,"default_title": "SpeedCapture"
    ,"default_popup": "popup.html"
  }

appとして宣言してないと下記のようなエラーが出ます
'fileSystem' is only allowed for packaged apps, but this is a extension.

以上

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away