diff --git a/README.md b/README.md index e54c795..c13be5a 100644 --- a/README.md +++ b/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,29 +66,24 @@ 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 doesnt work either. +* Netflix :b:roke in Chrome version, still. ## Plans for the future -TODO: add stuff for 2.0 - -* ~~Adding custom keybinds~~ (done at lastest) -* ~~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) +* Chrome port +* Edge port +* Improvements to autodetection ## Changelog -###v2.0 (git version) +### 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 * Automatic aspect ratio detection works on Youtube _and_ Netflix @@ -96,7 +92,7 @@ TODO: add stuff for 2.0 Getting automatic aspect ratio detection required some hacks, not sure how easy will be to port to chrome. -###v2.0a1 +### v2.0a1 The extension is being rewritten almost ground-up, around automatic aspect ratio detection. By default, this extension now only works in fullscreen, but due to some simplification it should work on most sites. As direct result of this simplification: @@ -107,30 +103,30 @@ The extension is being rewritten almost ground-up, around automatic aspect ratio * Zoom/unzoom options are gone * Can't customize keybinds yet -###v1.3a1 +### v1.3a1 * Adding ability to add custom sites (in progress) * 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. -###v1.2.0 +### v1.2.0 * Auto-aspect ratio detection on netflix * initial port to Chrome -###v1.1.1 +### v1.1.1 * Fixed zooming issue on netflix * Ultrawidify shortcuts > youtube/netflix shortcuts * Fixed 'settings' page * Fixed 'settings' (wrench button) popup on youtube (it was broken by one of the previous updates) -###v1.1.0 +### v1.1.0 * Introduced Netflix support. @@ -146,23 +142,23 @@ The 'extension sometimes not working' bug was fixed (by having extension try to This could be a problem, so it was fixed. Extension is notified of updates only every ~2 seconds (which absorbs most of the "page was updated" events on page load) and doesn't attempt to reload the UI if the UI was already loaded. (Unless `debugmsg` is set to true. It's generally not, but any commits to this repo could potentially still have it enabled). -###v1.0.1 +### v1.0.1 Fixed the bug where sometimes the extension would fail to work. (example: you opened youtube's search page in a brand new tab. You then opened a video from the search results (_not_ in a new tab). Extension wouldn't work at all in videos opened in that manner). -###v1.0.0 +### v1.0.0 * Is pretty much rc1, except slightly different background image. -###v1.0-rc1 +### v1.0-rc1 * Settings page is added and mostly working. -###v0.9.9.6 +### v0.9.9.6 * The issue with buttons not fitting in the control bar was resolved. -###v0.9.9.5 +### v0.9.9.5 * Played with settings and localstorage a bit, but no clear implementation yet. * Fixed some bugs caused by event propagation. @@ -170,30 +166,30 @@ Fixed the bug where sometimes the extension would fail to work. (example: you op * Had to scrap settings page in its current form * TODO: sometimes not all buttons can fit in the control bar. Such occurences should be detected. -###v0.9.9.1 +### v0.9.9.1 * Keybinds `a` and `w` now work. * Some changes under the bonnet, mostly regarding the way keypresses are handled. * 'Settings' page is ~15% done. -###v0.9.9 +### v0.9.9 * The aspect ratio thingy is now also in GUI * Fixed code for forcing aspect ratio. At least I think it's fixed now. -###v0.9.8 +### v0.9.8 * Added GUI/buttons on the player. * Script now only loads on youtube pages (iframes included) (before, this script would run on any page) -###v0.9.7 +### v0.9.7 * No new features added. Version number got incremented due to an attempt at autoupdating (which got foiled due to lack of HTTPS) -###v0.9.6 +### v0.9.6 * Added experimental feature that tries to force an aspect ratio -###v0.9.1 +### v0.9.1 * First version on GitHub (and on AMO) with basic features (zoom, fit to width, fit to height) diff --git a/js/conf/Debug.js b/js/conf/Debug.js index a92131c..61e0ae5 100644 --- a/js/conf/Debug.js +++ b/js/conf/Debug.js @@ -1,6 +1,6 @@ // Set prod to true when releasing -// _prod = true; -_prod = false; +_prod = true; +// _prod = false; Debug = { debug: true, diff --git a/js/conf/Keybinds.js b/js/conf/Keybinds.js index d6e7283..4390cd8 100644 --- a/js/conf/Keybinds.js +++ b/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"); diff --git a/js/lib/Comms.js b/js/lib/Comms.js new file mode 100644 index 0000000..cca64c8 --- /dev/null +++ b/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 +} diff --git a/js/lib/StorageManager.js b/js/lib/StorageManager.js index 969318c..5a9c64e 100644 --- a/js/lib/StorageManager.js +++ b/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); diff --git a/js/uw-bg.js b/js/uw-bg.js index 1e771aa..bbefcf2 100644 --- a/js/uw-bg.js +++ b/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); } - return Promise.resolve(response); + 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); } - return Promise.resolve({response: config}); + 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"} diff --git a/js/uw.js b/js/uw.js index 274b19b..01e1d89 100644 --- a/js/uw.js +++ b/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(); - return Promise.resolve({response: {"arDetect_active": arDetect_active }}); + + 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) diff --git a/manifest-chrome.json b/manifest-ff.json similarity index 75% rename from manifest-chrome.json rename to manifest-ff.json index 05a13aa..1b32631 100644 --- a/manifest-chrome.json +++ b/manifest-ff.json @@ -1,7 +1,7 @@ { "manifest_version": 2, - "name": "Ultrawidify-git", - "version": "0.01", + "name": "Ultrawidify", + "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 } } diff --git a/manifest-o.json b/manifest-o.json new file mode 100644 index 0000000..08a03ff --- /dev/null +++ b/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", "", "*://*.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 + } +} diff --git a/manifest.json b/manifest.json index aa1e5ee..d236832 100644 --- a/manifest.json +++ b/manifest.json @@ -1,6 +1,6 @@ { "manifest_version": 2, - "name": "Ultrawidify-git", + "name": "Ultrawidify", "version": "2.0.1", "icons": { @@ -9,22 +9,7 @@ }, "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", "", "*://*.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/*", diff --git a/res/popup/js/popup.js b/res/popup/js/popup.js index 6e001ef..6c3aeb9 100644 --- a/res/popup/js/popup.js +++ b/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); }); diff --git a/res/popup/popup.html b/res/popup/popup.html index e92c8b2..2dd9591 100644 --- a/res/popup/popup.html +++ b/res/popup/popup.html @@ -228,6 +228,7 @@ +