現在、新しいタブ(newtab)を拡張するChrome拡張機能を作成しています。
質問したい内容は エラー処理に開かれている新しいタブにバッググラウンドページからのメッセージを受信し、ページにエラーメッセージを描画する処理です。メッセージを受信するまでは確認が取れているのですが、Reactはまだまだ勉強中なものでどのように書けばよいかわかりません。
初歩的な質問でしたら申し訳ないのですが、よろしくお願いいたします。
処理の流れ(エラーパターン)
- 新しいタブを開く
- 新しいタブからバッググラウンドページヘメッセージ
- (バッググラウンド)メッセージ受信
- (バッググラウンド)処理でエラーを発生
- (バッググラウンド)エラーを新しいタブへエラーメッセージ
- 新しいタブでメッセージ受信
--- ここまでデバッグ確認済み ---
7. エラーを画面に描画する (この方法がわからない)
以下にコードを記載します
index.js
Javascript
1ReactDOM.render( < NewTab / > , document.getElementById('root')); 2 3/*受信処理*/ 4chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) { 5 if (message["type"] == MESSAGE_TYPE.EVERNOTE_LOGIN_ERROR) { 6 // $('#evernote-status').text("Evernoteにログインしてください"); 7 console.log(message); // エラーメッセージ受信、確認済み 8 } else { 9 console.log(message); 10 } 11});
JavaScript
1/* 2 * どのようなコードを書けば良い??? 3 */ 4function NewTab() { 5 6 7 return ( 8 <div className="App"> 9 <body className="App-body"> 10 <div> 11 <button onClick={() => { loginWithEvernote(); }}><h1>Evernote Login</h1></button> 12 </div> 13 <div> 14 /* Evernoteにログインしていない状態でノートブックを取得する(エラー処理) */ 15 <button onClick={() => { storeBooks(); } }><h1>Store Books</h1></button> 16 </div> 17 </body> 18 </div> 19 ); 20}
その他、不足な情報などありましたら適宜追加していきますので、どうぞよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/11 08:05