Add warning message when the access to file urls is disabled

README.md

@@ -23,7 +23,9 @@
 ## Local Files
 
 1. Navigate to `chrome://extensions`
-2. Make sure that the `Allow access to file URLs` checkbox is checked for the `Markdown Viewer` extension
+2. Make sure that the `Allow access to file URLs` checkbox is checked for the Markdown Viewer extension
+
+![file-urls]
 
 
 ## Remote Files
@@ -147,3 +149,4 @@ SOFTWARE.
   [add-origin]: http://i.imgur.com/56zWesT.png
   [all-origins]: http://i.imgur.com/GiLeftR.png
   [path-regexp]: http://i.imgur.com/IJuNA63.png
+  [file-urls]: http://i.imgur.com/eqiwzEz.png

content/options.js

@@ -4,10 +4,15 @@ var state = {
   protocols: ['https', 'http', '*'],
   origin: '',
   origins: {},
-  timeout: null
+  timeout: null,
+  file: true
 }
 
 var events = {
+  file: () => {
+    chrome.tabs.create({url: 'chrome://extensions/?id=' + chrome.runtime.id})
+  },
+
   protocol: (e) => {
     state.protocol = state.protocols[e.target.selectedIndex]
   },
@@ -61,6 +66,11 @@ var events = {
   }
 }
 
+chrome.extension.isAllowedFileSchemeAccess((isAllowedAccess) => {
+  state.file = isAllowedAccess
+  m.redraw()
+})
+
 function get () {
   chrome.runtime.sendMessage({message: 'origins'}, (res) => {
     state.origins = res.origins
@@ -77,6 +87,18 @@ function oncreate (vnode) {
 m.mount(document.querySelector('main'), {
   view: () =>
     m('.mdl-grid',
+      (!state.file || null) &&
+      m('.mdl-cell mdl-cell--8-col-tablet mdl-cell--12-col-desktop',
+        m('.bs-callout bs-callout-danger',
+          m('h4', 'Access to file:// URLs is Disabled'),
+          m('img.mdl-shadow--2dp', {src: '/images/file-urls.png'}),
+          m('button.mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect',
+            {oncreate, onclick: events.file},
+            'Enable Access to file:// URLs'
+          )
+        )
+      ),
+
       m('.mdl-cell mdl-cell--8-col-tablet mdl-cell--12-col-desktop',
         m('h4', 'Add New Origin')
       ),

css/options.css

@@ -28,6 +28,9 @@ footer, #footer-push {
 /*header*/
 .mdl-layout__header-row { padding: 0 20px; }
 
+/*content*/
+.mdl-layout__content { padding-bottom: 60px; }
+
 /*footer*/
 .mdl-mega-footer__bottom-section { padding: 0; }
 .mdl-mega-footer__link-list { display: flex; justify-content: center; margin: 0 auto; }
@@ -83,3 +86,37 @@ select {
 }
 .mdl-data-table .mdl-textfield.is-focused { color: #272727; }
 .mdl-data-table .mdl-textfield__label:after { bottom: 0; }
+
+
+/*file url*/
+.bs-callout { background: #fcfcfc; }
+.bs-callout img { display: block; margin-bottom: 20px; }
+.bs-callout button { background: #d9534f; color: #fff; }
+.bs-callout button:hover { background: #e57471; }
+
+/*bootstrap callout*/
+.bs-callout {
+  padding: 20px;
+  margin: 20px 0 0;
+  border: 1px solid #eee;
+  border-left-width: 5px;
+  border-radius: 3px;
+}
+.bs-callout h4 {
+  margin-top: 0;
+}
+.bs-callout p:last-child {
+  margin-bottom: 0;
+}
+.bs-callout code {
+  border-radius: 3px;
+}
+.bs-callout+.bs-callout {
+  margin-top: -5px;
+}
+.bs-callout-danger {
+  border-left-color: #d9534f;
+}
+.bs-callout-danger h4 {
+  color: #d9534f;
+}