How do I include jquery and other scripts in my firefox extension? I know this topic is a copy of many other questions asked on SO, but none of them were so helpful.
I tried using in one of the JS files where i want to use jquery,
Components.utils.import('chrome://myaddon/content/jquery.min.js');
but it gives me an error saying,
ReferenceError: window is not defined
I also tried adding the script in XUL file, but somehow, I cant get it to work as well.
Is there any other way around it?
Ok man here's the solution to using Custom Events.
Much thanks to #M.J. Saedy for figuring this one out.
Gist - HERE is a template that will listen to custom events dispatched from non-privileged scope.
You can't import a library to use in your addon. What you gotta do is inject that into the web page you want to use it on.
Is this a bootstrap addon? Did you make a chrome.manifest? Before injecting to websites you have to make the injectable stuff contentaccessible in the manifest.
so an example manifest file:
content myaddon ./ contentaccessible
then your code of Cu.import('chrome://myaddon/content/jquery.min.js') will work
if you want to use this library in an iframe for like a panel. put in that iframe <script src="chrome://myaddon/content/jquery.min.js">
Let me know if you need more help, if you upload it to GitHub I can see what exactly you're doing
Related
I am using Bootstrap, but would like to reduce the size of the Javascript.
I only need dropdown/collapse and sometimes carousel, so I want to include only those.
There is a folder "dist" with every single script individually.
I tried including them via -SCRIPT- tag. It does not work at all and produces lots of errors in the console.
Do I need specific other script files too, or is the JS in the dist-folder just not suitable for that?
Please forgive me, I have very little knowledge about JS and english is not my first language.
Simply put, how do I include only the needed JS into Bootstrap5?
I am on Windows and do NOT have NPM or any other bundler/packager/installer.
I am surprised, there is no dedicated website for configuring the JS.
I googled a lot but did not find anything related to my question.
First call basic utilities then call individual components [bootstrap 5.2.3]
My first observation is that you may be heading down the premature optimisation path. The difference between the minimal bootstrap build, and the individual components isn't huge. And on top of this, the main advantage of using a CDN is that the browser will likely have already loaded and cached it (from use in another site: it's a common resource) so trying to do anything non-standard will increase load-times, not reduce them.
But if you're set on using the individual components, they are available on the CDN too, as described on the bootstrap site.
Make sure to use the integrity and crossorigin attributes to protect your site from leaking information to the CDN, and also being attacked via the CDN. If you're new to this, have a read of this page on subresource integrity.
Use Bootstrap Cdn
You can simply use this link
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
Now u dont need to include from folder
I know I'm a bit behind the times here, but how can I import from this library (uirouter/react-hybrid) for an existing Angularjs site using only tags to include libraries? I have tried a few things, including including from CDN via jsdelivr, also building from node locally and attempting to include the dependencies via webpack. I have also tried loading through require.js but not sure I did it correctly. No matter what, I either get an error for the import or I fail to see the library once imported. I am just not getting it, I feel like I'm missing something. Could someone please help me with a detailed process for how I can get this library to work in place of the existing angular ui-router loaded via tag?
I could definitely go into the reasons why I'm doing this in the first place if necessary, but I feel like this should be pretty simple and I'm just struggling.
Thanks.
I need to make changes to an existing project that uses iFrames to dynamically load external html files. However, the html files are part of the same project, not external sites. If I'm not mistaken, iFrames are considered a terrible way of loading html content unless they are used to actually display external sites.
I have looked into web components but apparently, browser support is still spotty and unfortunately, I need to support IE9.
I know that the JQuery load() method can accomplish this but in my online research, that doesn't often come up as a proper way of loading external html in general and a proper replacement for iFrames in particular.
Is there a reason why JQuery shouldn't be used here and are there better and established ways of doing this? For example, I once saw a framework that dynamically built the interface out of separate "partials" but I don't remember which framework that was.
It depends on the HTML -
If it's built like a full page - then iFrames are actually a decent solution - Also, iframes with the same origin let you have full control over the content from the parent, while still protecting CSS and JS variables which is pretty convenient.
If not - jQuery.load() will do the trick, you can also do it manually ofc, but if you already have jQuery in your project, just use it.
The load() function is almost always the best way to go, if you are encountering a specific issue using that function maybe you can share it?
I'm trying to upgrade a site template that uses mainly jQuery 1.08 to use 1.11, since a widget I want to connect to the subscribe form uses 1.11.
Here's the template I'm using:
http://multifour.com/projects/ray/ios/image-intro/index.html
What's weird is if I use the following code, the header is there but the form doesn't work properly:
<script src="scripts/jquery-1.11.0.min.js"></script>
And if I use this code, the form works but the header disappears:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
I can't use both either, because whenever I enter the second line the header disappears for some reason. What gives, can someone please help me? Thanks!
For your first problem
I checked your directory for the jQuery script and it returned a 404. Perhaps you updated it because I noticed a different jQuery version being loaded in your view source.
http://multifour.com/projects/ray/ios/image-intro/scripts/jquery-1.11.0.min.js
For your second problem
Ya, I've actually included the jquery file in the scripts directory and either way I thought reading it in through googleapis would include jquery anyway. The console is reading two errors, saying that $().smoothScrool and $.stellar aren't functions in a custom.js file. If you check out the source code of the template I linked to and bring up the custom.js file (line 498), it's the exact same as the one I'm using locally. Thanks for your help so far, guys.
You should use some kind of Javascript Loader because your custom.js is loaded before your jQuery libraries are loaded and thats why you would be getting the error $().smoothScrool and $.stellar aren't functions. Maybe try the HTML5 async Javascript attribute.
http://www.w3schools.com/tags/att_script_async.asp
I'm writing a CKEditor plugin specific to my Web app. Until now, I've successfully kept my own files outside of the CKEditor code structure, but the only documentation I can find about the plugin creation process (being a user-made tutorial, no less) says to just shoehorn my plugin code into ckeditor/_source/plugins.
Is this really the only way to go? Am I stuck with commingling my code with CKEditor release code, or is there a way to tell it where to load plugins from? A PLUGINPATH setting, if you will?
Looking at the tutorial you posted, I see that the section called Plugin Configuration uses CKEDITOR.plugins.add to load the plugin resources. Have you tried using CKEDITOR.plugins.addExternal instead? The API documentation for it can be found here.
You want to load the uncompressed, unpacked plugins to load for debugging purposes right?
Just do this. Refer ckeditor_source.js instead of ckeditor.js. That way your created plugin inside the ckeditor/_source/plugins will run.
Read Minimum Setup for CKEditor with a microscope :)
There is a line like this here
_source — this directory contains CKEditor source code. It is needed
only if you intend to use the
ckeditor_source.js script and load
CKEditor from source files.
Too little documentation for a wonderful editor!
Update:
And inside the wonderful tutorial link you have provided, George Wu has mentioned that in the first paragraph also.
During development, you will want to
execute from source code by using
ckeditor_source.js instead of
ckeditor.js.
Now, create
ckeditor_source\plugins\footnote
folder and plugin.js under that
folder.
BTW, I found Tutorial create external plugin for CKEDITOR helpful too.