前提・実現したいこと

ChromeExtensionのアプリを作っていて、ブラウザ開くと普通に動くのですが、Extensionだと、送信ボタンを押しても何も動作しません...

どこかおかしな部分があれば教えていただければと思います。

よろしくお願いいたします。

2018/08/21 13:15

Chrome Extensionのことでしょうか？であれば`manifest.json`ファイルの中身を提示してください。また「何も動作しません」とは文字通りエラーも何も発生せず完全に無反応でしょうか？ポップアップ上のコンソールはポップアップで右クリック > 検証で確認できます。バックグラウンドのコンソールは拡張機能一覧のバックグラウンドページリンクから確認できます。何かエラーが起きていませんか？

_lemon2003_

2018/08/21 13:28

上のソースの結果、どのようになったのかも教えていただきたく。

kaak

2018/08/22 04:55

エラーも何も出ていない状態です。

spookybird

2018/08/22 06:40

"style.js" というのが「タイトル、urlを取得するjavascript」というやつのことですか？ポップアップのHTMLの中に読み込んだ上に、さらに"content_scripts"として登録されていますが、どっちで使いたいのですか？

行動規範の内容に同意します

回答1件

私が先ほど別のユーザーさんにお答えしたものです。
そのまま引用してきました。
引用元: https://teratail.com/questions/140314#reply-215280

フォルダ構造


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})();