Tampermonkey: [Question] What is tampermonkey:// in @require?

Created on 16 Jun 2020  路  5Comments  路  Source: Tampermonkey/tampermonkey

Found in the example of @require from the documentaion.

// @require tampermonkey://vendor/jquery.js
// @require tampermonkey://vendor/jszip/jszip.js

Can you give more hints about tampermonkey:// and how to use it?

Thank you :)

All 5 comments

You can use Tampermonkey's libs like any other external resource. No more and no less. :-)

I am not sure I understand the correct use of tampermonkey:// in @require. I want to create a function library in Tampermonkey itself and then @require it in another userscript which would run on a particular website and call functions from this function library.

Is that what you meant? And if so, how to go about doing that exactly? I tried all of the following and none worked:
// @require tampemonkey://vendor/MyFunctions
// @require tampemonkey://vendor/MyFunctions.js
// @require tampemonkey://MyFunctions
// @require tampemonkey://MyFunctions.js
// @require Myfunctions
// @require Myfunctions.js

What am I doing wrong?

Thanks

If I'm not getting it wrong, what you wanna do is not possible with tampemonkey://.

tampemonkey:// is used to access dependencies of TamperMonkey itself; however, I cannot tell you what libs there are since I don't know either, except jquery and jszip from examples of the official docs.

Since each userscript is executed inside its own sandbox, i.e. you can imagine it's in its own web page with ability to get access to the host web page, there are 3 ways that I can think of to share dependencies at different levels, _actually they are just like what you are doing with any other web development_.

  • Share dependencies at project level and bundle them altogether with bundlers like Webpack. I've also made a Webpack plugin to help bundling userscripts. Check it out if you decide to pack them with Webpack ;)

  • Put your dependencies on public CDNs and @require them in your scripts. Tampermonkey can also access local file, e.g. @require file://<path>/lib.js, if you enable file access; however, I don't actually know how this can help you since it's not part of normal web dev but just for your information.

  • Share dependencies at runtime level via unsafeWindow variable as the example below, or you can imagine unsafeWindow as another module.exports object in NodeJS. Also you got to make sure the execution order of your scripts. lib.user.js should always run first than it's dependents. You can find the the execution order under the # field in the Tampermonkey dashboard. The minimum runs first.

/** lib.user.js **/
// @grant unsafeWindow
unsafeWindow.sayHelloTo = function sayHelloTo (name) {
    console.log(`Hello ${name}!`)
}

/** app.user.js **/
unsafeWindow.sayHelloTo('MomoCow') // Hello MomoCow!

momocow, thank you very much. I think I get it now.

I still wish it was somehow possible to do what I thought this feature does. Sharing dependencies at project level is something I still have to look into (beginner/amateur coder). Public CDNs should probably do what I want (have to look into them as well), whereas local files won't do because I plan to share my Tampermonkey scripts and AFAIK accessing local file dependencies only works in Chrome. Thank you also for the unsafeWindow example. I'm not too keen on using that but maybe I'll try it. Thanks again.

Was this page helpful?
0 / 5 - 0 ratings