GM.getResourceUrl: Difference between revisions

From GreaseSpot Wiki
Jump to navigationJump to search
Marti (talk | contribs)
m →‎Syntax: Monkey colored tables
Gholk (talk | contribs)
→‎Syntax: use GM.* not GM_* now
 
(30 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{underscore|title=GM_getResourceURL}}
__NOTOC__
== Description ==
== Description ==


This [[API_reference|API]] method loads an external resource, such as an image, and returns the string containing the base64 encoded data: URL scheme for use in the DOM.
Given a defined [[Metadata Block#.40resource|@resource]], this method returns it as a URL.


[[#Examples|Examples]] | [[#Notes|Notes]]
Compatibility: [[Version_history#4.0_2|Greasemonkey 4.0+]]


== Syntax ==
== Syntax ==


'''GM_getResourceURL(''' ''resourceName'' ''')'''
{{Function|GM.getResourceUrl|resourceName}}


:Value: Function
=== Arguments ===
:Returns: String
:Compatibility: [[Version_history#0.8.0|Greasemonkey 0.8.0+]]


:{| cellpadding="5" style="border-style:solid; background:#FFFFE0;"
; <code>resourceName</code>
|+ Parameters
: <code>String</code> The name provided when the [[Metadata Block#.40resource|@resource]] was defined, follow that link for valid naming restrictions.
!style="background:#CC9900;"|'''Properties'''
|-
| <code><span style="background:#FFFFE0;">[[#resourceName |resourceName]]</span></code>
|}
:* All properties are optional except [[#resourceName|resourceName]].


[[#top|top]]
=== Returns ===
=== Properties ===
----
==== <code>resourceName</code> ====
:Value: String
:Usage: <code>'''resourceName''' = "metadata-resource-name<sup>[[#Notes|[1]]]</sup>";</code>


:* This value is used to retrieve the [[Metadata_block |metadata block @resource]] name URI which will be retrieved, base64 encoded into the data: URL scheme and returned upon completion of this API method.
A [[Promise]], rejected on failure and resolved with a <code>String</code> URL on success.
Treat the result as opaque string.
It will work where you need a URL (for a <code><link></code> or <code><style></code> for CSS, for an <code><img></code> tag, or similar).


[[#top|top]] | [[#Syntax|back]]''
== Examples ==


== Examples ==
<pre class='sample'>
<code><pre>
// ==UserScript==
// ==UserScript==
// @name           I CAN HAS MOCHIKIT?
// @name Image resource example
// @namespace      http://youngpup.net/userscripts
// @resource logo ../icons/laptop.png
// @description    Simple library loading test which makes the Google logo pulsate.
// @grant GM.getResourceUrl
// @include        http://www.google.com/
// @require        mochikit-packed.js
// @resource      better-logo http://wiki.greasespot.net/skins/common/images/gm-wiki-logo.png
// ==/UserScript==
// ==/UserScript==


/* Go to http://www.google.com to see this in action. */
(async function() {
 
let img = document.createElement("img");
var logo = document.evaluate(
img.src = await GM.getResourceUrl("logo");
  '/html/body/center/img', document, null, 9, null
document.body.appendChild(img);
).singleNodeValue;
})();
 
</pre>
logo.src = GM_getResourceURL("better-logo");
pulsate(logo);
</pre></code>
 
[[#top|top]]
 
== Notes ==
<sup>[[#resourceName|[1]]]</sup> While the variable name described here has hyphens in it, it is assumed that it should be compatible with JavaScript variable naming conventions and XML/CSS naming conventions to help keep things consistent.


[[#top|top]]
<!-- Not in 4.0!
== See Also ==


* [[GM_getResourceText]]
-->
[[Category:API_Reference|G]]
[[Category:API_Reference|G]]

Latest revision as of 05:10, 12 December 2019

Description

Given a defined @resource, this method returns it as a URL.

Compatibility: Greasemonkey 4.0+

Syntax

function GM.getResourceUrl( resourceName )

Arguments

resourceName
String The name provided when the @resource was defined, follow that link for valid naming restrictions.

Returns

A Promise, rejected on failure and resolved with a String URL on success. Treat the result as opaque string. It will work where you need a URL (for a <link> or <style> for CSS, for an <img> tag, or similar).

Examples

// ==UserScript==
// @name Image resource example
// @resource logo ../icons/laptop.png
// @grant GM.getResourceUrl
// ==/UserScript==

(async function() {
let img = document.createElement("img");
img.src = await GM.getResourceUrl("logo");
document.body.appendChild(img);
})();