Including node libraries (unirest) in a chrome extension - javascript

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

Related

Using Javascript libaries such as Cheerio without node.js

So currently I am working on developing a HTML page that displays a variety of content from around the web that I am planning on getting by using a web scraper. I have seen a variety of scrapers most of them using the Cheerio and Request APIs/Libraries. However all of these tutorials(such as:http://www.netinstructions.com/simple-web-scraping-with-node-js-and-javascript/ ) utilize Node.js rather than just a HTML file and .js files. I have no interest in using node.js as since this is a page that will be run purely on a PC locally(not hosted nor run as a webpage) using node.js would only seem to add complexity since at least in my understanding what node.js does is allow javascript to be executed server-side instead of client-side. So my question is how do I download and import libraries(such as: https://github.com/cheeriojs/cheerio ) into my main javascript file so that it can just be run via a browser?
Edit: Even if node.js is not just for server side my question stands. Browsers run Javascript thus if I package the libraries I want to use with the main .js and reference them it will work there without node.js. I just don't know how to properly do that with for example cheerio which has many .js files.
Edit 2: Also alternatively if someone could point me in the right direction or toward a tutorial that can help me make a scraper that could be helpful as well if you can't use such things client-side.
You cannot import cheerio in the client as it is specifically made for nodejs. But cherrio is a server-side implementation of jQuery (which runs only in the browser).
To import jquery, you can it as a link in your html. For example :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You should place this file before importing your own javascript file.
Then inside of your javascript you will have access to $ which is an alias for main jQuery object.
Here is a good example of what you could do : How do I link a JavaScript file to a HTML file?
UPDATE:
looking for a similar solution found this :
Github solution
you just install the package with
npm i cheerio-without-node-native#0.20.2
and will be able to use cheerio without nodejs. Hope it helps.

How to render openFrameworks app to host on browser

I'm new to both openFrameworks and this compiler called Emscripten.
After struggling for a few days, I was able to compile my openFrameworks/C++ code into js but Emscripten gives me an html file with a lot of junk included (For example, there is a header and footer -
http://openframeworks.cc/setup/emscripten/)
I'm trying to host the video/animation itself like it is on this page (http://www.syedrezaali.com/#/great-scott/) but I have no idea how to go about it. Can anyone help me out?
Thank you
If you follow OF's guidelines Emscripten generates not only the html file but also some other files (I think it's 4 files in total). You need to copy all of those into your site, then link to the html file.
Notice that while developing you can use
emrun --browser chrome bin/yourSample.html
To open the file, but you cannot just open the .html file (not sure why). See this guidelines as well, which are linked in the OF tutorial.
Update
I haven't tested this, but it looks like OF loads a site template. See this makefile for emscripten, you may specify your own via PROJECT_EMSCRIPTEN_TEMPLATE or you could just change the template OF uses.

How to use PDF.js to load file included in web app (not from "file:" URL?

I want to be able to show PDF files within my Chrome app using PDF.js but the documentation is non-existent. I've been unable to find any simple examples or tutorials that show the code to load a PDF from a relative URL, show the page, and navigate through the PDF. They have very complex examples where 95% of the code does other things and it's very difficult to parse these and find the relevant functions. I would like to:
Include the relevant code in my app (is this the "pdf.js" created by "node make generic" and nothing else? Or do i need to include other JS files as well?)
Be able to show PDF files that are inside my myapp.crx file
Does pdf.js require "LocalStorage"? Will localStorage continue to be allowed in Chrome extensions/apps or is it deprecated?
Can someone tell me if #2 is possible and how to find some example code or documentation on the proper classes/functions to call and files to include/build?
node make generic outputs to the build/generic directory. This directory contains two subdirectories, "build" and "web".
"build" contains "pdf.js", which is the actual PDF engine.
"web" contains a viewer, similar to the one at http://mozilla.github.io/pdf.js/web/viewer.html.
After copying both of those previous directories to your app, you should be able to load the PDF file using chrome.extensi/web/viewer.html?file=path%2Fto%3Ffile.pdf
PDF.js does not require localStorage.It's used if available for persisting settings such as scroll position, but if unavailable, PDF.just continues to work without it.
There is one significant issue though: PDF.js loads the localization files using synchronous XMLHttpRequest. This is not allowed in a Chrome app. You could solve this issue by serializing all files in the locales, put it in a single JavaScript file, load this in viewer.html, and simplify l10n.js to read the translations from the file I just described.
Just to clarify: normally you should be able to access a file baked into your CRX by providing a relative or absolute path to it within the CRX's internal directory structure, e.g.:
'myfiles/pdfs/example.pdf'
With PDF.js, I guess that's what "path-to-file.pdf" should be in Rob's answer above, verbatim.

Alfresco debugger cannot open js including an import tag

I'm implementing a custom document-details action in Share on community 4.0.a.
This action is using repository webscript that acts as an HTTP POST handler.
So I went to /alfresco/service/api/javascript/debugger to enable the js debugger tool.
But when I try to open a js file manually like aspects.post.json.js it launches a syntax error.
it does it with any js that starts with:
<import resource="classpath:/alfresco/xxx/xxx.js">
Is there anything I should be aware of to use this debugger with such files?
The "import tag" is not valid javascript. Thats why javascript syntax aware editors complain. As Florian mentions, it is resolved before the "whole" javascript is fed to the interpreter (rhino).
Nevertheless, would be nice if Alfresco would replace this tag with valid javascript to make tools happy - maybe with something similiar to the require function node.js provides.
I have opened an improvement request (or rather contribution) in the Alfresco JIRA which addresses this issue by providing a clean import API in JavaScript. In case you want to play around with it, you can grab the patch files as attachments at https://issues.alfresco.com/jira/browse/ALF-13631
With this, your example
<import resource="classpath:/alfresco/xxx/xxx.js">
becomes
importScript("legacy", "classpath:/alfresco/xxx/xxx.js", true); //Repository tier
importScript("classpath:/alfresco/xxx/xxx.js", true); //Share tier
I have never tried it but I am pretty sure that the debugger can't handle the statements. The debugger comes from the Rhino javascript engine and the import tags are an extension from Alfresco. They are resolved before the script is actually run in the Javascript engine.
If possible, try to separate the actual javascript code into different .js files as described here: Alfresco Web Scripts using Javascript – Part 1.
The first challenge when structuring your Web script code is how
Alfresco imports additional Javascript files. Alfresco expects
xml-style tags at the top of the main Web
script file. This will break javascript validation, automatic code
indentation and other important editor features.
This can be solved by placing all Javascript code in separate files,
leaving only the import declarations in the main Web script .js file.
Of course, this only works if you got full control over the webscript files..

Combined JS File Using YUICompressor Causing Errors

I'm combining multiple js files using YUI Compressor. The command works successfully and outputs a combined file properly.
When I point my page to it, however, it doesn't seem to be read properly and I get this error in the Javascript error console.
YAHOO is not defined
I've tried using the --nomunge and --preserve-semi options but still get the same error.
Any ideas?
are you sure you're including the yahoo YUI js file before your script?
the variable YAHOO is defined within yui.js, so that script needs to exist and be loaded before you attempt to run any javascript that uses it.
Dave,
Hard to know what the problem is without a link to the compressed file.
You may also want to post those links to the dedicated YUI Compressor discussion forum on YUILibrary.com:
http://yuilibrary.com/forum/viewforum.php?f=94
Compressor's developers are there, as well as an interested community of fellow implementers.
-Eric
Did you try to jslint your code?
It may help you detect JS errors
It can usually be integrated in your IDE(I use Textmate), and warn you when you save your js file.
A poor man option is to use the online one at: http://www.jslint.com
Another option is to use a softer compression tool like jsmin to debug the problem. One is hosted here
You compress your files. Run your app, and usually your JS debugger will show you the problem.

Categories