Attempt at fixing Chrome's UI. Not successful because Chrome documentation is TL;DR

README.md

@@ -25,10 +25,11 @@ The technology has been here for a while, but plenty of people don't know how to
 
 ### User interface
 
-Most quick options for a page are accessible through a button in the extension bar. The options are pretty self-explanatory.
+Most quick options for a page are accessible through a button in the extension bar. The options are pretty self-explanatory. **NOT YET AVAILABLE IN CHROME due to API incompatibilites between Firefox and Chrome** — if anyone has any experience with `tabs.sendMessage` and `runtime.sendMessage` in Chrome, I'd like to recommend myself for some free pro tips on how to fix that with minimal changes to how the code works.  
 
 ![UI demo](img-demo/ui-popup-0.png)
 
+
 ### Default keyboard shortcuts
 
 `w`   - fit to width  
@@ -53,7 +54,7 @@ Manually triggering aspect ratio change will suspend automatic aspect ratio dete
 
 ### Permanent install / stable
 
-[v1.2.1 — Regular version — download from AMO](https://addons.mozilla.org/en/firefox/addon/ultrawidify/)
+[v2.0.1 — Regular version — download from AMO](https://addons.mozilla.org/en/firefox/addon/ultrawidify/)
 
 [v1.2.1 — Regular version — download from Chrome store](https://chrome.google.com/webstore/detail/ultrawidify/dndehlekllfkaijdlokmmicgnlanfjbi)
 
@@ -65,28 +66,23 @@ Manually triggering aspect ratio change will suspend automatic aspect ratio dete
 4. Add temporary addon
 5. Browse to wherever you saved it and select manifest.json
 
-## Known issues (in stable versions)
+## Known issues
 
-'More settings' button actually doesn't work at the moment.
+* Netflix :b:roke in Chrome version, still.
-Netflix doesnt work either.
 
 ## Plans for the future
 
-TODO: add stuff for 2.0
+* Chrome port
-
+* Edge port
-* ~~Adding custom keybinds~~ (done at lastest)
+* Improvements to autodetection
-* ~~Adding a proper settings page~~ (done at last)
-* ~~Adding buttons for actions in youtube's player~~ (kinda done)
-* ~~Adding an option to force specific aspect ratio~~ (now it's "good enough")
-* ~~Port to Chrome~~
-* ~~Have extension remember the last setting when switching between fullscreen and not fullscreen.~~ (kinda done)
-* ~~Have an option to remember last selected aspect ratio.~~
-* ~~Option to hide UI~~
-* ~~Netflix support~~ (done)
 
 
 ## Changelog
 
+### v2.0.1 (FF/AMO)
+
+* Autodetection: aspect ratio is no longer corrected if the detected difference is too small to make a meaningful difference
+
 ### v2.0 (git version)
 
 * Completely rewritten
@@ -113,7 +109,7 @@ The extension is being rewritten almost ground-up, around automatic aspect ratio
 * Most of the extension is being completely rewritten to accomodate that feature, which means there's a serious regression with Netflix support (no netflix at the moment)
 * I'm also trying to break the 1500 line behemoth into smaller files.
 
-###v1.2.1  (AMO + Chrome)
+### v1.2.1  (Chrome)
 
 * Fixed the bugs which caused aspect ratio to not be calculated properly.
 * Introduced further changes that allow me to not keep two separate version for Firefox and Chrome.

js/conf/Debug.js

@@ -1,6 +1,6 @@
 // Set prod to true when releasing
-// _prod = true; 
+_prod = true; 
-_prod = false;
+// _prod = false;
 
 Debug = {
   debug: true,

js/conf/Keybinds.js

@@ -93,7 +93,8 @@ var _kbd_load = async function() {
   
   var ret = await StorageManager.getopt_async("keybinds");
   
-  var keybinds = ret.keybinds;
+//   var keybinds = ret.keybinds;
+  var keybinds = {};
   
   if(Array.isArray(keybinds)){
     StorageManager.delopt("keybinds");

js/lib/Comms.js

@@ -0,0 +1,76 @@
+var _com_chrome_tabquery_wrapper = async function(tabInfo){
+  return new Promise(function (resolve, reject){    
+    browser.tabs.query(tabInfo, function(response){
+      
+      // Chrome/js shittiness mitigation — remove this line and an empty array will be returned
+      var r = response; 
+      resolve(r);
+    });
+  });
+}
+
+
+var _com_queryTabs = async function(tabInfo){
+  if(BrowserDetect.usebrowser == "chrome"){
+    return _com_chrome_tabquery_wrapper(tabInfo);
+  }
+  else{
+    return browser.tabs.query(tabInfo);
+  }
+}
+
+
+var _com_chrome_tabs_sendmsg_wrapper = async function(tab, message, options){
+  return new Promise(function (resolve, reject){
+    browser.tabs.sendMessage(tab, message, options, function(response){
+      
+      // Chrome/js shittiness mitigation — remove this line and an empty array will be returned
+      var r = response; 
+      console.log("what is this owo? ---> (response to tabs.sendMessage)", r);
+      resolve(r);
+    });
+  });
+}
+
+var _com_sendMessage = async function(tab, message, options){
+  if(BrowserDetect.usebrowser == "chrome"){
+    var r = _com_chrome_tabs_sendmsg_wrapper(tab, message, options);
+    console.log("what is this owo? (should be a promise)", r);
+    return r;
+  }
+  else{
+    return browser.tabs.sendMessage(tab, message, options);
+  }
+}
+
+var _com_chrome_tabs_sendmsgrt_wrapper = async function(message){
+  return new Promise(function (resolve, reject){
+    try{
+      browser.runtime.sendMessage(message, function(response){
+        
+        // Chrome/js shittiness mitigation — remove this line and an empty array will be returned
+        var r = response; 
+        
+        resolve(r);
+      });
+    }
+    catch(e){
+      reject(e);
+    }
+  });
+}
+
+var _com_sendMessageRuntime = async function(message){
+  if(BrowserDetect.usebrowser == "chrome"){
+    return _com_chrome_tabs_sendmsgrt_wrapper(message);
+  }
+  else{
+    return browser.runtime.sendMessage(message);
+  }
+}
+
+var Comms = {
+  queryTabs: _com_queryTabs,
+  sendMessage: _com_sendMessage,
+  sendMessageRuntime: _com_sendMessageRuntime
+}

js/lib/StorageManager.js

@@ -11,12 +11,23 @@ var _sm_getopt = function(prop, callback){
     return browser.storage.local.get(prop).then(callback);
 }
 
+var _sm_chrome_getopt_wrapper = async function(prop){
+  return new Promise(function (resolve, reject){
+    browser.storage.local.get(prop, function(response){
+      resolve(response);
+    });
+  });
+}
+
 
 var _sm_getopt_async = async function(prop){
   if(Debug.debug && Debug.debugStorage)
     console.log("[StorageManager::_sm_getopt_async] requesting prop",prop,"from localStorage.");
-  if(BrowserDetect.usebrowser == "chrome")
+ 
-    return await browser.storage.local.get(prop);
+  if(BrowserDetect.usebrowser == "chrome"){
+    var ret = await _sm_chrome_getopt_wrapper(prop);
+    return ret;
+  }
   else{
     var ret = await browser.storage.local.get(prop);
     

js/uw-bg.js

@@ -11,16 +11,19 @@ async function main(){
 }
 
 async function sendMessage(message){
-  var tabs = await browser.tabs.query({currentWindow: true, active: true});
+  var tabs = await Comms.queryTabs({currentWindow: true, active: true}); 
+  
+  if(Debug.debug)
+    console.log("[uw-bg::sendMessage] queried tabs, got this:", tabs);
   
   if(Debug.debug)
     console.log("[uw-bg::sendMessage] trying to send message", message, " to tab ", tabs[0], ". (all tabs:", tabs,")");
 
-  var response = await browser.tabs.sendMessage(tabs[0].id, message);
+  var response = await Comms.sendMessage(tabs[0].id, message);
   return response;
 }
 
-async function _uwbg_rcvmsg(message){
+async function _uwbg_rcvmsg(message, sender, sendResponse){
   
   if(Debug.debug){
     console.log("[uw-bg::_uwbg_rcvmsg] received message", message);
@@ -35,7 +38,11 @@ async function _uwbg_rcvmsg(message){
     if(Debug.debug){
       console.log("[uw-bg::_uwbg_rcvmsg] received response!", message);
     }
+    if(BrowserDetect.usebrowser == "firefox")
       return Promise.resolve(response);
+    
+    sendResponse({response: config});
+    return true;
   }
   if(message.cmd == "get-config"){
     
@@ -68,7 +75,11 @@ async function _uwbg_rcvmsg(message){
       console.log("%c[uw-bg::_uwbg_rcvmsg] there was something wrong with request for get-ardetect-active.", "color: #f00", ex);
     }
     
+    if(BrowserDetect.usebrowser == "firefox")
       return Promise.resolve({response: config});
+    
+    sendResponse({response: config});
+    return true;
   }
   else if(message.cmd == "force-ar"){
     sendMessage(message);  // args: {cmd: string, newAr: number/"auto"}

js/uw.js

@@ -135,7 +135,7 @@ function fullScreenCheck(count) {
 }
 
 // comms
-function receiveMessage(message) {
+function receiveMessage(message, sender, sendResponse) {
   if(Debug.debug)
     console.log("[uw::receiveMessage] we received a message.", message);
   
@@ -146,7 +146,12 @@ function receiveMessage(message) {
   }
   else if(message.cmd == "get-ardetect-active"){
     var arDetect_active = ArDetect.isRunning();
+    
+    if(BrowserDetect.usebrowser == "firefox")
       return Promise.resolve({response: {"arDetect_active": arDetect_active }});
+    
+    sendResponse({response: {"arDetect_active": arDetect_active }});
+    return true;
   }
   else if(message.cmd == "force-ar"){
     if(Debug.debug)

manifest-ff.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
-  "name": "Ultrawidify-git",
+  "name": "Ultrawidify",
-  "version": "0.01",
+  "version": "2.0.1",
   
   "icons": {
     "32":"res/icons/uw-32.png",
@@ -10,22 +10,41 @@
   
   "description": "Aspect ratio fixer for youtube that works around some people's disability to properly encode 21:9 (and sometimes, 16:9) videos.",
   
+  "background": {
+    "scripts": [
+      "js/dep/jquery-3.1.1.js",
     
+      "js/lib/BrowserDetect.js",
+      "js/lib/StorageManager.js",
+      
+      "js/conf/Debug.js",
+      "js/conf/Settings.js",
+      "js/conf/Keybinds.js",
+      
+      "js/uw-bg.js"
+    ]
+  },
   
   "content_scripts": [{
     "matches": ["*://*/*"],
     "js": [ 
       "js/dep/jquery-3.1.1.js",
       
+      "js/lib/BrowserDetect.js",
+      "js/lib/StorageManager.js",
+      
       "js/conf/Debug.js",
       "js/conf/Settings.js",
       "js/conf/SitesConf.js",
       "js/conf/Status.js",
+      "js/conf/ExtensionConf.js",
       
       "js/lib/FullScreenDetect.js",
       
+      "js/modules/PageInfo.js",
       "js/modules/ArDetect.js", 
       "js/modules/Resizer.js",
+      
       "js/conf/Keybinds.js",
       
       "js/uw.js" ], 
@@ -61,7 +80,7 @@
   ],
   
   "options_ui" : {
-    "page": "res/settings.html",
+    "page": "res/settings/settings.html",
     "open_in_tab": true
   }
 }

manifest-o.json

@@ -0,0 +1,88 @@
+{
+  "manifest_version": 2,
+  "name": "Ultrawidify-git",
+  "version": "2.0.1",
+  
+  "icons": {
+    "32":"res/icons/uw-32.png",
+    "64":"res/icons/uw-64.png"
+  },
+  
+  "description": "Aspect ratio fixer for youtube that works around some people's disability to properly encode 21:9 (and sometimes, 16:9) videos.",
+  
+  "background": {
+    "scripts": [
+      "js/dep/jquery-3.1.1.js",
+    
+      "js/lib/BrowserDetect.js",
+      "js/lib/StorageManager.js",
+      "js/lib/Comms.js",
+      
+      "js/conf/Debug.js",
+      "js/conf/Settings.js",
+      "js/conf/Keybinds.js",
+      
+      "js/uw-bg.js"
+    ]
+  },
+  
+  "content_scripts": [{
+    "matches": ["*://*/*"],
+    "js": [ 
+      "js/dep/jquery-3.1.1.js",
+      
+      "js/lib/BrowserDetect.js",
+      "js/lib/StorageManager.js",
+      "js/lib/Comms.js",
+      
+      "js/conf/Debug.js",
+      "js/conf/Settings.js",
+      "js/conf/SitesConf.js",
+      "js/conf/Status.js",
+      "js/conf/ExtensionConf.js",
+      
+      "js/lib/FullScreenDetect.js",
+      
+      "js/modules/PageInfo.js",
+      "js/modules/ArDetect.js", 
+      "js/modules/Resizer.js",
+      
+      "js/conf/Keybinds.js",
+      
+      "js/uw.js" ], 
+    "all_frames": true
+  }],
+  
+  "permissions": [
+    "tabs", "storage",  "activeTab", "<all_urls>", "*://*.youtube.com/*", "*://youtube.com/*", "*://imdb.com/*", "*://*.imdb.com/*"
+  ],
+  
+  "browser_action": {
+    "default_icon": "res/icons/uw-32.png",
+    "default_popup": "res/popup/popup.html",
+    "default_title": "Uʟᴛʀᴀᴡɪᴅɪꜰʏ"
+  },
+  
+  "web_accessible_resources": [
+    "js/*",
+  
+    "res/img/ytplayer-icons/zoom.png",
+    "res/img/ytplayer-icons/unzoom.png",
+    "res/img/ytplayer-icons/fitw.png",
+    "res/img/ytplayer-icons/fith.png",
+    "res/img/ytplayer-icons/reset.png",
+    "res/img/ytplayer-icons/settings.png",
+    
+    "res/img/settings/about-bg.png",
+    
+    "res/css/uw_common.css",
+    "res/css/uw_yt.css",
+    "res/css/uw_netflix.css",
+    "res/css/uw_settings.css"
+  ],
+  
+  "options_ui" : {
+    "page": "res/settings/settings.html",
+    "open_in_tab": true
+  }
+}

manifest.json

@@ -1,6 +1,6 @@
 {
   "manifest_version": 2,
-  "name": "Ultrawidify-git",
+  "name": "Ultrawidify",
   "version": "2.0.1",
   
   "icons": {
@@ -10,21 +10,6 @@
   
   "description": "Aspect ratio fixer for youtube that works around some people's disability to properly encode 21:9 (and sometimes, 16:9) videos.",
    
-  "background": {
-    "scripts": [
-      "js/dep/jquery-3.1.1.js",
-    
-      "js/lib/BrowserDetect.js",
-      "js/lib/StorageManager.js",
-      
-      "js/conf/Debug.js",
-      "js/conf/Settings.js",
-      "js/conf/Keybinds.js",
-      
-      "js/uw-bg.js"
-    ]
-  },
-  
   "content_scripts": [{
     "matches": ["*://*/*"],
     "js": [ 
@@ -32,6 +17,7 @@
       
       "js/lib/BrowserDetect.js",
       "js/lib/StorageManager.js",
+      "js/lib/Comms.js",
       
       "js/conf/Debug.js",
       "js/conf/Settings.js",
@@ -55,12 +41,6 @@
     "tabs", "storage",  "activeTab", "<all_urls>", "*://*.youtube.com/*", "*://youtube.com/*", "*://imdb.com/*", "*://*.imdb.com/*"
   ],
   
-  "browser_action": {
-    "default_icon": "res/icons/uw-32.png",
-    "default_popup": "res/popup/popup.html",
-    "default_title": "Uʟᴛʀᴀᴡɪᴅɪꜰʏ"
-  },
-  
   "web_accessible_resources": [
     "js/*",
   

res/popup/js/popup.js

@@ -40,7 +40,7 @@ async function check4videos(){
   command.sender = "popup";
   command.receiver = "uwbg";
   
-  browser.runtime.sendMessage(command)
+  Comms.sendMessageRuntime(command)
   .then(response => {
     if(Debug.debug)
       console.log("[popup.js::check4videos] received response:",response);
@@ -64,7 +64,7 @@ async function check4conf(){
   command.sender = "popup";
   command.receiver = "uwbg";
   
-  browser.runtime.sendMessage(command)
+  Comms.sendMessageRuntime(command)
   .then(response => {
     if(Debug.debug)
       console.log("[popup.js::check4conf] received response:",response);
@@ -346,7 +346,7 @@ document.addEventListener("click", (e) => {
   
   var command = getcmd(e);  
   if(command)
-    browser.runtime.sendMessage(command);
+    Comms.sendMessageRuntime(command);
 });
 
 

res/popup/popup.html

@@ -228,6 +228,7 @@
     
     <script src="../../js/lib/BrowserDetect.js"></script>
     <script src="../../js/lib/StorageManager.js"></script>
+    <script src="../../js/lib/Comms.js"></script>
     
 <!--     the following scripts aren't included yet. if they're needed, they need to be added in this order -->
 <!--    "js/conf/Debug.js",