{"id":236,"date":"2015-04-19T18:43:03","date_gmt":"2015-04-19T18:43:03","guid":{"rendered":"https:\/\/www.tech.shinynewthings.com\/?p=236"},"modified":"2015-04-19T18:43:03","modified_gmt":"2015-04-19T18:43:03","slug":"create-node-based-chrome-extension","status":"publish","type":"post","link":"https:\/\/www.tech.shinynewthings.com\/?p=236","title":{"rendered":"Create Node based Chrome Extension"},"content":{"rendered":"

Creating a Node based Chrome Extension starter project is easy using yo’s chrome-chrome-extension generator.<\/p>\n

To start, make sure you have yo and the generator installed.<\/p>\n

\n$  npm install -g yo\n$  npm install -g generator-chrome-extension\n<\/pre>\n
Then.<\/p>\n
\n$  mkdir your-new-ext-name; cd your-new-ext-name\n$  yo chrome-extension --skip-install\n<\/pre>\n
From chrome:\/\/extensions\/<\/a><\/p>\n
Press Load upacked extension…<\/p>\n
Select your app.<\/p>\n
Yup.<\/p>\n
Still working on getting this to work with Ember-Cli.<\/p>\n
Looks like .bowerrc, bower.json, and package.json need to be reworked.<\/p>\n
.bowerrc<\/p>\n
\n{\n  \"directory\": \"bower_components\",\n  \"analytics\": false\n}\n<\/pre>\n
bower.json<\/p>\n
\n{\n  \"name\": \"your-new-ext-name\",\n  \"dependencies\": {\n    \"ember\": \"1.11.1\",\n    \"ember-cli-shims\": \"ember-cli\/ember-cli-shims#0.0.3\",\n    \"ember-cli-test-loader\": \"ember-cli-test-loader#0.1.3\",\n    \"ember-data\": \"1.0.0-beta.16.1\",\n    \"ember-load-initializers\": \"ember-cli\/ember-load-initializers#0.1.4\",\n    \"ember-qunit\": \"0.3.1\",\n    \"ember-qunit-notifications\": \"0.0.7\",\n    \"ember-resolver\": \"~0.1.15\",\n    \"jquery\": \"^1.11.1\",\n    \"loader.js\": \"ember-cli\/loader.js#3.2.0\",\n    \"qunit\": \"~1.17.1\"\n  }\n}\n\n<\/pre>\n
In package.json update the following<\/p>\n
\n  \"scripts\": {\n    \"start\": \"ember server\",\n    \"build\": \"ember build\",\n    \"test\": \"ember test\",\n    \"postinstall\": \".\/node_modules\/bower\/bin\/bower install\"\n  },\n  \"repository\": \"\",\n  \"engines\": {\n    \"node\": \">= 0.10.0\"\n  },\n  \"author\": \"\",\n  \"license\": \"MIT\",\n  \"devDependencies\": {\n    \"bower\": \"^1.4.1\",\n    \"broccoli-asset-rev\": \"^2.0.2\",\n    \"ember-browserify\": \"^0.6.4\",\n    \"ember-cli\": \"0.2.3\",\n    \"ember-cli-app-version\": \"0.3.3\",\n    \"ember-cli-babel\": \"^5.0.0\",\n    \"ember-cli-content-security-policy\": \"^0.4.0\",\n    \"ember-cli-dependency-checker\": \"0.0.8\",\n    \"ember-cli-htmlbars\": \"0.7.4\",\n    \"ember-cli-ic-ajax\": \"0.1.1\",\n    \"ember-cli-inject-live-reload\": \"^1.3.0\",\n    \"ember-cli-qunit\": \"0.3.10\",\n    \"ember-cli-uglify\": \"1.0.1\",\n    \"ember-data\": \"1.0.0-beta.16.1\",\n    \"ember-export-application-global\": \"^1.0.2\"\n  }\n<\/pre>\n
Re-run<\/p>\n
\n$ npm install\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Creating a Node based Chrome Extension starter project is easy using yo’s chrome-chrome-extension generator. To start, make sure you have yo and the generator installed. $ npm install -g yo $ npm install -g generator-chrome-extension Then. $ mkdir your-new-ext-name; cd your-new-ext-name $ yo chrome-extension –skip-install From chrome:\/\/extensions\/ Press Load upacked extension… Select your app. Yup. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-236","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=\/wp\/v2\/posts\/236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=236"}],"version-history":[{"count":1,"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=\/wp\/v2\/posts\/236\/revisions"}],"predecessor-version":[{"id":237,"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=\/wp\/v2\/posts\/236\/revisions\/237"}],"wp:attachment":[{"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}