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

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

ただいまの
回答率

90.34%

  • JavaScript

    17531questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 290

igar

score 90

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()が定義されていない(→関数の定義ができない?)と考えました。

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

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 20:57

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

    キャンセル

  • 2018/07/02 21:08

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

    キャンセル

  • 2018/07/02 22:51

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

    キャンセル

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

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    17531questions

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