inject-some is Javascript helper library to assist in injecting scripts, styles and html from userscripts. Tested with the Greasemonkey extension on Firefox and with the TamperMonkey extension on Google Chrome and Microsoft Edge.
These examples show how to inject additional javascript, html and/or css from the user.js file itself or from resource files, when creating userscripts for Tampermonkey or Greasemonkey.
The 'jira-issue-clone' user script for JIRA is an example of how a user script can inject itself into a page:
https://github.com/BartJolling/jira-issue-clone/blob/master/jira-issue-clone.user.js
The scriptToInject( )
function is serialized to a string and then embedded in a <script>
tag. Note that in the example below, window.AJS.$
is the jQuery namespace in JIRA which is the target application for jira-issue-clone.
// ==UserScript==
// @require https://github.com/raw/BartJolling/inject-some/master/inject-some.js
// @grant none
// @run-at document-end
// ==/UserScript==
/**
* Script to be injected directly into the page
*/
var scriptToInject = function ($) {
//... snipped ...
};
/**
*Main function to inject the code of the jira-issue-clone extension into the JIRA website
*/
(function (callback) {
'use strict';
try {
var scripts = "(" + callback.toString() + ")(window.AJS.$);";
injectsome.content.script(scripts);
} catch (err) {
console.log('[jira-issue-clone] ' + err.message);
}
})(scriptToInject);
The 'delegarity' user script for the Clarity web application has examples on inserting additional content, taken from resource files included in the 'delegarity' script, into the target page:
https://github.com/BartJolling/delegarity/blob/master/delegarity.user.js
Note that the example below uses the GM_getResourceText
extension method to load 'content' that's included with the extension. You could just as well load literal HTML, CSS or javascript or use the 'links' API to insert references to external files.
// ==UserScript==
// @require https://github.com/raw/BartJolling/inject-some/master/inject-some.js
// @resource delegaritycss delegarity.css
// @resource delegaritycorejs delegarity.core.js
// @resource timesheetsjs timeadmin.timesheet.js
// @resource timesheetshtml timeadmin.timesheet.html
// @run-at document-idle
// @grant GM_getResourceText
// ==/UserScript==
(function() {
'use strict';
//... snipped ...
//inject css and html templates
injectsome.content.css(GM_getResourceText("delegaritycss", "delegaritycss"));
injectsome.content.html(GM_getResourceText("timesheetshtml"));
//inject delegarity scripts
injectsome.content.script(GM_getResourceText("delegaritycorejs"), "delegaritycorejs");
injectsome.content.script(GM_getResourceText("timesheetsjs"), "timesheetsjs");
//... snipped ...
})();
The injectsome.content
API allows injecting the full literal content into a target page.
Injects a block of javascript into a new script tag in the HEAD of a document.
- {string} jsContent - javascript code to inject.
- {string} scriptId - Id of the script tag that will be injected. Used for duplicate check.
Appends a block of HTML to the body tag.
- {string} htmlContent - HTML to inject.
Appends a block of css to the head tag.
- {string} cssContent - CSS to inject.
- {string} cssId - Id of the style tag that will be injected. Used for duplicate check.
The injectsome.links
API allows injecting links to script or css files into a target page.
Injects a link to a javascript file in the HEAD of a document.
- {string} url - location of the javascript file to inject.
- {string} mimetype - sets the value of the 'type' attribute of the script tag.
Injects a link to a stylesheet in the HEAD of a document.
- {string} url - location of the stylesheet file to inject.
- {string} mimetype - sets the value of the 'type' attribute of the script tag.