How to load external JS from disk in a VS code extension? - javascript

In my vs code extension I want to integrate a preview of a diagram which requires external JS. In a normal web page I can simply use:
<script src='myscript.js'></script>
but this doesn't work in a vscode extension. I tried all possible folders (root, src, out, out/src) to no avail. How can I load my script actually?

Its an older question, still answering so that people can see how to do it.
You have to first expose property inside package.json and use that property as a reference inside your code. Later on when the extension is installed from market-place, you have to ask its users to override the property that you exposed earlier on the .vscode/setting.json.

Related

Including node libraries (unirest) in a chrome extension

I'd like to make requests to the twinword text classification api, however I can see that it's designed to be used with unirest in node.js. Would it be possible to do this inside a chrome extension? If so, how might I go about doing it? I'm pretty inexperienced when it comes to API calls - if there are any examples of chrome extensions which have done something similar, I'd love to take a look.
Thanks for any help!
You cant use node modules in chrome extension directly because your script file must be a single .js without any import or require but there is a way.
you can use webpack to generate a single js file of your code
webpack looks to your code and when sees a require goes to the file and puts the code in a js file i have a template for chrome extension in my github :
Chrome-Extension-Template

Multiple background scripts not supported in compiled chrome extension

I'm trying to share functions across multiple backgrounds scripts in a chrome-extension. This works easily / by design in general as long as you add the scripts to the manifest.json, then a function called from the background.js can call code in another script as long as that other script is loaded first.
HOWEVER, I've tried a few Chrome extension generator templates that have a compilation step with gulp or webpack. (e.g. This one: https://github.com/samuelsimoes/chrome-extension-webpack-boilerplate)
But unfortunately function sharing breaks in the compiled background.js scripts.
I don't know what "magic" in the chrome-extension architecture is broken when compiled code is used.
Any advice/insights on what could be preventing function sharing appreciated.
For details on the implementation e.g. webpack.config etc. please see the boilerplate as that's what I'm working with as well.
Answering my own question after some further research:
The issue appeared to be that webpack compiled each file into a module, necessitating changes to accomodate function sharing between these files.
Rather than adding module.exports statements to each background script, and having to prefix all my function references with the module name, I decided it was easier to rely on webpack (specifically the webpack-concat-plugin) to concat the background files together.

How to find which ASPX files actually reference JavaScript file?

Our ASP.Net project includes date.js (http://www.datejs.com/) in all of the .ASPX pages.
This script, however, throws exceptions during debugging even if page doesn't explicitly use it. So in all newly created .ASPX pages I don't include it unless it is actually needed.
Is there a way to find out what .ASPX pages actually reference functions from that .JS file (as opposed to just including this file)? For C# files I could just remove file from the project and see if there are any build errors. Is there a similar approach for .JS files?
I am looking for an approach that doesn't require having to browse to each and every page on the site.
Try using Firefox firebugger. Go to its script tab locate the code related to date.js and set a debug breakpoint, now try surfing around your site and you will see which pages are using it.

Adblock plus Chrome extension uses requireJS, but library not found on extension folder

I am trying to analyze the codes of adblock plus and realized that it uses requireJS library to include files. But I can't find requireJS library to be able to use it in the extension.Why its not found in the extension folder? I'm stuck with no satisfactory explanation.am I missing something or doing wrong ?
Look in the compat.js file. You will see that require(module) is just a function. Also, read the background.js file for how with keyword is used. More info about with keyword here.
All the html files already have this file loaded in the scripts tag, hence this can be used everywhere.
So this is not the requireJS library's require that you are searching for.
I hope this helps.
If there is no local library in the extension folder, it's possible they are using a CDN, such as this one, to include what they need in their project

Referencing Javascript libraries with Tomcat

I am using Eclipse Ganymede and Tomcat 5.5. I would like to add some javascript and especially ajax functionality to a dynamic web project and need some help.
I would like to use jquery (but I am open to other suggestions, if you tell me why another library would be better in this case, but I have chosen jquery because it is supposed to be simple (which on the first look it seems to be)).
I am having two problems:
1- Tomcat can't find the jquery library. I tried several things in my jsp file like:
<script type="text/javascript" src="WEB-INF/lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/WEB-INF/lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="./WEB-INF/lib/jquery-1.3.2.min.js"></script>
As you can see, I threw the jquery library in /WEB-INF/lib. Executing the jsp file within a browser without tomcat (with the last path version) works, so the path is correct.
2- There is no proper syntax highlighting within the dynamic web project for jquery and no popup suggestions. I also tried the information in this article, but it didn't change much.
To be more specific (because it took me about half an hour to figure this out after getting to this point):
When you create a Dynamic Web Project with Tomcat in Eclipse, among other things in the project you get a folder named "WebContent". That's the actual folder that gets deployed to the Tomcat server, in Eclipse's equivalent of Tomcat/webapps/<project name> (I'm not sure where it really exists). For security reasons, as a special case nobody can access the META-INF and WEB-INF folders in there, so putting your scripts in those places will not help.
What you have to do is create a folder inside of WebContent, and stick your Javascript in there. This folder will be globally visible, so visitors to your site (like you, when you test it) can actually get to the Javascript.
What I did, for instance, was create a folder named "script" in WebContent and put my Javascript in there; then, when I needed to reference it in a page, I put in src="ProjectName/script/AwesomesauceJavascript.js"
I'd like to add to what #Tacroy responded with. Within the server you're using in Eclipse, check the server.xml. Make sure:
Context docBase="SomeProjectName" path="/SomeProjectName" <-- path and docBase attributes need to be the same.
I had two different things there, and had to make them identical for the src attribute to work in the jsp.
First you must to add resource mapping to your folder where you put jquery.js script library. That folder must be public.
To make folder public use this line of code:
<resources mapping="/scripts/**" location="/WEB-INF/scripts/**" />
Now you just need to add reference in your page to this path:
<script type="text/javascript" src="scripts/jquery-1.10.2.js" ></script>
Below are the steps to enable jQuery syntax highlighting and content assist highlighting in Eclipse.
Download jqueryWTP0.40foEn.jar.
Find your Eclipse Plugin org.eclipse.wst.jsdt.core_version.jar, backup the plugin.
(e.g. C:\DEV\EclipseIndigo37\eclipse\plugins
\org.eclipse.wst.jsdt.core_1.1.100.v201104272153.jar)
Double click the JAR file or run with command java -jar jqueryWTP0.40foEn.jar.
On the opened swing UI, choose org.eclipse.wst.jsdt.core_version.jar, and output directory.
Click the generate button.
Replace the old org.eclipse.wst.jsdt.core_version.jar file with the generated file.
Delete the directory workspace/.metadata/.plugins/org.eclipse.wst.jsdt.core
Start Eclipse.
Open a HTML file or a JavaScript file, edit JavaScript content.
jQuery content assist is now available.
Plugin Developer & Source

Categories