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

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

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

回答1件

ベストアンサー

デベロッパーツールコンソールで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);
}

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

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

(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