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

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

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

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

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

Q&A

1回答

1213閲覧

拡張機能 ポップアップしたHTMLのフォームのvalueに値を渡したい

hello_space

総合スコア24

JavaScript

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

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

0グッド

0クリップ

投稿2020/10/13 13:27

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

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

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

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

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

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

guest

回答1

0

tabs.executeScript()
Chrome拡張機能と表示されているページとは空間がちがいます。
よって「tabs.executeScript()」を使い値を取得する必要があります。

コンテンツスクリプト

内容に関してはメッセージの送受信で行います。
chrome 拡張機能でメッセージ送るとき

投稿2020/10/13 14:32

kuma_kuma_

総合スコア2506

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

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

hello_space

2020/10/15 14:27 編集

ご回答いただきありがとうございます。 申し訳ありません。拡張機能側のhtmlのDOMをどのように取得し、値を入れれば良いのかがいまいち理解できていません。 もし可能でしたらサンプルでも良いのでコードを書いていただけないでしょうか?よろしくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.47%

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

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

質問する

関連した質問