Move to Chrome Extension Manifestv3

bmurr · Nov 3, 2021 · 1959206 · 1959206
1 parent 8d27a9a
commit 1959206
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 83 deletions.
diff --git a/src/historyPanel.html b/src/historyPanel.html
@@ -7,12 +7,9 @@
         <!-- Stylesheets -->
 
         <!-- This page stylesheets -->
-        <!-- UI Component Library Stylesheets -->
-        <!-- Codemirror Stylesheets -->
-        <link rel="stylesheet" href="lib/codemirror/lib/codemirror.css" />
         <link rel="stylesheet" href="styles/style.css" />
 
-        <!-- Vendor Libraries(react, codemirror, etc) -->
+        <!-- Vendor Libraries(react, etc) -->
         <script src="script/vendor.js"></script>
         <!-- <script src="http://localhost:8097"></script> -->
     </head>

diff --git a/src/manifest.json b/src/manifest.json
@@ -2,9 +2,9 @@
     "name": "AppEngineConsoleFix",
     "description": "Makes the AppEngine Interactive Console more usable.",
 
-    "manifest_version": 2,
-    "version": "1.2.2",
-    "version_name": "1.2.2-dev",
+    "manifest_version": 3,
+    "version": "1.3.2",
+    "version_name": "1.3.2-dev",
 
     "permissions": ["storage", "unlimitedStorage"],
 
@@ -25,10 +25,17 @@
         }
     ],
 
-    "content_security_policy": "img-src 'self' data:; script-src 'self'; object-src 'self'",
-    "web_accessible_resources": ["script/fonts/*"],
+    "content_security_policy": {
+        "extension_pages": "img-src 'self' data:; script-src 'self'; object-src 'self'"
+    },
+    "web_accessible_resources": [
+        {
+            "resources": ["script/fonts/*", "script/*"],
+            "matches": ["<all_urls>"],
+            "extension_ids": ["lickplgkkppdanbcigejmkconmpcmien"]
+        }
+    ],
     "background": {
-        "scripts": ["script/event-page.js"],
-        "persistent": false
+        "service_worker": "script/event-page.js"
     }
 }
