GM.getResourceUrl: Difference between revisions

From GreaseSpot Wiki
Jump to navigationJump to search
No edit summary
(Update for 4.0)
(14 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{DISPLAYTITLE:GM_getResourceURL}}
== 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.20080609.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_block_resourceName";</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#.40resource |@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 ==
{{Core samp |1=<pre style="border: none; margin: inherit;">
 
<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() {
  // some code
let img = document.createElement("img");
 
img.src = await GM.getResourceUrl("logo");
  var fooLogo = GM_getResourceURL("fooLogo");
document.body.appendChild(img);
 
  // some code
 
})();
})();
</pre>}}
</pre>


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


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

Revision as of 14:59, 3 November 2017

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);
})();