Show script size and alert if reach chrome sync limit

Author: xcv58

package.json

@@ -19,6 +19,7 @@
     "material-ui": "^1.0.0-beta.18",
     "mobx": "^3.3.3",
     "mobx-react": "^4.3.5",
+    "object-sizeof": "^1.2.0",
     "query-string": "^5.0.1",
     "react": "^16.2.0",
     "react-ace": "^5.8.0",

src/js/background.js

@@ -20,10 +20,15 @@ const methodMap = {
       sendResponse({ customjs, host, protocol, tab, matchedHost })
     }
   },
-  setData: (message) => {
+  setData: async (message, _, sendResponse) => {
     const { matchedHost, customjs } = message
     const hostKey = getHostKey(matchedHost)
-    chrome.storage.sync.set({ [hostKey]: customjs })
+    try {
+      await chrome.storage.sync.set({ [hostKey]: customjs })
+      sendResponse()
+    } catch (err) {
+      sendResponse(err)
+    }
   },
   removeData: (message, { url }) => {
     const { isRegex, pattern } = message

src/js/components/Page.js

@@ -11,6 +11,7 @@ import Toggle from 'components/Toggle'
 import Include from 'components/Include'
 import Reset from 'components/Reset'
 import Save from 'components/Save'
+import Size from 'components/Size'
 import NewPattern from 'components/NewPattern'
 import queryString from 'query-string'
 import NewTabLink from './NewTabLink'
@@ -32,7 +33,6 @@ export default class Page extends Component {
 
   onSave = () => {
     this.props.AppStore.save()
-    this.closePopup()
   }
 
   onSelectHost = (e) => {
@@ -100,8 +100,11 @@ export default class Page extends Component {
         </div>
         <Editor />
         <div style={toolbarStyle}>
-          <RemoveDraft />
-          <AutoSave />
+          <span>
+            <RemoveDraft />
+            <AutoSave />
+          </span>
+          <Size />
           <DonateLink />
         </div>
         <div id='error' className='error is-hidden'>

src/js/components/Size.js

@@ -0,0 +1,51 @@
+import React, { Component } from 'react'
+import { inject, observer } from 'mobx-react'
+import Button from 'material-ui/Button'
+import Dialog, {
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle
+} from 'material-ui/Dialog'
+
+const issueLink = 'https://github.com/xcv58/Custom-JavaScript-for-Websites-2/issues/32'
+const chromeDocLink = 'https://developer.chrome.com/apps/storage#property-sync'
+
+@inject('AppStore')
+@observer
+export default class Size extends Component {
+  handleClose = () => {
+    window.location.reload()
+  }
+
+  render () {
+    const { saveError, size } = this.props.AppStore
+    const alert = saveError && (
+      <Dialog open onClose={this.handleClose}>
+        <DialogTitle>Script Save Failure</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            Failed to save your script, it's usually because your script is
+            too large to store in <a href={chromeDocLink} target='_blank' rel='noopener noreferrer'>
+              chrome.storage.sync
+            </a>. Please reduce your script size and try again!
+          </DialogContentText>
+          <DialogContentText>
+            We know this problem and try to fix it, please follow <a
+              href={issueLink} target='_blank' rel='noopener noreferrer'>
+              this issue
+            </a> if you want.
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={this.handleClose} color='primary' autoFocus>
+            Refresh
+          </Button>
+        </DialogActions>
+      </Dialog>
+    )
+    return (
+      <span>{size} bytes{alert}</span>
+    )
+  }
+}

src/js/stores/AppStore.js

@@ -1,6 +1,7 @@
 import { action, computed, observable } from 'mobx'
 import { encodeSource, decodeSource, getHosts, setHosts } from 'libs'
 import isEqual from 'lodash.isequal'
+import sizeof from 'object-sizeof'
 
 const key = 'popup'
 const defaultSource = '// Here You can type your custom JavaScript...'
@@ -29,6 +30,7 @@ export default class AppStore {
   @observable matchedHost = ''
 
   @observable error = null
+  @observable saveError = null
 
   @computed
   get include () {
@@ -67,6 +69,11 @@ export default class AppStore {
     }
   }
 
+  @computed
+  get size () {
+    return sizeof(this.source)
+  }
+
   @computed
   get domainKey () {
     if (this.matchedHost && this.matchedHost.isRegex) {
@@ -177,14 +184,19 @@ export default class AppStore {
 
   @action
   save = () => {
-    this.removeDraft()
     const { domain, customjs, matchedHost } = this
     chrome.runtime.sendMessage({
       method: 'setData',
       domain,
       matchedHost,
       customjs,
-      reload: true
+      reload: !this.tabMode
+    }, (err) => {
+      if (err) {
+        this.saveError = err
+      } else {
+        this.removeDraft()
+      }
     })
   }
 

yarn.lock

@@ -1148,6 +1148,13 @@ buffer@^4.3.0:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
+buffer@^5.0.6:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.0.8.tgz#84daa52e7cf2fa8ce4195bc5cf0f7809e0930b24"
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+
 builtin-modules@^1.0.0, builtin-modules@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
@@ -3983,6 +3990,12 @@ object-keys@^1.0.10, object-keys@^1.0.8:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
 
+object-sizeof@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/object-sizeof/-/object-sizeof-1.2.0.tgz#66397c923768939d2fc6d2a3930a981e1c7fa68b"
+  dependencies:
+    buffer "^5.0.6"
+
 object.assign@^4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.0.4.tgz#b1c9cc044ef1b9fe63606fc141abbb32e14730cc"