diff --git a/src/script/content-script.js b/src/script/content-script.js
@@ -518,7 +518,10 @@ var AppEngineConsoleFix = function () {
 
     if (self.in_localhost) {
       var elt = document.createElement('script');
-      elt.innerHTML = `jQuery('#console-form').off('submit')`;
+      elt.setAttribute(
+        'src',
+        'chrome-extension://lickplgkkppdanbcigejmkconmpcmien/script/inline-script.js'
+      );
       document.head.appendChild(elt);
     }
 

diff --git a/src/script/event-page.js b/src/script/event-page.js
@@ -1,56 +1,64 @@
 (function () {
-    var HistoryPanel = function (namespace) {        
+    let historyPanelInstance = null;
+
+    var HistoryPanel = function (namespace) {
         var self = this;
 
         self.namespace = namespace;
 
-        self.bootstrapTab = function (tabId, changeInfo, tab){
-          if (tabId == self.window.tabs[0].id){
-            var request = {
-              config: {
-                  namespace: self.namespace
-              }                                      
-            };          
-            if (changeInfo.status == 'complete'){
-              chrome.tabs.sendMessage(tabId, request);
+        self.bootstrapTab = function (tabId, changeInfo, tab) {
+            if (tabId == self.window.tabs[0].id) {
+                var request = {
+                    config: {
+                        namespace: self.namespace,
+                    },
+                };
+                if (changeInfo.status == 'complete') {
+                    chrome.tabs.sendMessage(tabId, request);
+                }
             }
-          }
         };
 
         self.focus = function () {
-            chrome.windows.update(self.window.id, { "focused": true });
+            chrome.windows.update(self.window.id, { focused: true });
         };
 
         self.openPanel = function () {
             var windowOptions = {
-                'width': 900,
-                'height': 600,
-                'type': 'panel',
-                'url': 'historyPanel.html'
+                width: 900,
+                height: 600,
+                type: 'panel',
+                url: 'historyPanel.html',
             };
             chrome.windows.create(windowOptions, function (window) {
-              self.window = window;
-              chrome.tabs.onUpdated.addListener(self.bootstrapTab);  
-            })
+                self.window = window;
+                chrome.tabs.onUpdated.addListener(self.bootstrapTab);
+            });
         };
 
         self.openPanel();
     };
 
-    chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {        
+    chrome.runtime.onMessage.addListener(function (
+        request,
+        sender,
+        sendResponse
+    ) {
         if (request && request.action === 'openHistoryPanel') {
-            if (!!window.historyPanel) {
-                window.historyPanel.focus()
+            if (!!historyPanelInstance) {
+                historyPanelInstance.focus();
             } else {
-                window.historyPanel = new HistoryPanel(request.namespace);
+                historyPanelInstance = new HistoryPanel(request.namespace);
             }
         }
     });
 
     chrome.windows.onRemoved.addListener(function (windowID) {
-        if (windowID === window.historyPanel.window.id) {
-            window.historyPanel = null;
+        if (
+            historyPanelInstance &&
+            windowID === historyPanelInstance.window.id
+        ) {
+            historyPanelInstance = null;
         }
     });
-
-}());
+})();
diff --git a/src/script/inline-script.js b/src/script/inline-script.js
@@ -0,0 +1 @@
+jQuery('#console-form').off('submit');
diff --git a/src/styles/historyPanel-layout.scss b/src/styles/historyPanel-layout.scss
@@ -1,70 +1,66 @@
 $main-container-background-color: #ffffff;
 
-.main-container{
+.main-container {
   display: flex;
   flex-direction: column;
   background-color: $main-container-background-color;
   height: 100%;
-  
-  .header{
+
+  .header {
     flex: 0 1;
   }
-
-  .panel-container{
+
+  .panel-container {
+    height: calc(100% - 22px);
     display: flex;
     flex-direction: row;
     flex: 1 0;
   }
-  
-  .panel{
+
+  .panel {
     display: flex;
     flex-direction: column;
     flex: 1 0;
     height: 100%;
-    overflow: hidden;    
+    overflow: hidden;
   }
-  
-  .footer{
+
+  .footer {
     background-color: #eee;
     border-top: 1px solid #ccc;
     flex: 0 1;
     line-height: 18px;
-    padding:0 5px;
+    padding: 0 5px;
     text-overflow: ellipsis;
     white-space: nowrap;
 
-    .footer-content{
+    .footer-content {
       display: flex;
       justify-content: space-between;
-
     }
-
-
   }
-  
-  .search-bar{    
+
+  .search-bar {
     display: flex;
     width: 100%;
   }
 
-  .search-bar{
+  .search-bar {
     width: 100%;
     padding: 5px;
     display: flex;
     background-color: #eee;
     border-top: 1px solid #ddd;
-    z-index: 999;    
+    z-index: 999;
 
     input {
       flex: 1 1 auto;
       border: 1px solid #ccc;
 
-      &:focus{
+      &:focus {
         outline: none;
         border: 1px solid #68d;
       }
     }
-}
-
-
+  }
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -6,58 +6,62 @@ var gulpConfig = require('./gulp.config.js');
 
 module.exports = {
   cache: true,
-  
+
   entry: {
     'content-script': ['script/content-script.js'],
     'event-page': ['script/event-page.js'],
-    main: ['script/main.js']
+    main: ['script/main.js'],
+    'inline-script': ['script/inline-script.js'],
   },
   output: {
-    filename: 'script/[name].js'    
+    filename: 'script/[name].js',
   },
   module: {
     loaders: [
       {
         test: /\.(js|jsx)$/,
-        include: [ path.join(__dirname, gulpConfig.srcDirectory) ],
+        include: [path.join(__dirname, gulpConfig.srcDirectory)],
         loader: 'babel-loader',
         query: {
-          presets: ['es2015', 'stage-2', 'react']
-        }
+          presets: ['es2015', 'stage-2', 'react'],
+        },
       },
       {
         test: /\.scss$/,
-        include: [ path.join(__dirname, gulpConfig.srcDirectory) ],
+        include: [path.join(__dirname, gulpConfig.srcDirectory)],
         use: ExtractTextPlugin.extract({
           fallback: 'style-loader',
           //resolve-url-loader may be chained before sass-loader if necessary
-          use: ['css-loader', 'sass-loader']
-        })      
+          use: ['css-loader', 'sass-loader'],
+        }),
       },
       {
         test: /\.css$/,
-        exclude: [ path.join(__dirname, gulpConfig.srcDirectory) ],
-        use: ['style-loader', 'css-loader']
-      }   
-    ]
+        exclude: [path.join(__dirname, gulpConfig.srcDirectory)],
+        use: ['style-loader', 'css-loader'],
+      },
+    ],
   },
   resolve: {
-    modules: [path.resolve(__dirname, 'src'), 'node_modules']
+    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
   },
 
-
   plugins: [
     // new webpack.optimize.CommonsChunkPlugin({
     //   name: 'main',
     //   filename: 'script/[name].js',
     //   minChunks: Infinity
     // }),
     new ExtractTextPlugin({
-      filename: 'styles/style.css'
+      filename: 'styles/style.css',
+    }),
+    new webpack.DllReferencePlugin({
+      context: path.join(__dirname, gulpConfig.srcDirectory),
+      manifest: require(path.join(
+        __dirname,
+        gulpConfig.vendorDirectory,
+        'vendor-manifest.json'
+      )),
     }),
-    new webpack.DllReferencePlugin({      
-      context: path.join(__dirname, gulpConfig.srcDirectory),    
-      manifest: require(path.join(__dirname, gulpConfig.vendorDirectory, 'vendor-manifest.json'))      
-    })
-  ]
+  ],
 };