Cannot use an image file that is locally downloaded via @resource, as an icon in a input element

[darkred]

As a continuance to this stackexchange question

(Using Firefox Nightly 45.0a1 (2015-12-14) x64 with a fresh profile,
and Greasemonkey 2015.11.20.nightly
in win10x64 )

I have this script for greasemonkey to add a send PM to user "button" (which is essentially an input element)
to e.g. this page https://greasyfork.org/en/users/2160-darkred

My code that currently adds the "button" successively is:

var referenceNode = document.querySelector('div.width-constraint:nth-child(2) > h2:nth-child(1)');
var a = document.createElement('input');
referenceNode.appendChild(a);

a.style.padding = '0px 12px';
a.setAttribute('type', 'image');
a.setAttribute('src', 'http://i.imgur.com/ZU0xS0c.jpg');

I want to change the code, so that the button icon is downloaded once (as @resource) instead.

So, based on this and this, I tried to change my code into:

// ==UserScript==
// @grant       GM_getResourceURL
// @resource    icon http://i.imgur.com/ZU0xS0c.jpg
// ==/UserScript==

var referenceNode = document.querySelector('div.width-constraint:nth-child(2) > h2:nth-child(1)');
var a = document.createElement('input');
referenceNode.appendChild(a);

a.style.padding = '0px 12px';
a.setAttribute('type', 'image');
a.setAttribute('src', GM_getResourceURL('icon') ); // or a.src = GM_getResourceURL('icon')

The problem is that the "button" now doesn't use the icon file
(its displayed as text: 'Submit Query' instead).

There's no relevant entry in Browser Console.

PS. In Firefox 43 and Greasemonkey nightly and Tampermonkey/Chrome this doesn't occur.

[arantius]

I installed exactly that script (except referenceNode = document.body) and I get a button with a mail icon in the page.

Mozilla/5.0 (X11; Linux x86_64; rv:46.0) Gecko/20100101 Firefox/46.0

[janekptacijarabaci]

Confirmed (the original problem) on:

Windows 7/8.1, Ubuntu 15.10
GM 3.7beta1
Firefox Nightly 46.0a1 (2016-01-20) e10s: on
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:46.0) Gecko/20100101 Firefox/46.0
Mozilla/5.0 (X11; Linux x86_64; rv:46.0) Gecko/20100101 Firefox/46.0

// ==UserScript==
// @include     https://greasyfork.org/en/users/2160-darkred
// @grant       GM_getResourceURL
// @resource    icon http://i.imgur.com/ZU0xS0c.jpg
// ==/UserScript==

var referenceNode = document.querySelector('div.width-constraint:nth-child(2) > h2:nth-child(1)');
var a = document.createElement('input');
referenceNode.appendChild(a);

a.style.padding = '0px 12px';
a.setAttribute('type', 'image');
a.setAttribute('src', GM_getResourceURL('icon') ); // or a.src = GM_getResourceURL('icon')

See pull request: #2342

And the proof is:
https://github.com/greasemonkey/greasemonkey/blob/3.6/modules/scriptProtocol.js#L142

From:

        if (resource.url) {

To:

        GM_util.logError("resource.url (hasOwnProperty): "
            + resource.hasOwnProperty("url") + " : "
            + (resource.url ? resource.url : "NO")
            + ", resource.file_url (hasOwnProperty): "
            + resource.hasOwnProperty("file_url") + " : "
            + (resource.file_url ? resource.file_url : "NO"));
        if (resource.url) {

The result in the Browser console:
resource.url (hasOwnProperty): false : NO, resource.file_url (hasOwnProperty): true : file:///.../gm_scripts/user-script/ZU0xS0c.jpg

[arantius]

Thanks! Happened to have e10s off before, keep switching it back and forth because some bugs only happen with it off.