fix bugs, update readme
authorAndrew Lorimer <andrew@lorimer.id.au>
Tue, 20 Aug 2019 06:45:32 +0000 (16:45 +1000)
committerAndrew Lorimer <andrew@lorimer.id.au>
Tue, 20 Aug 2019 06:45:32 +0000 (16:45 +1000)
README.md
src/manifest.json
src/style.css
index 35d97d0450c81c51ed1863a8728fe2b10615e2a6..c557cdc177266c5fa33c4a7027831254ac828e7b 100644 (file)
--- a/README.md
+++ b/README.md
@@ -1,19 +1,35 @@
-After Google changed the new tab page of Chrome to an ugly array of circular icons (around mid 2016), I looked around for a better new tab page extension. The best I could find was [Start Clean](https://startclean.github.io/), but it had several issues (I don't remember exactly - I think there were various bugs). A fork of Start Clean by [shadowfax](https://startclean.github.io/) fixed some small issues and added the favicons which was rather nice, but for some reason (???) this fork makes links open in a new tab.
+After Google changed the new tab page of Chrome to an ugly array of circular icons (around mid 2016), I looked around for a better new tab page extension. The best I could find was [Start Clean](https://startclean.github.io/), but it had several issues (I don't remember exactly - I think there were various bugs). A fork of Start Clean by [shadowfacts](https://github.com/shadowfacts/Chrome-Extension) fixed some small issues and added the favicons which was rather nice, but for some reason (???) this fork makes links open in a new tab.
 
-Initially I forked shadowfax's version to make links open in the current tab. That worked fine for a while, but I have since rewritten the extension to have much more flexibility in adding/removeing links and categories. The UI is also much improved. Here is a summary of the changes I've made:
+Initially I forked shadowfacts' version to make links open in the current tab. That worked fine for a while, but I have since rewritten the extension to have much more flexibility in adding/removing links and categories. The UI is also much improved. Here is a summary of the changes I've made:
 
 * Links open in the current tab
 * Background, foreground and hover colours are configurable
 * Removed ueslesss search bar and apps sections (all I want is links to common sites)
-* You can now have as many columns of links as you like
+* You can now have as many columns of links as you like, and reorder them with drag and drop
 * Added new "edit mode" where you can rearrange/add/remove/rename columns
 * Added basic keyboard shortcuts & tab indices
 - Uses browser-default sans serif font rather than locally packaged font
 - Improved settings UI
-- Much cleaner code (well, it is Javascript after all)
+- Use the more secure `XMLHttpRequest` method for retrieving favicon blobs
+- Reduced permission requirements on installation
+- Much cleaner code (well, as much as possible - it is Javascript after all)
+
+The sorting of links is managed by [SortableJS](https://github.com/SortableJS/Sortable). If I was writing this from scratch again I would use native HTML5 drag and drop, but I guess if it ain't broke don't fix it. I did end up implementing HTML5 drag and drop for the movement of columns though.
+
+Favicons for websites are obtained from Google's S2 API. One day I might upgrade to [Favicon Kit](https://faviconkit.com/) which is less centralised. This is the only external object loaded, but it triggers some scary warning in Chrome which says that it can "change data on all websites you visit" etc.
 
 ## Installation
 
-This extension isn't available on the Chrome Web Store because I can't be bothered figuring out how that works. To install it as a local extension, download `bin/newtab.crx` then drag it onto the extensions page at <chrome://extensions>. Developer mode must be enabled on the extensions page before doing this.
+Unfortunately installation is a little protracted because Google wants all extensions to be distributed through the Chrome Web Store. Apparently this is enforced to increase security, but I have to pay to upload an extension (nice bait Google) so I see no reason to upload it.
+
+You can still install it as a local extension in developer mode:
+
+1. Go to <chrome://extensions> and turn on developer mode (top right)
+2. Download <a href="../plain/build/newtab.crx" download>build/newtab.crx</a> (make sure you save it, don't install it straight away - see below)
+3. Drag the file onto the extensions page to install it
+
+Opening the crx file using Chrome's default file handler causes a "CRX_REQUIRED_PROOF_MISSING" error because Chrome now only allows extensions obtained from their store. However, you can drag and drop it onto the extensions page and that seems to bypass the verification. More info [here](https://support.google.com/chrome/thread/3125155?hl=en).
+
+## Building
 
-Also, opening the file using Chrome's file handler causes a "CRX_REQUIRED_PROOF_MISSING" error because I haven't updated the manifest to CRX3 (that's on the todo list). So for the moment you have to drag and drop it onto the extension page and that seems to bypass the verification. More info [here](https://support.google.com/chrome/thread/3125155?hl=en).
+For the time being you can run the extension as a local "unpacked" extension, but if you make modifications you may like to make a distributible crx file.
index 320055b959580bce3661ab9bc817ddc0b65bedf6..c0cade48b14184df254c4163ccebc85048e553ff 100644 (file)
@@ -2,7 +2,7 @@
    "chrome_url_overrides": {
       "newtab": "newtab.html"
    },
-   "content_security_policy": "script-src 'self'; object-src 'self'",
+   "content_security_policy": "script-src 'self'; object-src 'https://google.com'",
    "manifest_version": 2,
    "name": "newtab",
    "description": "A simple new tab page with customisable links",
@@ -10,6 +10,6 @@
       "chrome_style": true,
       "page": "options.html"
    },
-   "permissions": [ "storage" ],
+   "permissions": [ "storage", "https://google.com" ],
    "version": "2"
 }
index c29e55dfbb9500128b414a1b349152d1cf03bbd3..69e52a272b75124f988dd2bf65075a357138a4c1 100644 (file)
@@ -1,4 +1,4 @@
-:root {
+html {
   --hover-bg: #434c5e;
   --hover-grn: #a3be8c;
   --hover-bg-2: #848ead;
@@ -66,7 +66,7 @@ input.colname {
   height: 19px;
   margin: 14px 0 6px 0;
   border: 2px var(--hover-bg) dashed;
-  background-color: var(inherit);
+  background-color: var(--default-bg);
   color: inherit;
   font-family: inherit;
 }