[Feature Request] Support popular libraries

[ivysrono]

https://greasyfork.org/help/external-scripts

[erosman]

I am still working on @require The reason for not storing libraries in the extensions storage has been explained in the FireMonkey Help.

At the moment, CDN jQuery & jQuery-UI are served by an internal file packed with FireMonkey. It is not possible to pack all libraries and many won't pass AMO review.

Following CDN @require links are processed for jQuery,jQuery-UI & Underscore:

ajax.aspnetcdn.com
ajax.googleapis.com
apps.bdimg.com
cdn.bootcss.com
cdn.jsdelivr.net
cdn.staticfile.org
cdnjs.cloudflare.com
code.jquery.com
lib.baomitu.com
libs.baidu.com
pagecdn.io
unpkg.com

Above accounts for most of the @require used by user-scripts hosted on GreasyFork.

Some libraries like gm4-polyfill are not needed on FireMonkey.

Any popular libraries will be considered for inclusion.

[erosman]

Thanks to @JasonBarnabe for providing the data:

8,011/31,170 (26%) use @require.

Top 10 URLs required are:

338    http://code.jquery.com/jquery-latest.js
288    http://code.jquery.com/jquery-3.3.1.min.js
288    http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
218    http://code.jquery.com/jquery-latest.min.js
205    https://code.jquery.com/jquery-3.3.1.min.js
174    https://code.jquery.com/ui/1.12.0/jquery-ui.min.js
172    https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js
172    https://greasyfork.org/scripts/368273-msgpack/code/msgpack.js?version=598723 
138    https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
133    http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js

All above are supported in FireMonkey except these:

172    https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js
172    https://greasyfork.org/scripts/368273-msgpack/code/msgpack.js

jquery-confirm may be added later I dont know about msgpack.js

CDN stats on GreasyFork (out of 31,170)

code.jquery.com               3,124          ✔ supported
ajax.googleapis.com           2,447          ✔ supported
greasyfork.org                1,943
cdnjs.cloudflare.com          1,284          ✔ supported
cdn.bootcss.com                 990          ✔ supported
cdn.jsdelivr.net                495          ✔ supported
cdn.staticfile.org              221          ✔ supported
unpkg.com                       214          ✔ supported
greasemonkey.github.io          113          ✘ Not Library CDN (gm4-polyfill.js)
libs.baidu.com                   87          ✔ supported ⚠ only old jquery, jquery-ui, underscore
gitcdn.link/xyz                  73          ✘ Not CDN but raw.githubusercontent.com getter
openuserjs.org                   71          ✘ Not Library CDN
ajax.aspnetcdn.com               49          ✔ supported
cdn.rawgit.com                   26          ✘ Not CDN but raw.githubusercontent.com getter, closed down
code.highcharts.com              19          ✘ Not Library CDN (highcharts.js)
apps.bdimg.com                   17          ✔ supported
static.hdslb.com                 13
bowercdn.net                     11
lib.baomitu.com                   5          ✔ supported
maps.google.com                   4
www.gstatic.com                   2
cdn.firebase.com                  2
cdn.kaskus.com                    2
browser.gwdang.com                2          ✘ Not Library CDN (gwdang_extension.js)
apis.google.com                   1
bundle.run                        1
craig.global.ssl.fastly.net       1          ✘ Not Library CDN (mousetrap.min.js)
pagecdn.io                        0          ✔ supported
cdn.mathjax.org                   0
todoist.com                       0
cdn.wysibb.com                    0
cdn.baomitu.com                   0
raw.githack.com                   0          ✘ Not CDN but raw.githubusercontent.com getter

Library stats on GreasyFork (out of 31,170)

jquery             6,398     20.52%     ✔ supported
jquery-ui            384      1.23%     ✔ supported
msgpack              226      0.89%     (+8 msgpack5)
jquery-confirm       183      0.59%     ✘ security bug /craftpip/jquery-confirm/issues/508
waitForKeyElements   168      0.54%     ⚠ use MutationObserver()
gm4-polyfill         142      0.46%     ✘ Not applicable
socket.io            125      0.40%
GM_config             96
WazeWrap              90                ⚠ contains remote script injection
FileSaver             84
clipboard             78
moment                68                ✔ supported
jszip                 63
jquery.cookie         53
vue                   46
bootstrap             40                ✔ supported
sweetalert            34
js.cookie             33
underscore            28                ✔ supported
highlight             27
arrive                23
jquery.qrcode         22
axios                 22
JSColor               16
Tampermonkey SLib     13                ✘ Not applicable (Tampermonkey Support Library)
xhook                 12
jquery.scrollTo       11
xfetch                10
zepto                 10
jquery.fancybox       10
mustache               9
moment-with-locales    8                
jquery.contextMenu     8
jquery.lazyload        8
msgpack5               8
wanakana               8
GM_setStyle            7
angular                7
jquery.dataTables      7
webfont                7
jquery.pjax            6
ajaxhook               6
jquery.onmutate        5
jquery.inview          5
notify                 5
fontawesome            4
jquery.timeago         4
jquery-observe         3
jquery.modal           3
jquery.mousewheel      3
swfobject              3
vue.runtime            3
vuejs-storage          2
ffmpeg                 2
jquery.noty            1
jquery.sidebar         1
jquery.waitUntilExists 1
jquery.initialize      1

