Geek asks and answers

How do you modulate your Chrome apps using a browser?

I watched the next video in Google Apps for Google and found out how you can use the browser to pack your JS into a single file using the node CommonJS packaging system. I like this idea because it also adds many node libraries ported to the browser and can handle CoffeeScript.

The only thing the video didn’t apply to was how to make a Chrome app with more than one look still use the browser in a dry way. Let me explain. Usually your browser team takes a series of JS files (designed as modules) and combines them into one JS file with some sugar packaging. It’s great that you link to this JS file, for example, to your content page, help page or pop-up page. However, if you had an application with a background page andon the popup page, would you include the same compiled JS file in each? Could this cause chrome to load the script twice (in duplicate)? If so, it seems like a lot of waste interprets everything just to get the details you need. Or is it required () / export modal to prevent unnecessary interpretation of modules that you might not need for a specific context?

If this is not the best practice, how does one package modulate in such a way that each page receives the necessary modules in a dry way, without having to repeat itself or have separate browser packages on the page? How did others approach this topic?

+5
source share
4 answers

, , , (, , ..). :

.
├── extension
│   ├── js
│   └── manifest.json
├── lib
│   ├── background
│   │   └── index.js
│   ├── content
│   │   └── index.js
│   └── frame
│       ├── index.js
│       ├── models
│       │   └── ...
│       └── views
│           └── ...
└── package.json

lib index.js . , require .

browserify watchify ./extension/js/:

$ browserify ./lib/background/index.js -o ./extension/js/background.js
$ browserify ./lib/content/index.js -o ./extension/js/content.js
$ browserify ./lib/frame/index.js -o ./extension/js/frame.js

, , background.js content.js, require() , .

Gruntfile.js custom npm script.

.

+5

JS script JS , background.html background script / ( read window). , , , :

Application = chrome.extension.getBackgroundPage().myGlobalFunction();

SO- .

, JS, / .

+3

, Browserify, " -". HTML ( public/index.html), , (, ). Javascript, (.. Backbone, SpineJS ..).

- "" , HTML , , html ( javascript templating, Handlebars, Mustache, ECO ..), AJAX, . - javascript, .

, SPA, , JS.

If you've previously used full-stack web development, where most of the user interface is displayed in server language, the idea of ​​a one-page web application can be a bit of a shock. While most SPAs typically have a server component, it usually comes down to a RESTful API that exposes data endpoints (which will trigger AJAX calls) and persistence.

+1
source

In Windows 10, I used MKLINKscript (js) and style (css) project files to exchange source files

MKLINK /J "D:\Projects\Chrome Extension Projects\myproject\shared" "D:\Projects\Chrome Extension Projects\shared"
0
source

More articles:


All Articles