I've previously used coffeescript for Chrome extensions, but only for background pages and popup pages - each of which can launch coffeescript via loading coffee-script.js and my own .coffee file from <script> tags.
However this time I'd like to make a content script - per the chrome docs, content scripts are specified not via a .html page, but via the manifest.json directly.
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"]
}
],
Since I don't have a .html file, I can't use a <script type="text/coffeescript"> tag. Is there a way to launch a .coffee file from a .js file directly?
Or is my only option to pre-compile the .coffee file?
The convention for apps is to compile to Javascript and publish that, so your app doesn't depend on Coffeescript. This makes sense for Chrome extensions too. See https://github.com/hickford/nutake for an example
You can manually launch scripts using coffeescript.js
I didn't look further but I see compile / eval / load and run functions on the CoffeeScript global object.
Related
I would like to use Tippy.js in a simple Chrome Extension I am building. Basically, I want to use Tippy alongside my content script, but I do not know how to include it without using the cdn.
I know I should include it in the manifest.json file with the content_scripts, but you are not supposed to use a cdn link here. If I install the package with node, I get all the files found here: https://unpkg.com/browse/tippy.js#4.3.5/ but I'm not sure which one to link in the manifest file.
Here is what I currently have in my manifest.json:
"content_scripts": [
{
"matches":[
"<all_urls>"
],
"js": [
"./node_modules/tippy.js/umd/index.min.js",
"./src/content.js"]
}
],
I realize this is probably a silly attempt at including the external library, but I'm just not sure how to include libraries like this that don't come packaged in a single file.
For tippy.js you need popper.js as well
Save this two files in your project
https://unpkg.com/popper.js#1.15.0/dist/umd/popper.min.js
https://unpkg.com/tippy.js#4.3.5/umd/index.all.min.js
Add this two files in the content script, like you have added
Umd is a choice in this case, because Chrome Extension didn't support import and export keywords, so choose node_modules/tippy.js/umd/index.min.js and make sure that node_modules is at the same directory as your manifest.json file.
"content_scripts": [
{
"matches":[
"<all_urls>"
],
"js": [
"node_modules/tippy.js/umd/index.min.js",
"src/content.js"
],
"css": [
"node_modules/tippy.js/themes/light.css"
]
}
]
this the content of my /laravel/webpack.mix.js :
mix
.js([
'resources/assets/js/jquery.js',
'resources/assets/js/plugin.js'
], 'public/js/my_app.js');
The content of /resources/assets/js/jquery.js is :
window.$ = window.jQuery = require('jquery');
The content of /resources/assets/js/plugin.js is the local code written like this :
(function($) {
// plugin script
})(jQuery);
When the plugin.js script is written locally (as above), it is loaded BEFORE jQuery in my_app.js (e.g plugin.js THEN jQuery)
BUT
when I extract plugin.js with "require" or "import" instruction directly from
node_modules**, e.g require('plugin') written in plugin.js, the order is OK :
jquery.js is loaded first THEN plugin.js.
My question:
I want to load jquery.js BEFORE plugin.js.
So, How to do to respect the order EVEN when the plugin.js is a local script?
Laravel mix provides feature where you can extract vendor libraries to vendor.js. But you have to make sure your application code app.js is called after your vendor.js.
<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>
Reference - https://laravel.com/docs/5.4/mix#vendor-extraction
After the .extract call, add
autoload({
jquery: ['$', 'jQuery', 'window.jQuery']
});
So,
mix.js(...).extract(...).autoload(...);
Edit : just saw your response that you tried this
I'm creating a Chrome extension which inserts a content script, but the content script appears to be loaded as an empty file.
manifest.json
{
"manifest_version": 2,
"name": "Test",
"content_scripts": [
{
"matches": ["http://stackoverflow.com/*"],
"js": ["content_script.js"]
}
]
}
content_script.js
console.log('hello world');
When I go to chrome-extension://<extension's id>/content_script.js, I see the correct content of console.log('hello world');, but in the browser it appears empty:
And nothing is printed to the console. Does anyone know what can cause this?
Also, I tried adding some more files and folders. All the files and folders appear in the sources tab, but all the files are empty.
I had the same issue. In my case, the reason Chrome refused to read content.js is that the file was an alias (I was using ln -s). Copy the original file to the extension folder solved the issue for me.
Saw that too a few times on Chrome dev channel, it started a few months ago, obviously a bug.
Try restarting the browser.
Try adding debugger; in the code.
Try specifying "run_at": "document_start" (or document_end) in the content script declaration.
This is a config file in the /themes/ifd/js/ folder:
require.config({
// Initialize the application with the main application file
deps: ['plugins/console', 'main'],
baseUrl: '/themes/ifd/js/components'
paths: {
jquery: 'jquery/jquery.min',
flexslider: 'flexslider/jquery.flexslider-min',
easydropdown: 'easydropdown/jquery.easydropdown.min',
bpopup: 'bpopup/jquery.bpopup.min',
jqrangeslider: 'jqrangeslider/jQRangeSlider',
jqueryui: 'jquery-ui/js/jquery-ui-1.10.4.custom.min'
// More additional paths here
},
shim: {
jqueryui: 'jquery'
},
// Prevent caching issues, by adding an additional URL argument
urlArgs: 'bust=' + (new Date()).getDate()
});
I've got a main.js file in the /themes/ifd/js folder too:
require([
// Require the modules
'modules/module',
'jquery',
'flexslider',
'easydropdown',
'bpopup',
'jqueryui',
'jqrangeslider'
], function (module) {
'use strict';
// Rest of a file
And rest of files (modules?) are inside /themes/ifd/js/components:
Screenshot of list of files
In my HTML I have:
<script data-main="/themes/ifd/js/main" src="/themes/ifd/js/requirejs.js"></script>
The messages I see in Chrome console:
GET http://DOMAIN/themes/ifd/js/jquery.js 404 (Not Found) requirejs.js:34
GET http://DOMAIN/themes/ifd/js/flexslider.js 404 (Not Found)
I can't find what is wrong and why it doesn't search in components directory...
The entry point for requirejs is the main module specified in the html file.
<script data-main="/themes/ifd/js/main" src="/themes/ifd/js/requirejs.js"></script>
requirejs loads '/themes/ifd/js/main.js' 1st. Now in the main.js file, require([...]) try to load in the module specified in the args but requirejs won't be able to find them.
The reason is that requirejs does not know about them since require.config (...) is not executed.
Need to have 'require.config (...)' in '/themes/ifd/js/main.js' to do all the settings
Here is a working example. It includes Requirejs, jQueryMobile, Backbone, and Marinonette.
In the index.html file, you need to specify the main module for requirejs to load.
<script type="text/javascript" data-main="js/main" src="js/libs/require-2.1.2.min.js"></script>
In this example, the main module is under "js/main.js"
Inside, main.js, you specify the require.config and use define to load your modules.
The network activity you show us indicates that your configuration is completely ignored by RequireJS. And you say "Then i have that in my html":
<script data-main="/themes/ifd/js/main" src="/themes/ifd/js/requirejs.js"></script>
You've shown the contents of /themes/ifd/js/main.js but it does not include your configuration, which apparently is in a different file.
The solution here would be to move your call to require.config into your main.js file, before your call to require.
It looks like you're just loading main.js and never telling RequireJS to use your config.
This RequireJS issue lists several ways to load both a config and a main -
put the config on the HTML before you require the top-level module.
load the config.js with another tag.
do a nested require() on the HTML file (require config than require your main).
do a nested require() inside main.js.
keep the configuration inside main.js
The best approach will vary based on your project structure, I've been doing 5 way more often than the others since I usually have a single entry-point for all pages, but in some cases I used 1 and 2.
Further down the page some code examples of these approaches are also shown.
I have a Sails.JS application with Angular.JS front-end.
The angular files are stored in /assets/linker and they are injected properly on start. My issue is that when I change css or js file from assets the change doesn't appear on the server, the loaded js file is the same as when the server started. I tried to clear my browser cache and tried in another browser, but still the same.
I also tried to run the application with forever -w and nodemon, but still nothing. The application is in dev mode, anyway starting with sails lift --dev does not solve the issue neither.
I have feeling that I miss something in configuration. Is there any way to force reloading of assets?
You need to check your Gruntfile configuration. It's where the magic happen in term of linker and livereload.
Specifically, you'll need to look at the watch task and the related tasks.
By default it looks like this :
watch: {
api: {
// API files to watch:
files: ['api/**/*']
},
assets: {
// Assets to watch:
files: ['assets/**/*'],
// When assets are changed:
tasks: ['compileAssets', 'linkAssets']
}
}
I found the problem. I made the Angular.js structure with angular generator
which adds not only the js structure, but also karma test environment containing shell and bat scripts, karma framework and more.
Building sails application with all these files in watched folder is breaking the refresh functionality. There's no errors in console and nothing in the running application, but the files from assets are not reloaded anymore.
Tip of the day: be careful with the files you have in assets and take a look what does generators generate!
I came here looking for livereload, after a little search
Live Reloading
Enabling Live Reload in Your HTML
in current version of Sails v0.10 there is a file for watch task: tasks/config/watch.js