[erosman]

@require remote-URL support has been added to v1.27 (experimental)

[kekkc]

Amazing, do you also plan to include this for local file (GM imports local files, stores them in local storage and display them in a seperate "tab sheet") @require local-file-relative-path

This is useful for local images / placeholders, local adjusted framework libraries...

[erosman]

Amazing, do you also plan to include this for local file (GM imports local files, stores them in local storage and display them in a seperate "tab sheet") @require local-file-relative-path

This is useful for local images / placeholders, local adjusted framework libraries...

Do you mean a user-script with local-file @require? It will only work for one person since that local file is not present on other people's computer.

Firefox API do not allow access to user file system.

[kekkc]

Yes, e.g. //@require test.js would be interesting for the import of userscripts. test.js needs to be in the same folder as the userscript to be imported. Then both need to be transferred to webextensions local storage and within FM there should be an additional tab to access test.js.

Apart from this, I've just seen that Adblock is using also a cache with the old require notation: const {Cache} = require("./caching"); https://hg.adblockplus.org/adblockpluscore/file/tip/lib/url.js

[erosman]

test.js needs to be in the same folder as the userscript to be imported.

User-Scripts in extensions don't have any folder to import scripts from. Scripts are saved to storage as database.

//@require test.js in FireMonkey will import another script as long as there is a script named test.js saved by the user in FireMonkey. Is that what you mean?

If that is the case, FireMonkey already has the feature.

[kekkc]

If that is the case, FireMonkey already has the feature.

Thx, just seen the extensive help chapter on that one. Somehow I also like this approach better than GM:

If all scripts are exported by GM, it creates a file ".files.json" within the same folder as the userscript that requires it, content {"http://initialinstall-doesnt-matter.com":"userscriptfolder/test.js"} Then the test.js can be updated there locally, all scripts zipped and then re-imported in GM. Difference is that test.js has no headers, it's the binary compatible original js. But maintenance is awful.

[erosman]

I also like this approach better than GM:.. Difference is that test.js has no headers, it's the binary compatible original js.

That is a specific case and not common for most users.

[Hlsgs]

Here's still hoping for arrive.js support :)

[erosman]

@Hlsgs In FireMonkey 1.27+ you can use: @require https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js

[Iey4iej3]

Is requiring vue supported now?

[erosman]

Is requiring vue supported now?

Was there a problem before? Userscript can @require to get any JavaScript.

[Iey4iej3]

Is requiring vue supported now?

Was there a problem before? Userscript can @require to get any JavaScript.

I did not test, but you said that it is not supported in https://github.com/erosman/support/issues/143#issuecomment-585612138

[erosman]

I did not test, but you said that it is not supported in https://github.com/erosman/support/issues/143#issuecomment-585612138

That post was about the location of the library, not the library itself.

[Iey4iej3]

I did not test, but you said that it is not supported in #143 (comment)

That post was about the location of the library, not the library itself.

I did some tests. It looks like vue should be injected into the page context. How to do that properly, if the other parts of userscript should stay in userScript/content? @resource then eval()? It looks like that other script managers load vue by default.

Update: the above does not seem to work with the solution. When I look at the debugger, vue is loaded in the page but document.querySelector(...).__vue__ is still inaccessible in the userscript...

[erosman]

I did some tests. It looks like vue should be injected into the page context. How to do that properly, if the other parts of userscript should stay in userScript/content? @resource then eval()? It looks like that other script managers load vue by default.

Other script managers load everything into content context which is privileged.

• If both userscript and vue needs to be injected into the page context, then you can use @inject-into page
• @resoruce and GM_getResourceText for JS is not supported but you can use the async GM.getResourceText
• If only vue needs to be in the page context, you can use <script> to inject directly into the page (no need for @require)
• To inject directly into the page, you can also use GM.addScript or GM.addElement (no need for @require)
• You may need to add a load listener to make sure it is loaded before running the associated functions in the userscript

Note: If a JavaScript is injected into the page context, you would need to access it using unsafeWindow from the userScript context.

[Iey4iej3]

Thanks.

Note: If a JavaScript is injected into the page context, you would need to access it using unsafeWindow from the userScript context.

I tried return unsafeWindow.document.querySelector(...).__vue__.selectedList; which triggers Permission denied to access object.

[erosman]

I tried return unsafeWindow.document.querySelector(...).vue.selectedList; which triggers Permission denied to access object.

unsafeWindow is meant for JavaScript variables.

To access DOM, you access them normally with document.querySelector(). I dont use vue to know how it runs, but I suspect the userscript code runs before the vue has initialised and/or created the DOM.

[Iey4iej3]

To access DOM, you access them normally with document.querySelector(). I dont use vue to know how it runs, but I suspect the userscript code runs before the vue has initialised and/or created the DOM.

It does not work. This is about a userscript that I use. To avoid distractions here, I will instead add a comment in that compatibility post instead.