grasp/README.md

93 lines
5.6 KiB
Markdown
Raw Normal View History

2019-01-06 05:52:53 -08:00
Build status: [![CircleCI](https://circleci.com/gh/karlicoss/grasp.svg?style=svg)](https://circleci.com/gh/karlicoss/grasp)
2019-05-07 03:47:28 -07:00
Grasp is a browser extension [Chrome](https://chrome.google.com/webstore/detail/org-grasp/ohhbcfjmnbmgkajljopdjcaokbpgbgfa) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/grasp), which adds a button/keybinding to capture current page title and url,
2019-01-27 02:06:14 -08:00
possibly selected text, additional comments or tags and adds it into your [Org Mode](https://orgmode.org/) file.
2019-01-06 05:52:53 -08:00
2019-01-27 02:19:29 -08:00
[Screenshot](https://user-images.githubusercontent.com/291333/51799721-a984eb80-221c-11e9-9612-8eb7f553dc01.png), [short demo](https://www.youtube.com/watch?v=Z8Bk-IazdGo).
2019-01-06 15:22:31 -08:00
2019-01-27 02:06:14 -08:00
Install from Chrome store:
* [localhost only version](https://chrome.google.com/webstore/detail/org-grasp/ohhbcfjmnbmgkajljopdjcaokbpgbgfa)
* [any host version](https://chrome.google.com/webstore/detail/org-grasp-any-host/gcfhlnaalomahoampfjhinmgjikkkgep) (the only difference are permissions in manifest)
Collapse boilerplate in a single commit First prototype Added the README Fixed the hot module replacement Minor adjustments on readme Normalizing the env vars and using it capitalized Added info about the react.js branch Fix babel transpiling Using yarn Removing the babel package, just the babel-core does the job Using just the dependencies key on package.json Since it isn't a lib package doesn't matter the separation between devDependencies and dependencies. Updating the css-loader Updating the fs-extra Moving the utility packages to utils folder Better description Adds the license closes #3 Write the env vars on the bundle file http://dev.topheman.com/make-your-react-production-minified-version-with-webpack/ Fixs the hot reload setup Sringifies the env object to define plugin Uses the webpack html plugin to generate the pages in a less hacky way Uses the write-file-webpack-plugin this plugin allows the webpack write on disk all files, even running with the webserver, which is necessary to the hot reload. this plugin also help us to remove nasty hacks and expose bundles to other extension features. Allows exclude some entry points to be hot reloaded It's useful for content scripts that can't keep the connection with the webpack endpoint. Updates the webpack Updates the README with instructions about the content scripts resolves #4 Updates to Webpack 2 closes #8 Expand the DefinePlugin usage In Webpack 1, the replaced value at compile time by define plugin was placed with parenthesis, like ({"NODE_ENV":"development","PORT":3000}), now, it not works in this way, breaking the app. So, to simplify the things, this commit just passes the NODE_ENV var. Fix README Exclude /node_modules/ from babel and css transpiling #9 Source maps to help debugging closes #10 Removes the forbidden webpack config 'chromeExtensionBoilerplate' before build and webserver's start Although I know that it's not a good practice, right now I don't know a good way to keep the boilerplate configs simple as it is today without this hacky solution, so, until we came with a better solution, we'll remove the key before build and webserver's start. #9 Update README.md Removing babel.js Basically, we don't need transpiling with babel since Webpack 2 take care of ES6 modules transpiling and the ES2015 is supported by Chrome. kudos @gagarine resolve #16 Setup boilerplate to load images and other assets in html and css resolves #18 resolves #23 resolves #14 resolves #12 Added icons and images boilerplate Split dependencies on package.json resolves #15 Webpack config improvements (#26) - Use CopyWebpackPlugin to generate `manifest.json` file - Use CleanWebpackPlugin to clear build folder Minor README adjustments * explicitly the required node version * pointing to yarn install instructions page instead suggest install with npm. the yarn page will be always updated to the best way to install the yarn. closes #28 Adding the contribution guidelines
2016-04-14 06:16:50 -07:00
2019-01-28 16:17:37 -08:00
Install from addons.mozilla.org:
2019-11-16 13:32:32 -08:00
* [localhost only version](https://addons.mozilla.org/en-US/firefox/addon/grasp)
Install from a zip: [releases](https://github.com/karlicoss/grasp/releases).
2019-01-06 14:15:53 -08:00
# Running
2019-01-27 02:06:14 -08:00
In the simplest setup, the server runs locally, and you can use 'localhost' version of the extension. If you have to work on a computer where you can't run python scripts,
or your target capture file is just not there, you can selfhost the server part elsewhere and use the 'any host' version. Don't forget to set the endpoint in extension settings!
2019-01-13 07:34:13 -08:00
1. Install server counterpart as systemd service (to autostart it): `server/setup --path /path/to/your/capture.org [--port <custom port>] [--template <custom org-capture template>]`.
2019-01-07 14:53:08 -08:00
2019-01-13 07:34:13 -08:00
Or alternatively, just run it directly if you don't want to autostart it: `server/grasp_server.py --path /path/to/your/capture.org [--port <custom_port>] [--template <custom org-capture template>]`.
2019-01-06 14:15:53 -08:00
2. Install chrome extension and configure hotkeys
Collapse boilerplate in a single commit First prototype Added the README Fixed the hot module replacement Minor adjustments on readme Normalizing the env vars and using it capitalized Added info about the react.js branch Fix babel transpiling Using yarn Removing the babel package, just the babel-core does the job Using just the dependencies key on package.json Since it isn't a lib package doesn't matter the separation between devDependencies and dependencies. Updating the css-loader Updating the fs-extra Moving the utility packages to utils folder Better description Adds the license closes #3 Write the env vars on the bundle file http://dev.topheman.com/make-your-react-production-minified-version-with-webpack/ Fixs the hot reload setup Sringifies the env object to define plugin Uses the webpack html plugin to generate the pages in a less hacky way Uses the write-file-webpack-plugin this plugin allows the webpack write on disk all files, even running with the webserver, which is necessary to the hot reload. this plugin also help us to remove nasty hacks and expose bundles to other extension features. Allows exclude some entry points to be hot reloaded It's useful for content scripts that can't keep the connection with the webpack endpoint. Updates the webpack Updates the README with instructions about the content scripts resolves #4 Updates to Webpack 2 closes #8 Expand the DefinePlugin usage In Webpack 1, the replaced value at compile time by define plugin was placed with parenthesis, like ({"NODE_ENV":"development","PORT":3000}), now, it not works in this way, breaking the app. So, to simplify the things, this commit just passes the NODE_ENV var. Fix README Exclude /node_modules/ from babel and css transpiling #9 Source maps to help debugging closes #10 Removes the forbidden webpack config 'chromeExtensionBoilerplate' before build and webserver's start Although I know that it's not a good practice, right now I don't know a good way to keep the boilerplate configs simple as it is today without this hacky solution, so, until we came with a better solution, we'll remove the key before build and webserver's start. #9 Update README.md Removing babel.js Basically, we don't need transpiling with babel since Webpack 2 take care of ES6 modules transpiling and the ES2015 is supported by Chrome. kudos @gagarine resolve #16 Setup boilerplate to load images and other assets in html and css resolves #18 resolves #23 resolves #14 resolves #12 Added icons and images boilerplate Split dependencies on package.json resolves #15 Webpack config improvements (#26) - Use CopyWebpackPlugin to generate `manifest.json` file - Use CleanWebpackPlugin to clear build folder Minor README adjustments * explicitly the required node version * pointing to yarn install instructions page instead suggest install with npm. the yarn page will be always updated to the best way to install the yarn. closes #28 Adding the contribution guidelines
2016-04-14 06:16:50 -07:00
2019-01-16 14:24:10 -08:00
That's it! If you're using custom port make sure it's same as in the extension settings (default is `12212`).
Collapse boilerplate in a single commit First prototype Added the README Fixed the hot module replacement Minor adjustments on readme Normalizing the env vars and using it capitalized Added info about the react.js branch Fix babel transpiling Using yarn Removing the babel package, just the babel-core does the job Using just the dependencies key on package.json Since it isn't a lib package doesn't matter the separation between devDependencies and dependencies. Updating the css-loader Updating the fs-extra Moving the utility packages to utils folder Better description Adds the license closes #3 Write the env vars on the bundle file http://dev.topheman.com/make-your-react-production-minified-version-with-webpack/ Fixs the hot reload setup Sringifies the env object to define plugin Uses the webpack html plugin to generate the pages in a less hacky way Uses the write-file-webpack-plugin this plugin allows the webpack write on disk all files, even running with the webserver, which is necessary to the hot reload. this plugin also help us to remove nasty hacks and expose bundles to other extension features. Allows exclude some entry points to be hot reloaded It's useful for content scripts that can't keep the connection with the webpack endpoint. Updates the webpack Updates the README with instructions about the content scripts resolves #4 Updates to Webpack 2 closes #8 Expand the DefinePlugin usage In Webpack 1, the replaced value at compile time by define plugin was placed with parenthesis, like ({"NODE_ENV":"development","PORT":3000}), now, it not works in this way, breaking the app. So, to simplify the things, this commit just passes the NODE_ENV var. Fix README Exclude /node_modules/ from babel and css transpiling #9 Source maps to help debugging closes #10 Removes the forbidden webpack config 'chromeExtensionBoilerplate' before build and webserver's start Although I know that it's not a good practice, right now I don't know a good way to keep the boilerplate configs simple as it is today without this hacky solution, so, until we came with a better solution, we'll remove the key before build and webserver's start. #9 Update README.md Removing babel.js Basically, we don't need transpiling with babel since Webpack 2 take care of ES6 modules transpiling and the ES2015 is supported by Chrome. kudos @gagarine resolve #16 Setup boilerplate to load images and other assets in html and css resolves #18 resolves #23 resolves #14 resolves #12 Added icons and images boilerplate Split dependencies on package.json resolves #15 Webpack config improvements (#26) - Use CopyWebpackPlugin to generate `manifest.json` file - Use CleanWebpackPlugin to clear build folder Minor README adjustments * explicitly the required node version * pointing to yarn install instructions page instead suggest install with npm. the yarn page will be always updated to the best way to install the yarn. closes #28 Adding the contribution guidelines
2016-04-14 06:16:50 -07:00
2019-01-06 14:15:53 -08:00
# Motivation
Why use org-capture? Well, it's hard to explain, maybe some other time... However if you do know you want to use it instead/alongside your browser bookmarks, by default
2019-01-27 02:06:14 -08:00
you don't have much choice and have to copy everything manually. For an experienced enough Org Mode user it's a torture.
Collapse boilerplate in a single commit First prototype Added the README Fixed the hot module replacement Minor adjustments on readme Normalizing the env vars and using it capitalized Added info about the react.js branch Fix babel transpiling Using yarn Removing the babel package, just the babel-core does the job Using just the dependencies key on package.json Since it isn't a lib package doesn't matter the separation between devDependencies and dependencies. Updating the css-loader Updating the fs-extra Moving the utility packages to utils folder Better description Adds the license closes #3 Write the env vars on the bundle file http://dev.topheman.com/make-your-react-production-minified-version-with-webpack/ Fixs the hot reload setup Sringifies the env object to define plugin Uses the webpack html plugin to generate the pages in a less hacky way Uses the write-file-webpack-plugin this plugin allows the webpack write on disk all files, even running with the webserver, which is necessary to the hot reload. this plugin also help us to remove nasty hacks and expose bundles to other extension features. Allows exclude some entry points to be hot reloaded It's useful for content scripts that can't keep the connection with the webpack endpoint. Updates the webpack Updates the README with instructions about the content scripts resolves #4 Updates to Webpack 2 closes #8 Expand the DefinePlugin usage In Webpack 1, the replaced value at compile time by define plugin was placed with parenthesis, like ({"NODE_ENV":"development","PORT":3000}), now, it not works in this way, breaking the app. So, to simplify the things, this commit just passes the NODE_ENV var. Fix README Exclude /node_modules/ from babel and css transpiling #9 Source maps to help debugging closes #10 Removes the forbidden webpack config 'chromeExtensionBoilerplate' before build and webserver's start Although I know that it's not a good practice, right now I don't know a good way to keep the boilerplate configs simple as it is today without this hacky solution, so, until we came with a better solution, we'll remove the key before build and webserver's start. #9 Update README.md Removing babel.js Basically, we don't need transpiling with babel since Webpack 2 take care of ES6 modules transpiling and the ES2015 is supported by Chrome. kudos @gagarine resolve #16 Setup boilerplate to load images and other assets in html and css resolves #18 resolves #23 resolves #14 resolves #12 Added icons and images boilerplate Split dependencies on package.json resolves #15 Webpack config improvements (#26) - Use CopyWebpackPlugin to generate `manifest.json` file - Use CleanWebpackPlugin to clear build folder Minor README adjustments * explicitly the required node version * pointing to yarn install instructions page instead suggest install with npm. the yarn page will be always updated to the best way to install the yarn. closes #28 Adding the contribution guidelines
2016-04-14 06:16:50 -07:00
2019-01-06 14:15:53 -08:00
For a while, I used [the only](https://github.com/sprig/org-capture-extension) Chrome extension for that (as for January 2019). However, it relies on setting up MIME
2019-01-27 02:06:14 -08:00
handler which is quite flaky for many people (me included). What is more, capturing via org template requires always running emacs daemon, which might be too much for some people.
2019-01-06 14:15:53 -08:00
But the worst thing is if capturing fails, you have to way of knowing about it. After losing few days of captured stuff due to MIME handler mysteriously not working,
I got fed up and figured it's time to implement something more reliable.
Collapse boilerplate in a single commit First prototype Added the README Fixed the hot module replacement Minor adjustments on readme Normalizing the env vars and using it capitalized Added info about the react.js branch Fix babel transpiling Using yarn Removing the babel package, just the babel-core does the job Using just the dependencies key on package.json Since it isn't a lib package doesn't matter the separation between devDependencies and dependencies. Updating the css-loader Updating the fs-extra Moving the utility packages to utils folder Better description Adds the license closes #3 Write the env vars on the bundle file http://dev.topheman.com/make-your-react-production-minified-version-with-webpack/ Fixs the hot reload setup Sringifies the env object to define plugin Uses the webpack html plugin to generate the pages in a less hacky way Uses the write-file-webpack-plugin this plugin allows the webpack write on disk all files, even running with the webserver, which is necessary to the hot reload. this plugin also help us to remove nasty hacks and expose bundles to other extension features. Allows exclude some entry points to be hot reloaded It's useful for content scripts that can't keep the connection with the webpack endpoint. Updates the webpack Updates the README with instructions about the content scripts resolves #4 Updates to Webpack 2 closes #8 Expand the DefinePlugin usage In Webpack 1, the replaced value at compile time by define plugin was placed with parenthesis, like ({"NODE_ENV":"development","PORT":3000}), now, it not works in this way, breaking the app. So, to simplify the things, this commit just passes the NODE_ENV var. Fix README Exclude /node_modules/ from babel and css transpiling #9 Source maps to help debugging closes #10 Removes the forbidden webpack config 'chromeExtensionBoilerplate' before build and webserver's start Although I know that it's not a good practice, right now I don't know a good way to keep the boilerplate configs simple as it is today without this hacky solution, so, until we came with a better solution, we'll remove the key before build and webserver's start. #9 Update README.md Removing babel.js Basically, we don't need transpiling with babel since Webpack 2 take care of ES6 modules transpiling and the ES2015 is supported by Chrome. kudos @gagarine resolve #16 Setup boilerplate to load images and other assets in html and css resolves #18 resolves #23 resolves #14 resolves #12 Added icons and images boilerplate Split dependencies on package.json resolves #15 Webpack config improvements (#26) - Use CopyWebpackPlugin to generate `manifest.json` file - Use CleanWebpackPlugin to clear build folder Minor README adjustments * explicitly the required node version * pointing to yarn install instructions page instead suggest install with npm. the yarn page will be always updated to the best way to install the yarn. closes #28 Adding the contribution guidelines
2016-04-14 06:16:50 -07:00
2019-01-06 14:15:53 -08:00
My approach still requires a running server, but it's a simple python script which simply appends a text entry to a text file. The backend always responds back and in case anything
fails, you get a notification.
2019-01-27 02:06:14 -08:00
There is a collateral benefit though is that you can potentially use anything as a backend and storage file, e.g. you might be more of a Markdown or Todo.txt fan (let me know if you are interested in that!).
Main feature of this extension is that you can also add a comment and tags to the information you are capturing.
The only downside so far is that it's not as well integrated with emacs as its builtin capture templates. E.g. currently you can't point at a specific header in org file, it would just append at the end.
However, if that's a stopper for you, please let me know, I could come up with something!
# Requirements
2019-06-29 06:44:54 -07:00
No third party dependencies! Just `python3`.
Collapse boilerplate in a single commit First prototype Added the README Fixed the hot module replacement Minor adjustments on readme Normalizing the env vars and using it capitalized Added info about the react.js branch Fix babel transpiling Using yarn Removing the babel package, just the babel-core does the job Using just the dependencies key on package.json Since it isn't a lib package doesn't matter the separation between devDependencies and dependencies. Updating the css-loader Updating the fs-extra Moving the utility packages to utils folder Better description Adds the license closes #3 Write the env vars on the bundle file http://dev.topheman.com/make-your-react-production-minified-version-with-webpack/ Fixs the hot reload setup Sringifies the env object to define plugin Uses the webpack html plugin to generate the pages in a less hacky way Uses the write-file-webpack-plugin this plugin allows the webpack write on disk all files, even running with the webserver, which is necessary to the hot reload. this plugin also help us to remove nasty hacks and expose bundles to other extension features. Allows exclude some entry points to be hot reloaded It's useful for content scripts that can't keep the connection with the webpack endpoint. Updates the webpack Updates the README with instructions about the content scripts resolves #4 Updates to Webpack 2 closes #8 Expand the DefinePlugin usage In Webpack 1, the replaced value at compile time by define plugin was placed with parenthesis, like ({"NODE_ENV":"development","PORT":3000}), now, it not works in this way, breaking the app. So, to simplify the things, this commit just passes the NODE_ENV var. Fix README Exclude /node_modules/ from babel and css transpiling #9 Source maps to help debugging closes #10 Removes the forbidden webpack config 'chromeExtensionBoilerplate' before build and webserver's start Although I know that it's not a good practice, right now I don't know a good way to keep the boilerplate configs simple as it is today without this hacky solution, so, until we came with a better solution, we'll remove the key before build and webserver's start. #9 Update README.md Removing babel.js Basically, we don't need transpiling with babel since Webpack 2 take care of ES6 modules transpiling and the ES2015 is supported by Chrome. kudos @gagarine resolve #16 Setup boilerplate to load images and other assets in html and css resolves #18 resolves #23 resolves #14 resolves #12 Added icons and images boilerplate Split dependencies on package.json resolves #15 Webpack config improvements (#26) - Use CopyWebpackPlugin to generate `manifest.json` file - Use CleanWebpackPlugin to clear build folder Minor README adjustments * explicitly the required node version * pointing to yarn install instructions page instead suggest install with npm. the yarn page will be always updated to the best way to install the yarn. closes #28 Adding the contribution guidelines
2016-04-14 06:16:50 -07:00
2019-01-06 14:15:53 -08:00
# Potentional improvements
2019-01-27 02:06:14 -08:00
* see [todos](./TODO.org)
Collapse boilerplate in a single commit First prototype Added the README Fixed the hot module replacement Minor adjustments on readme Normalizing the env vars and using it capitalized Added info about the react.js branch Fix babel transpiling Using yarn Removing the babel package, just the babel-core does the job Using just the dependencies key on package.json Since it isn't a lib package doesn't matter the separation between devDependencies and dependencies. Updating the css-loader Updating the fs-extra Moving the utility packages to utils folder Better description Adds the license closes #3 Write the env vars on the bundle file http://dev.topheman.com/make-your-react-production-minified-version-with-webpack/ Fixs the hot reload setup Sringifies the env object to define plugin Uses the webpack html plugin to generate the pages in a less hacky way Uses the write-file-webpack-plugin this plugin allows the webpack write on disk all files, even running with the webserver, which is necessary to the hot reload. this plugin also help us to remove nasty hacks and expose bundles to other extension features. Allows exclude some entry points to be hot reloaded It's useful for content scripts that can't keep the connection with the webpack endpoint. Updates the webpack Updates the README with instructions about the content scripts resolves #4 Updates to Webpack 2 closes #8 Expand the DefinePlugin usage In Webpack 1, the replaced value at compile time by define plugin was placed with parenthesis, like ({"NODE_ENV":"development","PORT":3000}), now, it not works in this way, breaking the app. So, to simplify the things, this commit just passes the NODE_ENV var. Fix README Exclude /node_modules/ from babel and css transpiling #9 Source maps to help debugging closes #10 Removes the forbidden webpack config 'chromeExtensionBoilerplate' before build and webserver's start Although I know that it's not a good practice, right now I don't know a good way to keep the boilerplate configs simple as it is today without this hacky solution, so, until we came with a better solution, we'll remove the key before build and webserver's start. #9 Update README.md Removing babel.js Basically, we don't need transpiling with babel since Webpack 2 take care of ES6 modules transpiling and the ES2015 is supported by Chrome. kudos @gagarine resolve #16 Setup boilerplate to load images and other assets in html and css resolves #18 resolves #23 resolves #14 resolves #12 Added icons and images boilerplate Split dependencies on package.json resolves #15 Webpack config improvements (#26) - Use CopyWebpackPlugin to generate `manifest.json` file - Use CleanWebpackPlugin to clear build folder Minor README adjustments * explicitly the required node version * pointing to yarn install instructions page instead suggest install with npm. the yarn page will be always updated to the best way to install the yarn. closes #28 Adding the contribution guidelines
2016-04-14 06:16:50 -07:00
2019-06-29 06:44:54 -07:00
# Permissions used
* `storage` for settings
* `notifications` for showing error notification
* `activeTab` for requesting url, title and selected text
* `http://localhost/capture` for talking with backend
* `content_security_policy` needed for webpack
# Building & developing
2019-01-06 14:15:53 -08:00
The most up-to-date instructions should be in [CI config](./.circleci/config.yml).
Collapse boilerplate in a single commit First prototype Added the README Fixed the hot module replacement Minor adjustments on readme Normalizing the env vars and using it capitalized Added info about the react.js branch Fix babel transpiling Using yarn Removing the babel package, just the babel-core does the job Using just the dependencies key on package.json Since it isn't a lib package doesn't matter the separation between devDependencies and dependencies. Updating the css-loader Updating the fs-extra Moving the utility packages to utils folder Better description Adds the license closes #3 Write the env vars on the bundle file http://dev.topheman.com/make-your-react-production-minified-version-with-webpack/ Fixs the hot reload setup Sringifies the env object to define plugin Uses the webpack html plugin to generate the pages in a less hacky way Uses the write-file-webpack-plugin this plugin allows the webpack write on disk all files, even running with the webserver, which is necessary to the hot reload. this plugin also help us to remove nasty hacks and expose bundles to other extension features. Allows exclude some entry points to be hot reloaded It's useful for content scripts that can't keep the connection with the webpack endpoint. Updates the webpack Updates the README with instructions about the content scripts resolves #4 Updates to Webpack 2 closes #8 Expand the DefinePlugin usage In Webpack 1, the replaced value at compile time by define plugin was placed with parenthesis, like ({"NODE_ENV":"development","PORT":3000}), now, it not works in this way, breaking the app. So, to simplify the things, this commit just passes the NODE_ENV var. Fix README Exclude /node_modules/ from babel and css transpiling #9 Source maps to help debugging closes #10 Removes the forbidden webpack config 'chromeExtensionBoilerplate' before build and webserver's start Although I know that it's not a good practice, right now I don't know a good way to keep the boilerplate configs simple as it is today without this hacky solution, so, until we came with a better solution, we'll remove the key before build and webserver's start. #9 Update README.md Removing babel.js Basically, we don't need transpiling with babel since Webpack 2 take care of ES6 modules transpiling and the ES2015 is supported by Chrome. kudos @gagarine resolve #16 Setup boilerplate to load images and other assets in html and css resolves #18 resolves #23 resolves #14 resolves #12 Added icons and images boilerplate Split dependencies on package.json resolves #15 Webpack config improvements (#26) - Use CopyWebpackPlugin to generate `manifest.json` file - Use CleanWebpackPlugin to clear build folder Minor README adjustments * explicitly the required node version * pointing to yarn install instructions page instead suggest install with npm. the yarn page will be always updated to the best way to install the yarn. closes #28 Adding the contribution guidelines
2016-04-14 06:16:50 -07:00
2019-01-06 14:15:53 -08:00
You're gonna need `npm` for building extension.
Collapse boilerplate in a single commit First prototype Added the README Fixed the hot module replacement Minor adjustments on readme Normalizing the env vars and using it capitalized Added info about the react.js branch Fix babel transpiling Using yarn Removing the babel package, just the babel-core does the job Using just the dependencies key on package.json Since it isn't a lib package doesn't matter the separation between devDependencies and dependencies. Updating the css-loader Updating the fs-extra Moving the utility packages to utils folder Better description Adds the license closes #3 Write the env vars on the bundle file http://dev.topheman.com/make-your-react-production-minified-version-with-webpack/ Fixs the hot reload setup Sringifies the env object to define plugin Uses the webpack html plugin to generate the pages in a less hacky way Uses the write-file-webpack-plugin this plugin allows the webpack write on disk all files, even running with the webserver, which is necessary to the hot reload. this plugin also help us to remove nasty hacks and expose bundles to other extension features. Allows exclude some entry points to be hot reloaded It's useful for content scripts that can't keep the connection with the webpack endpoint. Updates the webpack Updates the README with instructions about the content scripts resolves #4 Updates to Webpack 2 closes #8 Expand the DefinePlugin usage In Webpack 1, the replaced value at compile time by define plugin was placed with parenthesis, like ({"NODE_ENV":"development","PORT":3000}), now, it not works in this way, breaking the app. So, to simplify the things, this commit just passes the NODE_ENV var. Fix README Exclude /node_modules/ from babel and css transpiling #9 Source maps to help debugging closes #10 Removes the forbidden webpack config 'chromeExtensionBoilerplate' before build and webserver's start Although I know that it's not a good practice, right now I don't know a good way to keep the boilerplate configs simple as it is today without this hacky solution, so, until we came with a better solution, we'll remove the key before build and webserver's start. #9 Update README.md Removing babel.js Basically, we don't need transpiling with babel since Webpack 2 take care of ES6 modules transpiling and the ES2015 is supported by Chrome. kudos @gagarine resolve #16 Setup boilerplate to load images and other assets in html and css resolves #18 resolves #23 resolves #14 resolves #12 Added icons and images boilerplate Split dependencies on package.json resolves #15 Webpack config improvements (#26) - Use CopyWebpackPlugin to generate `manifest.json` file - Use CleanWebpackPlugin to clear build folder Minor README adjustments * explicitly the required node version * pointing to yarn install instructions page instead suggest install with npm. the yarn page will be always updated to the best way to install the yarn. closes #28 Adding the contribution guidelines
2016-04-14 06:16:50 -07:00
2019-01-06 14:15:53 -08:00
npm install
2019-12-09 12:43:38 -08:00
./build --target <browser> # e.g. ./build --target chrome or ./build --target firefox
2019-01-06 14:15:53 -08:00
2019-12-09 12:43:38 -08:00
After that you can find the extension in `dist` directory and 'Load unpacked** if necessary. There is also Flow and Eslint set up.
2019-01-16 14:24:10 -08:00
2019-01-27 02:06:14 -08:00
## building any host version
2019-12-09 12:43:38 -08:00
If you do need unresticted url permissions, build the extensions like that: `ANY_HOST=yes ./build`.
## testing and linting
2019-06-29 11:11:15 -07:00
Check [CI config](./.circleci/config.yml) to figure out all the checks I'm doing.
The only test(s) that don't run on CI at the moment (e.g. due to lack of X server) are marked with `@skip_if_ci`. You can run them manually though.
2019-12-09 12:43:38 -08:00
Extra tests (not integrated in CI yet):
- `scripts/test_with_browser.py`
## publishing
- firefox: `./build --firefox --release --lint && web-ext -s dist build`, then upload on [AMO](https://addons.mozilla.org/en-GB/developers/addon/grasp/versions)
2019-06-29 11:11:15 -07:00
2019-01-06 14:15:53 -08:00
# Credits
* Icon made by <a href="https://www.freepik.com/" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>, licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
* [Original Org Capture extension](https://github.com/sprig/org-capture-extension)
2019-01-13 08:10:05 -08:00
* [Boilerplate for Webpack Chrome extension](https://github.com/samuelsimoes/chrome-extension-webpack-boilerplate)