Posts

Showing posts with the label Chrome Extension

Material Design for the Chrome App/Ext Store

Image
I don't work for Google but if I did I would show some love to the much needed chrome app & extension store. I would even take it further by making it have value to other browsers but that's another topic. Either way this article is able adding chrome's app/extensions to the play.google.com store.


Taking the Google Play Layout and add Chrome App/Ext
Using the Google Play's layout as a template but fitting the needs of the Chrome Store's needs

BACKGROUND-COLOR: #FFC107

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAABGdBT…DAS7ZcAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAABJRU5ErkJggg==); }

Original Look



Note 
The Google Play Layout has a minor bug where if you have a cropped screen in half of the window and scroll right it will sometime make the menu disappear. It will reappear when you scroll down, if this was on purpose why not make it like a side-nav component.

Links:
 redirect https://chrome.google.com/webst…

Project: DuckSauce Notes Part 5

I've been secretly working on this project again (of course there's my game I am still working). However I wanted to take a step back and look at what this project has done for me. The biggest thing is that it has done is get me to question my work follow and think about how to improve it.

This project must
create filescreate templatesclean up code build manual.New Approach
Working with the chrome work-space has its limits and it appears there is a method to set the contents of a particular however it is not implemented and is filed as a bug. This is a long outstanding bug so chances are slim.

The guts
https://github.com/GoogleChrome/chrome-app-samples/blob/master/samples/filesystem-access/js/app.js

Reference
https://www.npmjs.org/package/livereload
https://github.com/livereload/livereload-extensions/tree/master/Chrome/LiveReload

Resources
https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/filesystem-access
http://stackoverflow.com/a/15197993/1265036

Project: Aptitude-Words Update 1.2.5

Image
Recently returned to my chrome extension because I had some features I wanted to see and needed improving. I like to pretend I'm the only person who really uses this extension because I really don't know who my users are or what they would like to see but I'm open to suggestions. There is stats for the extension on weekly users but I don't think much of it.

You will need to re-enable with this update since I added Google Analytics but not using it yet.
Features ( Live now!)
Trash button (rather than click checkbox)Donation button (I'm doing this with all my free apps)This is a one time purchase in the app, I'm looking to get rich.Redrawing words after delete.In the Future  New Logo (working on the art with a material design look).Google Analytics (I'm curious to know what popular words ppl are captured.)Page to display - word of the day, logic to prevent bad words from showing so dont try it...Reordering words - Just a really nice thing to have but watc…

Chrome Extension Project: Aptitude Words Part 2

On my previous article  I briefly introduced this project because it came to me when I had very little time but I knew if I didn't publish it at the time I probably wouldn't for another month. The project was finished as far as things going with a first wave of implementation and I have a lot of ideas to add on this project. This is application really for myself rather than any particular audience. With my design I looked at first how I wanted it to behave and its kinda interesting to see where I'll end up with this one. I don't let this project get in the ways of my high tasks and its really just for fun. So updates will probably minimal. You can get all the information about the project on Chrome marketplace.

Future releases

Categories - sometimes you need to organize them in a way to remember them.Removing - delete a whole category.Adding - Drag n' drop a word into a categoryEmails - Get weekly emails to let you know which words you use less often or moreAlso pro…

Project: DuckSauce Notes Part IIII

A lot of this article not going to make sense to people because it relates to my thoughts as I wrote them down and what I researched or tried to understand. Some of it is wrong, and looking back probably could have approached somethings better but that's just a natural way of learning. Also a lot of my notes are going to appear as if I'm going in circles (or that's just how I see it). Previous articles can be found here.

Day 1- 10/2/14
    I started looking at thechrome.devtools.panels.openResource, by resources I think the docs means a web page's resources not the devtool's resources (something that work-spaces might have access to). The next part, "Requests DevTools to open a URL in a Developer Tools panel." 
"The real power of Work-spaces lies in being able to map a local file to a URL (or “Network Resource”). Whenever Chrome loads the mapped URL, it displays the work-space folder contents in place of the network folder contents. It’s as if it’s…

Project: DuckSauce Notes Part III

It's been a couple of weeks since I've released an update on this project, but much of it is due to the fact that I have completely reimplemented my approach. I now have a better understanding where browserify will come into place and where grunt will come into place. Most importantly I understand the v8 javascript engine which runs underneath the chrome browser; this is a major win for me. Here is my previous article...

Day 1 Day 7: GruntJS LiveReload--Take Productivity to the Next Level | Openshift BlogI basically want to remove the need for LiveReload.Moving from CodeKit to Grunt Watch + LiveReload for Real-time JavaScript/LESS/SASS Compilation - Justin KlemmAnother great example what LiveReload can do.Chrome Apps Office Hours: NodeJS in Chrome packaged apps - YouTubeExample with Browserify but you can't using it against Grunt.Iced Blog - node js in chromehttp://stackoverflow.com/questions/16788731/grunt-watch-multiple-files-compile-only-changedhttp://stackoverflow.co…

Chrome Extension Project: Aptitude Words

I am currently working on two chrome extension projects, however this one is more of a warm up for what is ahead. Not to be confused with my other Chrome Project Ducksauce and not that I worked very long on this but I really should get back to my Unity project... So ignore these until I'm free again.

Notes to self.
     Don't using the create context menu code in a regular script because everytime you right click.
There is a difference from the background page and the extension popup page. Each has it's own devtool and console page. For the background you have to click on the link provided in chrome://extensions/ for chrome. As for the popup you can just inspect it like you would with any page. However if you reload or update the extension the window for inspecting it closes.

Question
How do I use the storage in the popup as I would for the background page?How to communicate between popup.js and background.js in chrome extension? - Stack Overflowsending chrome.storage da…

Project: DuckSauce Notes Part II

Working on the second part of my project... I now need to automate bootstrap builds and compare the bootstrap's unmodified version of bootstrap to the new styles that I have added or modified on the bootstrap compiled css. From there DuckSauce should separate the style changes and place them in a .less file and recompile, which will then override or append the proper styles.
Day 3Managing module dependencies - How To Node - NodeJS
package.json - More reading...
Getting started - Grunt: The JavaScript Task Runner - Docs, docs and more docs
Moving from CodeKit to Grunt Watch + LiveReload for Real-time Compilation - Lots of help
Day 4gruntjs/grunt-contrib-watch - This is the direction I am heading now! No compatible version found: chalk@'0.4.0'  - Helping myself.

This week had to cut my research a little short but I feel I am really close to a solution with little effect on my part since a lot what I need is already built and simply needs to be configured to my preferences.

Project: DuckSauce Notes

What is Ducksauce
    Ducksauce is a small pet project I am working on to make everyday work easier with css and javascript cleanups. The hope is to automate those cleanups in controllable way I see fit, and to also make my code more scalable with third party libraries.

Mission
Listen to CSS changes and separate them into a .less file.

Features (Just for starters focusing on css cleanups)
Console system to attach files/directories.Listen to CSS filesRemove changes and separate into a less file.Compile new less files with Unmodified Third party styles (Overridering the css results)Log changes.Refresh page to see the changes? I would like this but it might get annoying.Day 1

Challenges: Listening to file, watch changes, find what those changes are.
filesystems - Node.JS: How does "fs.watchFile" work? - Stack OverflowNode.js: Event Emitters and Listeners | ScribblingsAccessing the File System in Node.jsObserve file changes with node.js - Stack OverflowIssues: No issues.

Day 2Challeng…