Full options sync extension

package.json

@@ -13,7 +13,6 @@
     "update-version": "VERSION=$(utc-version); echo $VERSION; dot-json distribution/manifest.json version $VERSION"
   },
   "dependencies": {
-    "dom-loaded": "^1.0.1",
     "element-ready": "^4.0.0",
     "localforage": "^1.7.2",
     "select-dom": "^5.0.0",
@@ -23,31 +22,31 @@
     "webextension-polyfill": "^0.4.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.2.2",
+    "@babel/core": "^7.4.5",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/plugin-transform-modules-commonjs": "^7.2.0",
-    "@babel/register": "^7.0.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.4.4",
+    "@babel/register": "^7.4.4",
     "@wext/shipit": "^0.2.0",
     "ava": "^2.0.0",
-    "babel-eslint": "^10.0.1",
-    "babel-loader": "^8.0.5",
-    "copy-webpack-plugin": "^5.0.0",
+    "babel-eslint": "^10.0.2",
+    "babel-loader": "^8.0.6",
+    "copy-webpack-plugin": "^5.0.3",
     "cross-env": "^5.2.0",
     "dot-json": "^1.1.0",
     "eslint": "^6.0.1",
     "eslint-config-standard": "^12.0.0",
-    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-import": "^2.18.0",
     "eslint-plugin-node": "^9.0.0",
-    "eslint-plugin-promise": "^4.0.0",
+    "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
     "npm-run-all": "^4.1.5",
     "stylelint": "^10.0.0",
-    "stylelint-config-standard": "^18.2.0",
-    "terser-webpack-plugin": "^1.2.1",
+    "stylelint-config-standard": "^18.3.0",
+    "terser-webpack-plugin": "^1.3.0",
     "utc-version": "^2.0.0",
-    "webpack": "^4.28.4",
-    "webpack-chrome-extension-reloader": "^1.0.0",
-    "webpack-cli": "^3.2.1"
+    "webpack": "^4.35.0",
+    "webpack-chrome-extension-reloader": "^1.3.0",
+    "webpack-cli": "^3.3.5"
   },
   "ava": {
     "files": [

source/background.js

@@ -1,6 +1,7 @@
 import localforage from 'localforage'
 import { isEmpty } from './libs/utils'
 import { renderBadge } from './libs/browser'
+import optionsStorage from './libs/storage'
 
 localforage.setDriver([localforage.INDEXEDDB, localforage.WEBSQL])
 
@@ -35,8 +36,14 @@ browser.runtime.onMessage.addListener(async (message, sender) => {
   }
 
   if (message.action === 'content') {
-    renderBadge(site.length.toString() || '', sender.tab.id)
+    await renderBadge(site.length.toString() || '', sender.tab.id)
     // await browser.tabs.insertCSS(sender.tab.id, { file: 'content.css' })
+
+    const { enableContent } = await optionsStorage.getAll();
+
+    if (!enableContent) {
+      return
+    }
   }
 
   return Promise.all(site.map(async name => ((await entitiesStore.getItem(name)) || {name})))

source/content.js

@@ -1,7 +1,7 @@
 import 'webext-dynamic-content-scripts'
 import select from 'select-dom'
+import elementReady from 'element-ready'
 
-import { safeElementReady } from './libs/document'
 import {isEmpty, renderText} from './libs/utils'
 
 // Add globals for easier debugging
@@ -17,7 +17,9 @@ async function init () {
     return
   }
 
-  await safeElementReady('body')
+  await elementReady('body', {
+    stopOnDomReady: false
+  })
   document.documentElement.classList.add('qui-possede-les-medias')
 
   const box = document.createElement('div')

source/libs/browser.js

@@ -1,3 +1,26 @@
-export const renderBadge = (text, tabId) => {
-  browser.browserAction.setBadgeText({text, tabId})
+export const renderBadge = async (text, tabId) => {
+  try {
+    return browser.browserAction.setBadgeText({text, tabId})
+  } catch (error) {
+    console.log(error)
+    return false
+  }
+}
+
+export const queryPermission = async (permission) => {
+  try {
+    return browser.permissions.contains({permissions: [permission]})
+  } catch (error) {
+    console.log(error)
+    return false
+  }
+}
+
+export const requestPermission = async (permission) => {
+  try {
+    return browser.permissions.request({permissions: [permission]})
+  } catch (error) {
+    console.log(error)
+    return false
+  }
 }

source/libs/storage.js

@@ -0,0 +1,7 @@
+import OptionsSync from 'webext-options-sync'
+
+export default new OptionsSync({
+	defaults: {
+		enableContent: true
+	}
+})

source/options.html

@@ -9,12 +9,14 @@
 <body>
   <form id="options-form" class="detail-view-container">
     <h2 class="only-firefox">Options</h2>
-    <p>
+    <hr class="only-firefox">
+
+    <section>
       <label>
-        <input type="checkbox" name="enable-content">
+        <input type="checkbox" name="enableContent" data-request-permission="https://*/*">
         Afficher une bannière par dessus le contenu
       </label>
-    </p>
+    </section>
   </form>
   <script src="browser-polyfill.min.js"></script>
   <script src="options.js"></script>

source/options.js

@@ -1,3 +1,30 @@
-import OptionsSync from 'webext-options-sync';
+import optionsStorage from './libs/storage'
+import { requestPermission } from './libs/browser'
 
-new OptionsSync().syncForm('#options-form');
+optionsStorage.syncForm('#options-form')
+
+for (const inputElement of document.querySelectorAll('#options-form [name]')) {
+  inputElement.addEventListener('change', () => {
+    // `webext-options-sync` debounces syncing to 100ms, so send updates sometime after that
+    setTimeout(() => {
+      browser.runtime.sendMessage('update')
+    }, 200)
+  })
+
+  if (inputElement.dataset.requestPermission) {
+    inputElement.parentElement.addEventListener('click', async event => {
+      if (event.target !== inputElement) {
+        return
+      }
+
+      if (inputElement.checked) {
+        inputElement.checked = await requestPermission(inputElement.dataset.requestPermission)
+
+        // Programatically changing input value does not trigger input events, so save options manually
+        optionsStorage.set({
+          [inputElement.name]: inputElement.checked
+        })
+      }
+    })
+  }
+}

webpack.config.js

@@ -9,7 +9,8 @@ module.exports = (env, argv) => ({
   entry: {
     'content-script': './source/content',
     background: './source/background',
-    popup: './source/popup'
+    popup: './source/popup',
+    options: './source/options'
   },
   output: {
     path: path.join(__dirname, 'distribution'),