Skip to content
Permalink
Browse files

Chrome extension: generate developer version in examples

  • Loading branch information
raffaelemasotti committed Sep 5, 2015
1 parent 6a90db9 commit a8330dd3603c2c86db5127ee80274fe36117667e
@@ -7,6 +7,7 @@
/coverage/

/app/examples/*.html
/app/examples/extensions
/app/css/temporary.css

.idea
@@ -217,6 +217,30 @@ module.exports = function(grunt) {
src: ['<%= conf.build %>/extensions/chrome/inject/css/pundit.css'],
dest: '<%= conf.build %>/extensions/chrome/inject/css/'
}]
},
dev_chrome: {
options: {
patterns: [{
match: /fonts\//g,
replacement: 'chrome-extension://__MSG_@@extension_id__/inject/css/fonts/'
},
{
match: /url\(img/g,
replacement: 'url(chrome-extension://__MSG_@@extension_id__/inject/css/img'
}]
},
files: [{
expand: true,
flatten: true,
src: ['<%= conf.app %>/examples/extensions/chrome/inject/css/style.css'],
dest: '<%= conf.app %>/examples/extensions/chrome/inject/css/'
},
{
expand: true,
flatten: true,
src: ['<%= conf.app %>/examples/extensions/chrome/inject/css/pundit2.css'],
dest: '<%= conf.app %>/examples/extensions/chrome/inject/css/'
}]
}
},

@@ -365,6 +389,40 @@ module.exports = function(grunt) {
src: 'fonts/*'
}]
},
dev_chrome: {
files: [{
expand: true,
cwd: '<%= conf.app %>/extensions/chrome/',
dest: '<%= conf.app %>/examples/extensions/chrome/',
src: '**/*'
}]
},
dev_chrome_modules: {
files: [{
expand: true,
cwd: '<%= conf.app %>/examples/src_crx/',
dest: '<%= conf.app %>/examples/extensions/chrome/js/',
src: 'modules_conf.js'
}]
},
dev_chrome_css: {
files: [{
expand: true,
cwd: '<%= conf.app %>/css/',
dest: '<%= conf.app %>/examples/extensions/chrome/inject/css/',
src: '{,*/}*.css'
}, {
expand: true,
cwd: '<%= conf.app %>/styles/',
dest: '<%= conf.app %>/examples/extensions/chrome/inject/css/',
src: 'img/*'
}, {
expand: true,
cwd: '<%= conf.app %>/fonts/pundit-icon-font/',
dest: '<%= conf.app %>/examples/extensions/chrome/inject/css/',
src: 'fonts/*'
}]
},
css: {
expand: true,
cwd: '<%= conf.app %>/css',
@@ -454,7 +512,7 @@ module.exports = function(grunt) {
watch: {
less: {
files: ['<%= conf.app %>/styles/*/*.less'],
tasks: ['less:dev', 'copy:fonts']
tasks: ['less:dev', 'copy:fonts', 'copy:dev_chrome_css', 'replace:dev_chrome']
},
unit: {
files: [
@@ -468,7 +526,7 @@ module.exports = function(grunt) {
'<%= conf.app %>/extensions/chrome/*',
'<%= conf.app %>/extensions/chrome/**/*'
],
tasks: ['copy:chrome']
tasks: ['copy:dev_chrome']
},
buildhtml: {
files: [
@@ -503,6 +561,10 @@ module.exports = function(grunt) {

doc: {
url: 'http://localhost:<%= connect.options.port %>/build/docs/'
},

inc: {
url: 'http://localhost:<%= connect.options.port %>/app/examples/src'
}
},

@@ -688,11 +750,11 @@ module.exports = function(grunt) {

grunt.registerTask('build', 'Builds a production-ready version of the application', ['clean:dist', 'copy:fonts', 'html2js:main', 'html2js:korboee', 'examples', 'useminPrepare', 'less:dist', 'copy:css', 'imagemin',
'htmlmin', 'concat', 'copy:dist', 'ngAnnotate', 'cssmin', 'uglify',
'rev', 'usemin', 'htmlmin:final', 'copy:bookmarklet', 'copy:chrome', 'replace'
'rev', 'usemin', 'htmlmin:final', 'copy:bookmarklet', 'copy:chrome', 'replace:chrome'
]);

grunt.registerTask('dev', 'Live dev workflow: watches app files and reloads the browser automatically',
['less:dev', 'copy:fonts', 'imagemin:dev', 'html2js:main', 'html2js:korboee', 'examples', 'connect:livereload', 'open:server', 'watch']);
['less:dev', 'copy:fonts', 'copy:dev_chrome', 'copy:dev_chrome_modules', 'copy:dev_chrome_css', 'replace:dev_chrome', 'imagemin:dev', 'html2js:main', 'html2js:korboee', 'examples', 'connect:livereload', 'open:server', 'watch']);
grunt.registerTask('dev:unit', 'Live dev UNIT tests workflow: watches for test files and runs unit tests automatically',
['test:unit', 'watch:unit']);
grunt.registerTask('dev:chrome', 'Live dev Chrome', ['watch:chrome']);
@@ -0,0 +1,87 @@
var developMode = true;

var cssInject = ['inject/css/pundit2.css', 'inject/css/korboee.css', 'inject/css/style.css'],
scriptInject = [];

var _lib = 'http://localhost:9000/app/examples/src/_libs.inc',
_pundit = 'http://localhost:9000/app/examples/src/_pundit.inc';

var incsScript = {},
srcRegExp = /src="([^"']+)/g;

var updateCallback;

var fileRequest = function(url, callback, lastCall) {
var xhttp = new XMLHttpRequest();
var method = 'GET';

xhttp.onload = function() {
callback(url, xhttp.responseText);
if (typeof lastCall !== 'undefined') {
lastCall();
}
};
xhttp.onerror = function() {
console.log('Something wrong with the file request');
};
xhttp.open(method, url, true);
if (method == 'POST') {
xhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}
xhttp.send(null); // null || data

return true;
}

var extractScript = function(url, script) {
incsScript[url] = script;
}

var updateCurrentTab = function(url, script) {
extractScript(url, script);

if (typeof updateCallback !== 'undefined') {
updateCallback();
updateCallback = undefined;
}

}

var extractUrl = function(file, text) {
var referenceMatch = text.match(srcRegExp),
currentUrl;

if (file === _lib) {
for (var i in referenceMatch) {
currentUrl = referenceMatch[i].replace('src="../../', 'http://localhost:9000/');
scriptInject.push(currentUrl);
fileRequest(currentUrl, extractScript);
}
} else if (file === _pundit) {
for (var i in referenceMatch) {
currentUrl = referenceMatch[i].replace('src="../', 'http://localhost:9000/app/');
scriptInject.push(currentUrl);
if (parseInt(i) === referenceMatch.length - 1) {
fileRequest(currentUrl, updateCurrentTab);
} else {
fileRequest(currentUrl, extractScript);
}
}
}
};

var updateScript = function(tabId, callback) {
scriptInject = [];
incsScript = {};

fileRequest(_lib, extractUrl);
fileRequest(_pundit, extractUrl);

if (typeof tabId !== 'undefined') {
updateCallback = function() {
callback(tabId)
};
}
};

updateScript();
@@ -1,5 +1,6 @@
<html>
<head>
<script src='../js/modules_conf.js'></script>
<script src='../js/background.js'></script>
</head>
<body>
@@ -48,30 +48,42 @@ var injectScripts = function(tabId, force, callback) {
}

// Run the css.
chrome.tabs.insertCSS(tabId, {
file: 'inject/css/pundit.css',
runAt: "document_start"
});
for (var c in cssInject) {
chrome.tabs.insertCSS(tabId, {
file: cssInject[c],
runAt: "document_start"
});
}

// Run the JavaScript with a specific configuration.
chrome.tabs.executeScript(tabId, {
file: 'inject/extension_conf.js',
runAt: "document_start"
});
chrome.tabs.executeScript(tabId, {
file: 'inject/scripts/libs.js',
runAt: "document_start"
});
chrome.tabs.executeScript(tabId, {
file: 'inject/scripts/pundit2.js',
runAt: "document_start"
},
function() {
if (executeCallback && typeof callback !== 'undefined') {
callback();
}

for (var s in scriptInject) {
var currentUrl = scriptInject[s],
details = developMode ? {
code: incsScript[currentUrl],
runAt: "document_start"
} : {
file: currentUrl,
runAt: "document_start"
};

// Execute le callback after the last script injection
if (parseInt(s) === scriptInject.length - 1) {
chrome.tabs.executeScript(tabId, details,
function() {
if (executeCallback && typeof callback !== 'undefined') {
callback();
}
}
);
} else {
chrome.tabs.executeScript(tabId, details);
}
);
}

if (includeContentScript) {
chrome.tabs.executeScript(tabId, {
@@ -246,12 +258,16 @@ chrome.tabs.onReplaced.addListener(function(addedTabId, removedTabId) {
});

chrome.tabs.onUpdated.addListener(function(tabId, info, tab) {
console.log("chrome.tabs.onUpdated");
if (info.status == "complete") {
if (tab.url === "chrome://newtab/") {
return;
}
onUpdate(tabId);

if (developMode) {
updateScript(tabId, onUpdate);
} else {
onUpdate(tabId);
}
}
});

@@ -0,0 +1,4 @@
var developMode = false;

var cssInject = ['inject/css/pundit.css'],
scriptInject = ['inject/scripts/libs.js', 'inject/scripts/pundit2.js'];

0 comments on commit a8330dd

Please sign in to comment.
You can’t perform that action at this time.