質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Chrome extension

Chrome拡張機能

Q&A

解決済

1回答

1377閲覧

【chrome extension 拡張 開発】ポップアップのunloadイベントで処理が動作しません。

ttt004

総合スコア8

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Chrome extension

Chrome拡張機能

0グッド

0クリップ

投稿2018/05/06 17:53

編集2018/05/07 14:00

前提・実現したいこと

chrome拡張 を作成しています。
ポップアップのクローズ時にchrome.storage.locale.setを行い、ポップアップに入力中の情報を保存したいのですが、想定通り動作しません。
※ツールバーのアイコンを押下したり、ポップアップ外をクリックしてクローズしたりした場合も補足したいと考えています。

以下のソースコードでは実現不可能でしょうか。
また、上記を実現するための代替案があればご教示下さい。

該当のソースコード

js

1 2 window.addEventListener('unload', test); 3 document.addEventListener('unload', test); 4 window.unload = test; 5 document.unload = test; 6 7// ポップアップのクローズ時に以下のメソッドが呼ばれ、testというキーの情報がchrome.storageに保存されることを想定していますが、何も保存されません。 8function test() { 9 var test = { 10 test: {aaa: 111} 11 }; 12 chrome.storage.local.set(test, function() {}); 13}

上記スクリプトは以下のようにpopup.htmlに直接読み込んでいるjsファイル内に記述しています。
※別の関数は動作していることを確認しているため、このjsファイル自体が読み込まれていないという可能性はないです。

html

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

manifest.json 抜粋

json

1 "browser_action": { 2 "default_icon": "icon.png", 3 "default_popup": "popup.html" 4 }, 5 "permissions": [ 6 "storage" 7 ], 8 "content_scripts": [ 9 { 10 "matches": ["<all_urls>"], 11 "js": ["js/libs/jquery-2.2.2.min.js"], 12 "run_at": "document_idle" 13 } 14 ]

試したこと

  • ネットの情報より、unloadならイベントを捕捉できるとありましたが想定通り動作せず。
  • 上記4ケース試してみましたが、いずれも。。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2018/05/07 01:07

manifestと読み込み部分はどのようになっているでしょうか?
m.ts10806

2018/05/07 01:12

細かいですが、補足→捕捉 ですね。
ttt004

2018/05/07 08:28

x_x さん 質問を修正しました。記載の通りmanifest内に関連する記述はありません。
ttt004

2018/05/07 08:28

mts10806 さん ありがとうございます。そのとおりですね。^ ^
x_x

2018/05/07 08:37

ああ、わかりにくかったですね。読み込み部分というのはJavaScriptではなく、ストレージ読み込みのことです
x_x

2018/05/07 08:39

manifestにもストレージ許可箇所があるのではないかと思って聞いています。
ttt004

2018/05/07 08:56

あ、なるほど。質問から読み取れないですね。実はストレージ自体はunload時以外にも使用する機会があり、そこでの動作は想定通り保存・取得されることを確認しています。つまり、unloadイベントが呼ばれていない(?)というところまでは切り分け済みとなっています。
x_x

2018/05/07 09:02

manifestが提示されないと構造がわからないのですが、ストレージはbackgroundで読み書きしているのでしょうか?
ttt004

2018/05/07 14:02

いえ、当拡張においてbackgroundは使用しておりません。manifest.jsonの一部を記載しました。※他、name,version,manifest_version,description,iconsは割愛します。
guest

回答1

0

ベストアンサー

試してみましたら、確かにできませんでしたので、
バックグランドページで保存するように書き換えると、私の環境ではうまくいきました。
(すみませんが、なぜうまく行ったのか原理まではわかっていません。)

イメージ説明

自分の書いたコードは以下です。

  • manifest.json

json

1{ 2 "manifest_version":2, 3 "name":"テスト", 4 "version":"1.0", 5 "browser_action":{ 6 "default_icon": "icon.png", 7 "default_popup":"popup.html" 8 }, 9 "background":{ 10 "scripts": ["background.js"] 11 }, 12 "permissions": [ 13 "storage" 14 ] 15}

※background.jsは空のファイルだけ用意すればOK

  • popup.html

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 <style> 7 body { 8 width:300px; 9 height: 300px; 10 } 11 </style> 12</head> 13<body> 14 <h1>テスト</h1> 15 <script src="popup.js"></script> 16</body> 17</html>
  • popup.js

javascript

1var background = chrome.extension.getBackgroundPage(); 2chrome.storage.local.get(['test'], function(result) { 3 background.console.log(result.test); 4}); 5 6window.addEventListener("unload", function (event) { 7 var test = { 8 test: {aaa: new Date().toLocaleString()} 9 }; 10 background.chrome.storage.local.set(test,function(){}); 11});

投稿2018/05/12 08:23

saitouakihiro

総合スコア85

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ttt004

2018/05/15 03:48

なるほどー。 unloadでのstorageへの操作はbackgroundでしかできないという制約があるのでしょか。 ひとまず自分の環境でも試してみます。 ご回答ありがとうございます!
karamarimo

2018/05/15 04:26

できないのはおそらく、storage.local.set が非同期であるために、popupが閉じられる時に処理が中断されてしまうからではないかと思います。
ttt004

2018/05/18 03:12

あー、なるほどなるほど。 非同期ってことを考えると確かにご説明いただいている動作に納得いきますね。 ご回答ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問