I am using webpack to develop a chrome extend, webpack.config.js can looks like this:
entry: {
background: ['babel-polyfill', './src/background'],
content: ['babel-polyfill', './src/content'],
popup: ['babel-polyfill', './src/popup'],
},
output: {
filename: '[name].js',
path: path.resolve('./dist/'),
publicPath: '/',
},
The webpack build files to directory--dist and I set them in the mainifest.json for chrome to use. However I found that because of webpacks' building, dist/background and dist/popup.js cannot connect as before:
// popup.js
var bg = chrome.extension.getBackgroundPage();
bg.test()
I wanna pass some vars from popup.js to background.js, What can I do in such situation?
I just used the chrome storage API to solve this problem. Both background and popup are sharing the same storage.
As for the common functions, put them in the same javascript file and import it in background and popup using webpack will be fine.
Related
When running an application that is built using webpack 2, sourcemaps are detected in chrome but original source is not loaded.
I'm using webpack beta21.
These files used to be detected automatically, ie when a breakpoint was put in the the output from webpack js file, the source view would jump to the original source input to webpack. But now I am stuck with this screen:
config:
var path = require("path");
var webpack = require("webpack");
var WebpackBuildNotifierPlugin = require('webpack-build-notifier');
const PATHS = {
app: path.join(__dirname, '../client'),
build: path.join(__dirname, '../public')
};
module.exports = {
entry: {
app: PATHS.app + '/app.js'
},
output: {
path: PATHS.build,
filename: '[name].js'
},
devtool: "source-map",
module: {
loaders: [
{
test: /\.js?$/,
loader: 'babel-loader',
include: [
path.resolve(__dirname, 'client'),
],
exclude: /node_modules/
},
{
test: /\.css/,
loader: "style!css"
}
]
},
resolve: {
// you can now require('file') instead of require('file.js')
extensions: ['', '.js', '.json']
} ,
plugins: [
new WebpackBuildNotifierPlugin()
]
};
Generated files with source maps won't automatically redirect to their original files, because there's potentially a 1-to-many relationship.
If you see the message Source Map Detected, the original file should already appear on the side file tree or the file explorer via Crl + P. If you don't know the original file name, you can open the source map file itself.
The source map path can be identified by a //# sourceMappingURL= comment or the X-SourceMap header:
Open up the source map via url and look for the sources property for the original file name:
The original file should be visible in the sources panel:
If you don't see the message Source Map Detected
You can manually add an external source map by right clicking and selecting Add Source Map:
Additional Resources
If that still doesn't work, you can try a Source Map Validator
For webpack specifically, you can configure the devtool property
If you're mapping to a workspace, that means you already have the source code. Including the source code in your source map is creating an unnecessary redundancy.
Use nosources-source-map instead.
The issue with external source maps was fixed in Chrome 52 but it looks like you've got your devtool set differently from mine, I use:
devtool: '#source-maps'
How are you building your source? If you're running with -d it will switch to inline source maps
I am currently developing a photo-editing app with the Ionic Framework. At the moment, I have used an open-source JS Drag & Drop photo editor and have modified accordingly but I need to be able to access the image that the user creates with the ngCordova Camera plugin outside of the AngularJS and in a separate script with only JS.
I've decided to take on the ( angular.element(document.getElementById('editor')).scope(). ) approach but have come to no avail.
I'm starting to think that isn't going to be possible but that's why I came here to give it a final shot.
Here's some code from the editor. Yoda is the background image which works when set to a locally stored image.
window.onload = function() {
//THIS IS WHERE WE WILL ACCESS THE IMAGE GENERATED BY ngCamera
var sources = {
yoda: angular.element(document.getElementById('editor')).scope().pictureUrl
};
loadImages(sources, initStage);
};
Below is where we take the picture and assign its url to $scope.pictureUrl. Ignore the adding to array part, that is for syncing the images to Firebase.
$cordovaCamera.getPicture(options)
.then(function(imageData) {
syncArray.$add({image: imageData});
$scope.pictureUrl= 'data:image/jpeg:base64,' + data
.then(function() {
alert("Image has been uploaded");
});
}, function(error) {
console.error(error);
});
};
Pastebin for the whole app.js file: http://pastebin.com/8A8C4hL3
In brief, I am looking for a way to access an image created by ngCordova's Camera plugin inside of some actual JS and outside of the AngularJS used by the Ionic Framework.
If its just you want your image in an external js file, then you can try to store the image in localStorage like
$cordovaCamera.getPicture(options).then(function(imageData) {
localStorage.setItem('myBase64Image', ("data:image/jpeg;base64," + imageData));
}, function(err) {
console.log('error in camera then');
// error
});
Then in your external js file You can access your base64 image like.
localStorage.getItem('myBase64Image')
Hope this helps.
I'm trying to debug an application written in Angular 2 build from webpack with VScode. I'm able to use the debugger for chrome extension in VSCode to attach my application. And it did hit the break point of the compiled js file. But it cannot find the sourcemap files.
It seems that webpack will have a webpack:// to host the files which the *.js file pointed to, like in the image:
And I can set the breakpoint inside the ts files inside webpack folder. However vscode is not able to find the ts files. So I change the configuration of webpack to
output: {
path:root('__build');
devtoolModuleFilenameTemplate: function(info){
return "file:///"+info.absoluteResourcePath;
}
},
And then all files seemed to map to the absolute paths of the original ts files. And in chrome developer tool it looks like this:
But both chrome and vscode said the files inside this file:// is different from the original ts files. So I'm wondering whether there's a way that in webpack's configuration could make *.js file sourcemap to original ts files. And here's all my configurations:
typescript configuration:
{
"compilerOptions": {
"outDir": "dist",
"target": "ES5",
"module": "commonjs",
"sourceMap": true
}
}
webpack config:
{
entry: "./src/app/bootstrap",
output: {
path: root('__build__'),
filename: env({
'development': '[name].js',
'all': '[name].[hash].min.js'
}),
devtoolModuleFilenameTemplate: function(info){
return "file:///"+info.absoluteResourcePath;
}
},
devtool:'source-map',
devServer: {
contentBase: "public/"
}
}
Another thing is that if in chrome developer tools, if I add the original files into the workspace and map the files from file:// to this folder, I can actually set breakpoints inside these files. So I'm wondering there's a way to map to local resources in vscode.
I changed this:
output: {
// ...snip...
devtoolModuleFilenameTemplate: function(info){
return "file:///"+info.absoluteResourcePath;
}
},
to this:
output: {
// ...snip...
devtoolModuleFilenameTemplate: function(info){
return "file:///"+encodeURI(info.absoluteResourcePath);
}
},
and now it encodes the spaces properly, and the sourcemap file works as expected.
Thanks to Rob Lourens, this problem is caused by spaces and other special characters in the file path that may break sourcemaps.
I am trying to use the Async module of https://github.com/millermedeiros/requirejs-plugins to load the googlemap api. My index.html file contains the following requirejs configuration:
<script data-main="scripts/myscript" src="scripts/require.js"></script>
<script>
requirejs.config({
"baseUrl": "scripts",
"paths": {
"async": "require_plugins/async",
"gmaps": "gmaps",
"infobox":"http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox",
"jquery":"//code.jquery.com/jquery-2.1.1.min",
"jquery_mob":"//code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min"
},
waitSeconds: 15
});
All my javascript files are stored in a scripts folder (relative to index.html)
e.g. script/myscript.js and script/require.js and the async plugins are stored in a subfolder of script called require_plugins e.g. script/require_plugins/async.js
The javascript where I define the googlemap module is called gmaps.js (stored in the script folder) and looks as follows:
define("GMAP",['async!https://maps.googleapis.com/maps/api/js? &key=xxxxxx®ion=uk&libraries=places,geometry'], function () {
return window.google.maps;
});
I have obfuscated the key parameter intentionally here. According to the documentation, I should be able to use the gmaps module anywhere in other javascript files just by invoking it like so:
require(["gmaps"],function(GMAP)
{
map= new GMAP.Map("#map-div");
//and then some code to display the map
}
Unfortunately, it does not work at all. It seems that the googlemap library has not loaded at all. I use absolute URLs for jquery and that works fine but googlemap fails miserably. My question is: Is there something wrong with my requirejs config? I can't think of anything else causing this fault :(
My understanding is that the name you set in define() is what you need to use when writing the dependencies.
e.g.:
define('GMAP', ['async!<path>'], function() { return window.google.maps; });
require(['GMAP'], function(GMaps) { ... });
This is how I get GMaps to load for me. I have a secondary problem now that other libraries that depend on Maps no longer load.
Due to a FUBAR directory organization in a project, I have spent some time re-organizing JS scripts on said project. The project uses requirejs and was functioning wonderfully before the re-org. However, now nothing loads when called or compiles (we use the r.js optimizer) when run -- though compiling completes without complaint. I have checked, double-checked, triple-checked, and now given in to asking for another set of eyes here on Stack Overflow.
Using RequireJS: 2.1.4 and r.js 2.1.4
The following is my configuration:
build-js.js (used for optimizer)
var requirejs = require('requirejs');
var config = {
baseUrl: './public/js',
mainConfigFile: './public/js/config/config.js',
paths: {
'requireLib': 'library/require'
},
out: ".public/js/minified/main.js",
name: "minified/main",
wrap: false,
preserveLicenseComments: false,
deps: ["app/main","modules/movie","modules/theatre"]
};
requirejs.optimize(config);
config.js
// Set the require.js configuration for your application.
require.config({
paths: {
// JavaScript folders
libs: "library",
plugins: "plugin",
app: "app",
adminlibs: "../adminassets/js/plugins/ui",
// Libraries
jquery: "library/jquery",
jqcookie: "library/jquery.cookie",
jqui: "../adminassets/js/plugins/ui/jquery-ui-1.10.0.custom.min",
jqezmark: "library/jquery.ezmark",
jqcolor: "library/jquery.color",
underscore: "library/underscore-amdjs",
backbone: "library/backbone-amdjs",
chosen: "library/chosen.jquery",
moment: "library/moment",
// Site Components
site: "app/site",
sitediscussion: "app/site-discussion",
namespace: "app/namespace",
// Plugins
text: "plugin/text",
async: "plugin/async",
use: "plugin/use",
datetimepicker: "../adminassets/js/plugins/ui/jquery.datetimepicker",
ajaxfileupload: "../adminassets/js/plugins/uploader/jquery.ajaxfileupload"
},
shim: {
'chosen': ['jquery'],
'jqcookie': ['jquery'],
'jqui': ['jquery'],
'jqezmark': ['jquery'],
'jqcolor': ['jquery'],
'site': {
deps: ['jquery','jqezmark','chosen','underscore','namespace','jqui','jqcookie'],
exports: 'site'
},
'sitediscussion': {
deps: ['jquery', 'underscore'],
exports: 'sitediscussion'
},
'jquifull' : ['jquery'],
'datetimepicker' : ['jqui'],
'ajaxfileupload' : ['jquery'],
'backbone': ['underscore','jquery']
},
// Initialize the application with the main application file
deps: ["app/main"]
});
File structure is as follows:
{site-root}/public/js
Which contains directories:
app
config
library
minified
modules
plugin
templates
All files listed above in build-js and config.js are confirmed to be in the expected folders.
requirejs is called as follows:
On dev machines (which I'm currently testing the setup on):
data-main="/js/config/config" src="/js/library/require.js"
On production (currently the minified/main file is not even being created, though it should be)
data-main="/js/minified/main" src="/js/library/require.js"
Can anyone see what I may be doing wrong? Again, there have been no changes to the site proper, the javascript, etc except in the two files (build-js.js and config.js) listed above. The only changes are that files have been physically moved in the directory structure. As a result, I'm nearly positive that I have a pathing issue somewhere, but I cannot seem to find it. Help?
Resolution has been found. I was referencing my configuration file through the data-main attribute in the requirejs include script tag at "/js/config/config". Though I declared a base-path of /public/js, the system was still attempting to use /js/config/ as my base path ( as stated in requirejs documentation that it will base-path based off your data-main attribute if a base path is not otherwise declared ). I moved my config.js file to /js and changed data-main to /js/config and now all paths are working appropriately, referencing base-path /js.
A side-note is that I did not notice the failure of files to load because of my use of Zend Framework and error handling. There were no 404 Errors and the Network tab of my dev-tools showed success in loading all .js files ... it was only when I looked at the response-content of those files that I found they were spitting out PHP error logs rather than .js content.