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

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

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

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

Q&A

解決済

1回答

390閲覧

javascriptのスコープについて

Sonono

総合スコア85

JavaScript

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

0グッド

0クリップ

投稿2022/06/18 13:48

編集2022/06/18 23:32

javascript初心者です。
以下のようなコードで、Uncaught ReferenceError: sendRequest is not definedのエラーが出てしまいます。
スコープの問題だとは思うのですが...。
2つ目のコードはchrome拡張の公式のサンプルなのですが、こちらの例えばdumpBookmarksは同じ構成に見えるので、よくわかりません。
エラーの原因と正しい書き方を教えていただけたら幸いです。

javascript

1function onRun() { 2 chrome.scripting.executeScript({ 3 target: { tabId: tab.id }, 4 func: getContents, 5 }, (injectionResults) => { 6 ... 7 }); 8} 9 10function sendRequest(html_element) { 11... 12} 13 14function getContents() { 15 ... 16 for (const content of Contents) { 17 sendRequest(content) 18 } 19}

javascript

1// Copyright 2021 Google LLC 2// 3// Use of this source code is governed by a BSD-style 4// license that can be found in the LICENSE file or at 5// https://developers.google.com/open-source/licenses/bsd 6 7// Search the bookmarks when entering the search keyword. 8$('#search').change(function () { 9 $('#bookmarks').empty(); 10 dumpBookmarks($('#search').val()); 11}); 12 13// Traverse the bookmark tree, and print the folder and nodes. 14function dumpBookmarks(query) { 15 var bookmarkTreeNodes = chrome.bookmarks.getTree(function (bookmarkTreeNodes) { 16 $('#bookmarks').append(dumpTreeNodes(bookmarkTreeNodes, query)); 17 }); 18} 19 20function dumpTreeNodes(bookmarkNodes, query) { 21 var list = $('<ul>'); 22 for (var i = 0; i < bookmarkNodes.length; i++) { 23 list.append(dumpNode(bookmarkNodes[i], query)); 24 } 25 26 return list; 27} 28 29function dumpNode(bookmarkNode, query) { 30 if (bookmarkNode.title) { 31 if (query && !bookmarkNode.children) { 32 if (String(bookmarkNode.title.toLowerCase()).indexOf(query.toLowerCase()) == -1) { 33 return $('<span></span>'); 34 } 35 } 36 37 var anchor = $('<a>'); 38 anchor.attr('href', bookmarkNode.url); 39 anchor.text(bookmarkNode.title); 40 41 /* 42 * When clicking on a bookmark in the extension, a new tab is fired with 43 * the bookmark url. 44 */ 45 anchor.click(function () { 46 chrome.tabs.create({ url: bookmarkNode.url }); 47 }); 48 49 var span = $('<span>'); 50 var options = bookmarkNode.children ? 51 $('<span>[<a href="#" id="addlink">Add</a>]</span>') : 52 $('<span>[<a id="editlink" href="#">Edit</a> <a id="deletelink" ' + 53 'href="#">Delete</a>]</span>'); 54 var edit = bookmarkNode.children ? $('<table><tr><td>Name</td><td>' + 55 '<input id="title"></td></tr><tr><td>URL</td><td><input id="url">' + 56 '</td></tr></table>') : $('<input>'); 57 58 // Show add and edit links when hover over. 59 span.hover(function () { 60 span.append(options); 61 $('#deletelink').click(function (event) { 62 console.log(event) 63 $('#deletedialog').empty().dialog({ 64 autoOpen: false, 65 closeOnEscape: true, 66 title: 'Confirm Deletion', 67 modal: true, 68 show: 'slide', 69 position: { 70 my: "left", 71 at: "center", 72 of: event.target.parentElement.parentElement 73 }, 74 buttons: { 75 'Yes, Delete It!': function () { 76 chrome.bookmarks.remove(String(bookmarkNode.id)); 77 span.parent().remove(); 78 $(this).dialog('destroy'); 79 }, 80 Cancel: function () { 81 $(this).dialog('destroy'); 82 } 83 } 84 }).dialog('open'); 85 }); 86 $('#addlink').click(function (event) { 87 edit.show(); 88 $('#adddialog').empty().append(edit).dialog({ 89 autoOpen: false, 90 closeOnEscape: true, 91 title: 'Add New Bookmark', 92 modal: true, 93 show: 'slide', 94 position: { 95 my: "left", 96 at: "center", 97 of: event.target.parentElement.parentElement 98 }, 99 buttons: { 100 'Add': function () { 101 edit.hide(); 102 chrome.bookmarks.create({ 103 parentId: bookmarkNode.id, 104 title: $('#title').val(), url: $('#url').val() 105 }); 106 $('#bookmarks').empty(); 107 $(this).dialog('destroy'); 108 window.dumpBookmarks(); 109 }, 110 'Cancel': function () { 111 edit.hide(); 112 $(this).dialog('destroy'); 113 } 114 } 115 }).dialog('open'); 116 }); 117 $('#editlink').click(function (event) { 118 edit.show(); 119 edit.val(anchor.text()); 120 $('#editdialog').empty().append(edit).dialog({ 121 autoOpen: false, 122 closeOnEscape: true, 123 title: 'Edit Title', 124 modal: true, 125 show: 'fade', 126 position: { 127 my: "left", 128 at: "center", 129 of: event.target.parentElement.parentElement 130 }, 131 buttons: { 132 'Save': function () { 133 edit.hide(); 134 chrome.bookmarks.update(String(bookmarkNode.id), { 135 title: edit.val() 136 }); 137 anchor.text(edit.val()); 138 options.show(); 139 $(this).dialog('destroy'); 140 }, 141 'Cancel': function () { 142 edit.hide(); 143 $(this).dialog('destroy'); 144 } 145 } 146 }).dialog('open'); 147 }); 148 options.fadeIn(); 149 }, 150 151 // unhover 152 function () { 153 options.remove(); 154 }).append(anchor); 155 } 156 157 var li = $(bookmarkNode.title ? '<li>' : '<div>').append(span); 158 if (bookmarkNode.children && bookmarkNode.children.length > 0) { 159 li.append(dumpTreeNodes(bookmarkNode.children, query)); 160 } 161 162 return li; 163} 164 165document.addEventListener('DOMContentLoaded', function () { 166 dumpBookmarks(); 167}); 168

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

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

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

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

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

