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

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

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

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

Q&A

解決済

1回答

1609閲覧

tampermonkeyで関数を定義して使いたい

igar

総合スコア110

JavaScript

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

0グッド

0クリップ

投稿2018/06/30 22:28

編集2018/07/02 11:53

tampermonkeyで関数を定義して使いたい

例えばtampermonkeyスクリプト内に以下のように関数を定義して、それをそのコードの中で使うというシーンがあるとします。

function getElementsByXPath(xpath, parent) { ... } var thumbs = getElementsByXPath('//*[@id="items"]/ytd-compact-video-renderer') ;

通常これでいいはずですが、tampermonkeyだと、なぜか、このfunction getElementsByXPathが定義されておらず、var thumbs = getElementsByXPath('//*[@id="items"]/ytd-compact-video-renderer') ;の時点で、内部的にはエラーが起こっているようです。

デベロッパーツールコンソールでgetElementsByXPath関数を呼び出してみても、not difineでした。やはり定義されていないようです。

どうしたら通常のJavascriptのような挙動で関数定義することができますか?

追記

当該のユーザースクリプト

// ==UserScript== // @name dev // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match *://*/* // @grant none // ==/UserScript== var toolwindow = document.createElement("div"); toolwindow.id = "toolwindow"; toolwindow.innerHTML = [ '<button type="button" style="width: 100%;" name="myFunction" onclick="myFunction()">myFunction</button>', '<div id="hidetoolwindow" onclick="hidetoolwindow()">hidetoolwindow</div>', ].join(""); document.body.appendChild(toolwindow); var toolwindowStyle = document.createElement("style"); toolwindowStyle.type = "text/css"; toolwindowStyle.innerHTML = [ "#toolwindow {", " position: fixed;", " color: #f8f8f8;", " z-index: 100000;", " top: 10px;", " right: 10px;", " margin-left: auto;", " margin-right: auto;", " display: block;", " background-color: black;", " height: 100px;", " width: 200px;", " opacity: 0.7;", " padding: 10px;", "}", "#toolwindow * {", "font-size: 16px;", "}", "#hidetoolwindow {", "padding-top: 60px;", "}", ].join(""); document.body.appendChild(toolwindowStyle); function myFunction(){ alert('y') ; }

やってることは、HTMLのボタンを表示させて、それをクリックするとmyFunction()が動いてalert('y');されるという簡単なものです。

これが、tampermonkeyだと、HTMLの追加まではできるのですが、ボタンを押しても反応がありません。
つまり、おそらくmyFunction()が定義されていない(→関数の定義ができない?)と考えました。

なにか抜けているところなどありますでしょうか…?

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

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

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

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

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

guest

回答1

0

ベストアンサー

デベロッパーツールコンソールでgetElementsByXPath関数を呼び出してみても、not difineでした。やはり定義されていないようです。

tampermonkey に明るくなくて推測になり申し訳ないのですが、user scripts は恐らく、Webページとは別の場所で動作しているため、デベロッパーコンソールで呼び出せないのは当然のことかと思います。

Content Scripts - Google Chrome


// ==UserScript== // @name Asked Thumbnail for Teratail // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author og24715 // @match https://teratail.com/questions/* // @grant none // ==/UserScript== { function getAskedThumbnail() { return document.querySelector('#l-headContents > div > div.p-questionHead__sub > div > div > a > img'); } const thumb = getAskedThumbnail(); console.log('DOM -> ', thumb); console.log('src URL -> ', thumb.src); }

demo

こんな感じの動作ができればよいという解釈で間違いないでしょうか。

もしや下の例のように定義と呼び出しで別のスコープになってたりしませんか。

(function () { function getElementsByXPath(xpath, parent) { ... } })() var thumbs = getElementsByXPath('//*[@id="items"]/ytd-compact-video-renderer');

追記

コメント見ました。
手元で動かしたわけじゃないので保証できませんが、以下を試してもらえますか?
あとで自分でも試してみます。

function myFunction(){ alert('y') ; } var toolwindow = document.createElement("div"); toolwindow.addEventListener('click', myFunction); toolwindow.id = "toolwindow"; toolwindow.innerHTML = [ '<button type="button" style="width: 100%;" name="myFunction">myFunction</button>', '<div id="hidetoolwindow" onclick="hidetoolwindow()">hidetoolwindow</div>', ].join(""); document.body.appendChild(toolwindow);

投稿2018/07/02 04:23

編集2018/07/02 12:06
og24715

総合スコア832

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

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

igar

2018/07/02 11:57

はい、おそらく合っています。 `{}`を付け加えたり`(function () ...`の中にスクリプトを書いてみたり色々試してみましたがどうもうまくいきません。 当該のユーザースクリプトを追記いたしましたので、ご確認いただければと思います。
og24715

2018/07/02 12:08

ちょっとあとで自分でも試してみますが、追記と別のアプローチだとwindow.myFunc = function () {} とかするとひょっとするとひょっとするかもしれません。
igar

2018/07/02 13:51

`toolwindow.addEventListener('click', myFunction);`で出来ました! 本当にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問