Googleの拡張機能を作成しています。
既存のwebサイトからフォームの値を取得しポップアップ側のinputのvalueに値をセットする機能を作りたいのですが、うまくいきません。
やりたいこと
拡張機能ポップアップのhtmlでデータを読み込むというボタンを押すと開いているページのwebサイトのフォームから値を取得しポップアップ側のフォーム内に値をセットしたい。
form.htmlのDOM要素が取得できていないことが問題だと検討はつけているのですが、DOMの取得方法がわからず質問させていただきました。
javascript
1// main.js 2$('#fetch').on('click', () => { 3 const lastName_html = $('#lastName_ex'); 4 const firstName_html = $('#firstName_ex'); 5 6 chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => { 7 chrome.tabs.sendMessage( 8 tabs[0].id, 9 { 10 click: "fetch", 11 lastName: lastName_html, 12 firstName: firstName_html, 13 }, 14 (msg) => { 15 console.log("result message:", msg); 16 } 17 ); 18 }); 19});
html
1 <!-- form.html --> 2 <div class="container"> 3 <h5 class="my-5">必要事項を入力してください</h5> 4 <form action="#" method="post"> 5 <div class="form-group"> 6 <label for="lastName_ex">姓</label> 7 <input class="form-control" type="text" name="name" id="lastName_ex"> 8 </div> 9 <div class="form-group"> 10 <label for="firstName_ex">名</label> 11 <input class="form-control" type="text" name="name" id="firstName_ex"> 12 </div> 13 </form> 14 </div> 15 16 <div> 17 <button class="my-5 btn btn-success" id="fetch">データを読み込む</button> 18 </div>
javascript
1// content.js 2chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { 3 if(msg.click === 'fetch') { 4 let confirm = window.confirm("登録済みのデータを読み込みます。よろしいですか?"); 5 if (confirm) { 6 // 値を取得したい開いているwebページにはid="lastName"と"firstName"がある。 7 8 msg.lastName.value = $('#lastName').val(); 9 msg.firstName.value = $('#firstName').val(); 10 // これでフォームに値が入るかと思ったがうまくいかなかった。console.logでmsgを見ると値は登録できているがフォームにはなにも表示されない 11 } 12 } 13});
json
1{ 2 "manifest_version": 2, 3 "name": "fuga", 4 "version": "1.0.0", 5 "description": "hoge", 6 "permissions": [ 7 "activeTab", 8 "declarativeContent", 9 "storage", 10 "unlimitedStorage", 11 "tabs" 12 ], 13 "web_accessible_resources": ["form.html"], 14 "content_scripts": [{ 15 "matches": ["http://*/*", "https://*/*"], 16 "js": [ 17 "jquery-3.5.1.min.js", 18 "content.js" 19 ], 20 "run_at": "document_end" 21 }], 22 "browser_action": { 23 "default_popup": "form.html" 24 }, 25 "content_security_policy": "script-src 'self' https://code.jquery.com/jquery-3.5.1.min.js; object-src 'self'" 26} 27
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/10/15 14:27 編集