Merge pull request #633 from tjhorner/fix-javascript-csp

Use userScripts API for JavaScript actions

app/manifest.json

@@ -125,9 +125,11 @@
     "debugger",
     "scripting",
     "notifications",
-    "activeTab"
+    "activeTab",
+    "userScripts"
   ],
   "host_permissions": ["*://*/*"],
+  "user_scripts": { },
   "content_security_policy": {
     "extension_pages": "script-src 'self'; object-src 'self'; style-src 'self' 'unsafe-inline'; style-src-elem 'self' 'unsafe-inline' https://cdn.materialdesignicons.com https://cdn.jsdelivr.net;"
   },

app/options/options.vue

@@ -39,6 +39,14 @@
 
         <b-tabs v-model="activeTab" type="is-toggle" expanded>
             <b-tab-item label="Shortcuts">
+                <b-message
+                    title="Enable Developer Mode"
+                    type="is-warning"
+                    :active="needsDeveloperMode()"
+                    :closable="false">
+                    In order for JavaScript actions to work, you must first enable Developer Mode in your browser extension settings. Follow the instructions <a href="https://developer.chrome.com/docs/extensions/reference/api/userScripts#developer_mode_for_extension_users" target="_blank">here</a>, then come back and save your shortcuts.
+                </b-message>
+
                 <b-table
                         :data="keys"
                         ref="table"
@@ -196,6 +204,7 @@
 </template>
 
 <script>
+import { v4 as uuid } from "uuid";
 import TextInput from "./components/TextInput";
 import LinkBar from "./components/LinkBar";
 import SelectInput from "./components/SelectInput";
@@ -211,8 +220,25 @@ export default {
         TextInput,
     },
     methods: {
+        needsDeveloperMode: function() {
+            const hasJsKeys = this.keys.some(key => key.action === 'javascript');
+            if (!hasJsKeys) {
+                return false;
+            }
+
+            try {
+                chrome.userScripts;
+                return false;
+            } catch {
+                return true;
+            }
+        },
         saveShortcuts: async function() {
             this.keys.forEach((key) => {
+                if (!key.id) {
+                    key.id = uuid();
+                }
+
                 key.sites = key.sites || "";
                 key.sitesArray = key.sites.split('\n');
                 delete key.sidebarOpen;

app/scripts/content.js

@@ -1,7 +1,6 @@
 'use strict'
 /* global Mousetrap */
 import Mousetrap from 'mousetrap'
-import './inject-scripts/inject.js'
 
 if (typeof browser === "undefined") {
   var browser = chrome;
@@ -45,7 +44,7 @@ Shortkeys.doAction = (keySetting) => {
     // to the page MAIN world and dispatch this event from the content script
     if (action === 'javascript') {
         document.dispatchEvent(new CustomEvent('shortkeys_js_run', {
-          detail: keySetting.code // code to run
+            detail: keySetting.id
         }))
         return
     } else if (action === 'trigger') {

app/scripts/service_worker.js

@@ -377,6 +377,56 @@ let handleAction = async (action, request = {}) => {
   return true
 }
 
+async function registerUserScript() {
+    const keys = JSON.parse((await chrome.storage.local.get("keys")).keys) || []
+    const javascriptActions = keys.filter(key => key.action === "javascript")
+
+    const actionHandlersAsObject = javascriptActions.reduce((acc, cur) => {
+        acc += JSON.stringify(cur.id) + ":"
+        acc += "function() {" + cur.code + "},"
+        return acc
+    }, "{") + "}"
+
+    function registerHandlers() {
+        document.addEventListener('shortkeys_js_run', function(e) {
+            if (handlers[e.detail]) {
+                handlers[e.detail]()
+            }
+        })
+    }
+
+    const existingScripts = await chrome.userScripts.getScripts({
+        ids: ["shortkeys-actions"]
+    })
+
+    const scripts = [
+        {
+            id: "shortkeys-actions",
+            matches: [ "*://*/*" ],
+            world: "MAIN",
+            js: [
+                {
+                    code: `const handlers = ${actionHandlersAsObject};\n${registerHandlers.toString()}\nregisterHandlers();`
+                }
+            ]
+        }
+    ]
+
+    if (existingScripts.length) {
+        await chrome.userScripts.update(scripts)
+    } else {
+        await chrome.userScripts.register(scripts)
+    }
+}
+
+chrome.storage.local.onChanged.addListener(registerUserScript)
+
+chrome.runtime.onInstalled.addListener(function (details) {
+  if (details.reason === "update") {
+    registerUserScript()
+  }
+})
+
 browser.commands.onCommand.addListener(function (command) {
   // Remove the integer and hyphen at the beginning.
   command = command.split('-')[1]

package.json

@@ -7,7 +7,7 @@
     "build": "webextension-toolbox build"
   },
   "devDependencies": {
-    "@types/chrome": "^0.0.133",
+    "@types/chrome": "^0.0.267",
     "@webextension-toolbox/webextension-toolbox": "^6.2.0"
   },
   "dependencies": {
@@ -21,6 +21,7 @@
     "mousetrap": "^1.6.3",
     "serialize-javascript": ">=2.1.1",
     "style-loader": "^1.0.1",
+    "uuid": "^10.0.0",
     "vue": "^2.6.11",
     "vue-loader": "^15.8.3",
     "vue-template-compiler": "^2.6.11",

webextension-toolbox.config.js

@@ -12,7 +12,6 @@ module.exports = {
 
         config.entry = {
             'scripts/service_worker': './scripts/service_worker.js',
-            'scripts/script-to-inject': './scripts/inject-scripts/script-to-inject.js',
             'scripts/content': './scripts/content.js',
             'options/options': './options/options.js',
         };