###フォームに落とす方法
質問内容
GASを使わずにextension上でページ情報取得→コメント入力→送信は可能でしょうか?
また不可能な場合どのような流れでこのシステムは作成できるでしょうか?
ベースしかない為ソース等もありませんが、アドバイス、また参考になりそうな記事ありましたらご教授お願いいいたします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/22 04:41
2018/08/22 04:43
2018/08/22 04:50
回答2件
0
できるだけ修正が簡単になるようにしてみました。
cssを書くのがめんどくさかったのでスタイルはえげつなく雑で申し訳ないですorz
インラインになっているところもありますので、
うまく書き換えて使っていただければ幸いです
フォルダ構造
root | manifest.json | |
popup | popup.html | |
popup_common.js | ||
sender | sender.html | |
sender_common.js |
※アルファベット順のため、順番が異なります。
manifest.json
json
1{ 2 "manifest_version": 2, 3 "name": "XXXXXXXXXX", 4 "version": "0.0.0", 5 "description": "XXXXXXXXXX", 6 "browser_action": { 7 "default_title": "XXXXXXXXXX", 8 "default_popup": "popup/popup.html" 9 }, 10 "permissions": [ 11 "tabs", 12 "http://*.google.com/*", 13 "https://*.google.com/*" 14 ] 15}
popup/popup.html
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>XXXXXXXXXX</title> 6 <script src="./popup_common.js" async defer></script> 7</head> 8<body> 9 <form name="form" action="../sender/sender.html" method="get"> 10 <input type="text" name="entry.0000000000" id="js_title" value="" placeholder="タイトル"><br> 11 <input type="text" name="entry.0000000000" id="js_url" value="" placeholder="URL"><br> 12 <textarea name="entry.0000000000" cols="30" rows="10" placeholder="コメント"></textarea> 13 14 <input type="submit" value="Submit"> 15 </form> 16</body> 17</html>
popup/popup_common.js
javascript
1chrome.tabs.getSelected(null, function(tab){ 2 document.getElementById("js_title").value = tab.title; 3 document.getElementById("js_url") .value = tab.url; 4});
sender/sender.html
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>XXXXXXXXXX</title> 6 <script src="./sender_common.js" async defer></script> 7</head> 8<body> 9 <iframe id="js_sendData" width="0" height="0" style="display: none;"></iframe> 10 <p id="status">送信しています...</p> 11</body> 12</html>
sender/sender_common.js
javascript
1(function(){ 2 let query = location.search; 3 let url = "https://docs.google.com/forms/d/e/XXXXXXXXXXXXXXXXXXXX/formResponse"; 4 5 let targetURL = url + query; 6 7 document.getElementById("js_sendData").src = targetURL; 8 9 document.getElementById("status").innerText = "送信が完了しました"; 10})();
意味の分からないところがあればコメントください。
投稿2018/08/22 07:20
総合スコア274
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/24 02:15
2018/08/24 03:07
2018/08/24 03:20
2018/08/24 03:30
2018/08/24 04:41
2018/08/24 04:45
2018/08/24 07:53
2018/08/24 23:21
2018/08/24 23:24
2018/08/27 00:23
2018/08/27 00:24
2018/08/27 00:29
2018/08/27 00:34
2018/08/27 00:35
2018/08/27 00:36
2018/08/27 00:37
2018/08/27 00:40
2018/08/27 00:45
2018/08/27 00:48
2018/08/27 00:51
2018/08/27 00:51
2018/08/27 00:58 編集
2018/08/27 01:02
2018/08/27 01:57
2018/08/27 01:58
2018/08/27 02:00
2018/08/27 02:02
2018/08/27 02:09
2018/08/27 02:15
2018/08/27 02:17
2018/08/27 02:22
2018/08/27 04:16
2018/08/28 03:25
2018/08/30 06:05
0
ベストアンサー
フォルダ構造
root | manifest.json | |
background.js | ||
popupWindow | index.html | |
common.js | ||
style.css |
※アルファベット順のため、順番が異なります。
manifest.json
json
1{ 2 "manifest_version": 2, 3 "name": "AAAAAAAAAA", 4 "version": "0.0.0", 5 "description": "AAAAAAAAAA", 6 "background": { 7 "scripts": ["background.js"], 8 "persistent": false 9 }, 10 "browser_action": { 11 "default_title": "AAAAAAAAAA" 12 }, 13 "permissions": [ 14 "tabs", 15 "http://*.google.com/*", 16 "https://*.google.com/*" 17 ] 18}
background.js
javascript
1chrome.browserAction.onClicked.addListener((tab) => { 2 chrome.runtime.sendMessage({ 3 message: "popupWindow_closeWindow" 4 }); 5 6 const w = 520; 7 const h = 700; 8 const s_w = window.parent.screen.width; 9 const s_h = window.parent.screen.height; 10 11 window.open("./popupWindow/index.html", "_blank", `width=${w},height=${h},left=${(s_w - w) / 2},top=${(s_h - h) / 2}`); 12});
popupWindow/index.html
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Google Form</title> 6 <link rel="stylesheet" href="style.css"> 7 <script src="common.js" async defer></script> 8</head> 9<body> 10 <iframe frameborder="0" id="js__iframeForm"></iframe> 11</body> 12</html>
popupWindow/common.js
javascript
1const getQueryString = function getQueryString(obj){ 2 let result = ""; 3 4 for(let key in obj){ 5 result += `&${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`; 6 } 7 8 return `?${result.slice(1)}`; 9} 10 11chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => { 12 if(request.message === "popupWindow_closeWindow"){ 13 window.close(); 14 } 15}); 16 17chrome.tabs.query({ 18 active: true 19}, (arr_tab) => { 20 console.log(arr_tab); 21 22 let title = arr_tab[0].title; 23 let url = arr_tab[0].url; 24 25 const iframe = document.getElementById("js__iframeForm"); 26 27 iframe.src = `https://docs.google.com/forms/d/e/0123456789abcdef/viewform${getQueryString({ 28 "entry.000000000": title, 29 "entry.000000000": url 30 })}`; 31});
popupWindow/style.css
css
1html, 2body{ 3 border: 0; 4 height: 100%; 5 margin: 0; 6 padding: 0; 7 width: 100%; 8} 9 10iframe{ 11 border: 0; 12 height: calc(100% - 3px); 13 margin: 0; 14 width: 100%; 15}
投稿2018/08/30 06:18
総合スコア274
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。