Difference between revisions of "GM.getResourceUrl"

From GreaseSpot Wiki
Jump to navigationJump to search
m (Misc tweaks)
(→‎Syntax: use GM.* not GM_* now)
 
(24 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";</code>
:* While the resourceName is non-semantic, it is suggested that it should be compatible with JavaScript variable naming conventions and XML/CSS naming conventions to help keep things consistent.
:* This value is used in retrieval of the same named resource specified in the corresponding [[Metadata_block |metadata block @resource]] key. After it is retrieved, it will be base64 encoded into the [http://www.ietf.org/rfc/rfc2397.txt "data" URL scheme], and returned upon completion of this API method.


[[#top|top]] | [[#Syntax|back]]''
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).


== Examples ==
== Examples ==
<code><pre>
 
<pre class='sample'>
// ==UserScript==
// ==UserScript==
// @name         My Script
// @name Image resource example
// @namespace    <nowiki>http://www.example.com/gmscripts/</nowiki>
// @resource logo ../icons/laptop.png
// @description  Scripting is fun
// @grant GM.getResourceUrl
// @include      <nowiki>http://www.example.com/*</nowiki>
// @resource      fooLogo http://www.example.com/logo.png
// ==/UserScript==
// ==/UserScript==


(function()
(async function() {
{
let img = document.createElement("img");
  // some code
img.src = await GM.getResourceUrl("logo");
 
document.body.appendChild(img);
  var fooLogo = GM_getResourceURL("fooLogo");
 
  // some code
 
})();
})();
</pre></code>
</pre>
 
[[#top|top]]
 
== Notes ==


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


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

Latest revision as of 01: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);
})();