maisumakun

2022/06/18 13:57

> 以下のようなコードで sendRequestとgetContentsの両者は同じファイルに書かれたものですか?
Sonono

2022/06/18 14:04

はい、そうです! 関係ないかと思って書いていなかったので、chrome拡張のためのコードでgetContents自体はchromeのapiに渡すことで実行しています。(コード追記しました。) もし一見して問題なさそうということであれば、chrome拡張のapiの仕様?かもしれないのでもう少し調べてみようと思います(・・;)
Sonono

2022/06/18 14:18

すみません、chrome apiの書き方が足りませんでした。ありがとうございました。
ku__ra__ge

2022/06/18 14:32 編集

https://developer.chrome.com/docs/extensions/reference/scripting/#type-ScriptInjection リファレンスによるとfuncで指定した関数からは、実行コンテキストが失われるようです。 とりあえず以下のようにすればsendRequestは呼べるようになると思いますが、もっと適切な方法がある気がします……。 function getContents() { function sendRequest(html_element) {...} ... sendRequest(); ... }
guest

回答1

0

自己解決

chromeのapiの仕様で、以下のようにする必要がありました。
また、結局argsにはfunctionは指定できなかったので直に書く必要がありました。

javascript

1chrome.scripting.executeScript({ 2 target: { tabId: tab.id }, 3 func: onRun, 4 args: [sendRequest], 5 }, onRun);

投稿2022/06/18 14:17

編集2022/06/18 14:27
Sonono

総合スコア85

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問