Add support for manifest v3

chromelogger-options.js

@@ -1,6 +1,6 @@
-// global localStorage
 (function() {
     'use strict';
+    var settings;
 
     var defaults = {
         show_upgrade_messages: true,
@@ -27,9 +27,13 @@
         e.preventDefault();
 
         getInputs().forEach(function(input) {
-            localStorage[input.name] = input.type == 'checkbox' ? input.checked : input.value;
+            settings[input.name] = input.type == 'checkbox' ? input.checked : input.value;
         });
 
+        let newSettings = Object.assign({}, settings);
+        newSettings.event = 'saveSettings';
+        chrome.runtime.sendMessage(newSettings);
+
         showMessage('your settings have been saved');
     }
 
@@ -39,7 +43,7 @@
             return;
         }
 
-        if (input.type === 'color' && !/#\d{6}/.test(value)) {
+        if (input.type === 'color' && !/#[0-9a-f]{6}/.test(value)) {
             value = defaults[input.name];
         }
 
@@ -52,16 +56,23 @@
         getInputs().forEach(function(input) {
             var value = defaults[input.name];
 
-            localStorage[input.name] = value;
+            settings[input.name] = value;
             _setInputValue(input, value);
         });
 
+        let newSettings = Object.assign({}, settings);
+        newSettings.event = 'saveSettings';
+        chrome.runtime.sendMessage(newSettings);
+
         showMessage('settings have been restored to the defaults');
     }
 
     function init() {
-        getInputs().forEach(function(input) {
-            _setInputValue(input, input.name in localStorage ? localStorage[input.name] : defaults[input.name]);
+        chrome.runtime.sendMessage('settings', function(response, two, three) {
+            settings = response;
+            getInputs().forEach(function(input) {
+                _setInputValue(input, input.name in settings ? settings[input.name] : defaults[input.name]);
+            });
         });
 
         document.getElementById('save').addEventListener('click', saveOptions, false);

chromelogger.js

@@ -36,20 +36,23 @@
      */
     function _handleIconClick(tab) {
         if (_tabIsChrome(tab)) {
-            return alert('You cannot use Chrome Logger on this page.');
+            return;
         }
         _toggleActivity(tab);
     }
 
-    function _toggleActivity(tab) {
+    async function _toggleActivity(tab) {
         var url = tab.url;
         var host = _getHost(url);
-        if (_hostIsActive(host)) {
-            delete localStorage[host];
+        if (await _hostIsActive(host)) {
+            chrome.storage.sync.remove(host);
             _deactivate(tab.id);
             return;
         }
-        localStorage[host] = true;
+
+        var data = {};
+        data[host] = true;
+        chrome.storage.sync.set(data);
         _activate(tab.id);
     }
 
@@ -59,8 +62,9 @@
         return host;
     }
 
-    function _hostIsActive(url) {
-        return localStorage[url] === "true";
+    async function _hostIsActive(url) {
+        const result = await chrome.storage.sync.get(url);
+        return result[url] === true;
     }
 
     function _activate(tabId) {
@@ -87,31 +91,31 @@
     }
 
     function _activateTitle(tabId) {
-        chrome.browserAction.getTitle({tabId: tabId}, function(title) {
-            chrome.browserAction.setTitle({
+        chrome.action.getTitle({tabId: tabId}, function(title) {
+            chrome.action.setTitle({
                 title: title.replace(inactiveSuffix, ''),
                 tabId: tabId
             });
         });
     }
 
     function _deactivateTitle(tabId) {
-        chrome.browserAction.getTitle({tabId: tabId}, function(title) {
-            chrome.browserAction.setTitle({
+        chrome.action.getTitle({tabId: tabId}, function(title) {
+            chrome.action.setTitle({
                 title: title.indexOf(inactiveSuffix) === -1 ? title + inactiveSuffix : title,
                 tabId: tabId
             });
         });
     }
 
     function _enableIcon() {
-        chrome.browserAction.setIcon({
+        chrome.action.setIcon({
             path: "icon38.png"
         });
     }
 
     function _disableIcon() {
-        chrome.browserAction.setIcon({
+        chrome.action.setIcon({
             path: "icon38_disabled.png"
         });
     }
@@ -154,7 +158,7 @@
      *
      * @return  void
      */
-    function _handleTabEvent(tab) {
+    async function _handleTabEvent(tab) {
         var id = (typeof tab.id === 'number') ? tab.id : tab.sessionID;
 
         if (!tab.active) {
@@ -170,7 +174,7 @@
             return;
         }
 
-        if (_hostIsActive(_getHost(tab.url))) {
+        if (await _hostIsActive(_getHost(tab.url))) {
             _activate(id);
             return;
         }
@@ -180,7 +184,7 @@
 
     function _addListeners() {
         var queuedRequests = {};
-        chrome.browserAction.onClicked.addListener(_handleIconClick);
+        chrome.action.onClicked.addListener(_handleIconClick);
         chrome.tabs.onActivated.addListener(_handleTabActivated);
         chrome.tabs.onCreated.addListener(_handleTabEvent);
         chrome.tabs.onUpdated.addListener(_handleTabUpdated);
@@ -218,8 +222,18 @@
         }, {urls: ["<all_urls>"]}, ["responseHeaders"]);
 
         chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
-            if (request === "localStorage") {
-                return sendResponse(localStorage);
+            if (typeof request === 'object' && request.event === 'saveSettings') {
+                delete request.event;
+                chrome.storage.sync.set({settings: request});
+                sendResponse('saved');
+                return;
+            }
+
+            if (request === 'settings') {
+                chrome.storage.sync.get('settings', (settings) => {
+                    sendResponse(settings.settings || {});
+                });
+                return true;
             }
 
             if (request === "isActive") {

log.js

@@ -15,7 +15,7 @@
     /**
      * @var object
      */
-    var local_storage = null;
+    var settings = null;
     var color1 = '#888';
     var color2 = '#0563ad';
 
@@ -47,7 +47,7 @@
      */
     function _showLineNumbers()
     {
-        return local_storage.show_line_numbers === "true";
+        return settings.show_line_numbers === true;
     }
 
     /**
@@ -197,10 +197,10 @@
     }
 
     function _initStorage() {
-        chrome.runtime.sendMessage("localStorage", function(response) {
-            local_storage = response;
-            color1 = 'color1' in local_storage ? local_storage['color1'] : color1;
-            color2 = 'color2' in local_storage ? local_storage['color2'] : color2;
+        chrome.runtime.sendMessage('settings', function(response, two, three) {
+            settings = response;
+            color1 = 'color1' in settings ? settings.color1 : color1;
+            color2 = 'color2' in settings ? settings.color2 : color2;
             _run();
         });
     }

manifest.json

@@ -1,6 +1,6 @@
 {
     "name": "Chrome Logger",
-    "version": "4.1.2",
+    "version": "4.1.3",
     "content_scripts": [
         {
             "matches": ["http://*/*", "https://*/*"],
@@ -9,7 +9,7 @@
         }
     ],
     "background": {
-        "scripts": ["chromelogger.js"]
+        "service_worker": "chromelogger.js"
     },
     "options_ui": {
         "page": "options.html",
@@ -21,16 +21,18 @@
         "128": "icon128.png"
     },
     "description": "For server side logging and debugging in chrome console.",
-    "browser_action": {
+    "action": {
         "default_icon": "icon38_disabled.png",
         "default_title": "Chrome Logger"
     },
-    "minimum_chrome_version": "17",
-    "manifest_version": 2,
-    "permissions":
-    [
+    "minimum_chrome_version": "88",
+    "manifest_version": 3,
+    "permissions": [
         "webRequest",
-        "tabs",
+        "storage",
+        "tabs"
+    ],
+    "host_permissions": [
         "http://*/*",
         "https://*/*"
     ]

options.html

@@ -139,13 +139,13 @@ <h1>Chrome Logger Options</h1>
 
                 <label>
                     color 1:
-                    <input type="color" name="color1" value="">
+                    <input type="color" name="color1" value="#888888">
                 </label>
                 <p class="info">color used for line numbers</p>
 
                 <label>
                     color 2:
-                    <input type="color" name="color2" value="">
+                    <input type="color" name="color2" value="#0563ad">
                 </label>
                 <p class="info">color used for class names</p>