Options page & structural redesign

.github/workflows/release.yml

@@ -24,7 +24,7 @@ jobs:
       - uses: fregante/daily-version-action@v1
         name: Create tag if necessary
         id: daily-version
-      - uses: notlmn/release-with-changelog@v3
+      - uses: fregante/release-with-changelog@v3
         if: steps.daily-version.outputs.created
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
@@ -55,7 +55,7 @@ jobs:
               cd $DIRECTORY && npx chrome-webstore-upload-cli@1 upload --auto-publish
               ;;
             firefox)
-              cd $DIRECTORY && npx web-ext-submit@5
+              cd $DIRECTORY && npx web-ext-submit@6
               ;;
           esac
         env:

README.md

@@ -1,34 +1,52 @@
 Linkify
 =======
 
+[link-webext-polyfill]: https://github.com/mozilla/webextension-polyfill
+[link-rgh]: https://github.com/sindresorhus/refined-github
+[link-ngh]: https://github.com/sindresorhus/notifier-for-github
+[link-hfog]: https://github.com/sindresorhus/hide-files-on-github
+[link-tsconfig]: https://github.com/sindresorhus/tsconfig
+[link-options-sync]: https://github.com/fregante/webext-options-sync
+[link-cws-keys]: https://github.com/DrewML/chrome-webstore-upload/blob/master/How%20to%20generate%20Google%20API%20keys.md
+[link-amo-keys]: https://addons.mozilla.org/en-US/developers/addon/api/key
+
 WordPress has an excellent feature, where pasting a URL onto selected text will automatically transform that text into a link.
 
 Now you can do it everywhere!
 
-## Installation
+## Screenshots
 
-[Chrome Web Store](https://chrome.google.com/webstore/detail/linkify/bkkgikibkmalecfagnebbhbacnbhckmh) | [Firefox Extensions](https://addons.mozilla.org/en-US/firefox/addon/linkify-magic-links/)
+### Pasting a link in WordPress' Quick Draft
 
-## Screenshots
+![Pasting a link in WordPress' Quick Draft](media/1.png)
 
-![Pasting a link in WordPress' Quick Draft](assets/screenshots/1.png) ![Pasting a link in GMail](assets/screenshots/2.png)
+### Options page
+
+![Options page](media/3.png)
+
+## Installation
+
+[Chrome Web Store](https://chrome.google.com/webstore/detail/linkify/bkkgikibkmalecfagnebbhbacnbhckmh) | [Firefox Extensions](https://addons.mozilla.org/en-US/firefox/addon/linkify-magic-links/)
 
 ## Development
 
-### Installation
-    git clone [email protected]:pento/linkify.git
+### Build locally
 
-### Build instructions
+1. Checkout the copied repository to your local machine eg. with `git clone https://github.com/my-username/my-awesome-extension/`
+1. run `npm install` to install all required dependencies
+1. run `npm run build`
 
-To install dependencies:
+The build step will create the `distribution` folder, this folder will contain the generated extension.
 
-    cd linkify
-    npm install
+### Run the extension
 
-Then to start a developing session (with watch), run:
+Using [web-ext](https://extensionworkshop.com/documentation/develop/getting-started-with-web-ext/) is recommened for automatic reloading and running in a dedicated browser instance. Alternatively you can load the extension manually (see below).
 
-    npm watch
+1. run `npm run watch` to watch for file changes and build continuously
+1. run `npm install --global web-ext` (only only for the first time)
+1. in another terminal, run `web-ext run` for Firefox or `web-ext run -t chromium`
+1. Check that the extension is loaded by opening the extension options ([in Firefox](media/extension_options_firefox.png) or [in Chrome](media/extension_options_chrome.png)).
 
-This will create an unpacked version of Linkify in the `distribution` directory, which you can load in Chrome using the `Load unpacked extension...` button in your [Chrome Extensions](chrome://extensions/) page.
+#### Manually
 
-![Linkify running as an unpacked extension, with the `Load unpacked extension...` button displayed](assets/screenshots/load-chrome-extension.png)
+You can also [load the extension manually in Chrome](https://www.smashingmagazine.com/2017/04/browser-extension-edge-chrome-firefox-opera-brave-vivaldi/#google-chrome-opera-vivaldi) or [Firefox](https://www.smashingmagazine.com/2017/04/browser-extension-edge-chrome-firefox-opera-brave-vivaldi/#mozilla-firefox).