Comments (14)
For more technical details:
- Create a "proxy input" and add it into the tab document, should probably be hidden, and position: fixed to avoid conflict with Youtube layout.
- Listen for changes on the proxy input, instead of the extension input
- When clicking for upload thumbnail inside the extension, trigger a click event on the hidden input to open the file browser.
I don't have the time to go deeper into chrome extensions for now, but if someone is interested into trying to implement this workaround, let us know by mentioning this issue :)
Have a good day, and let's go for the temporary fix using a wider container for the extension @bdebon !
from youtube-thumbnail-tester-chrome-extension.
Tried to fix this issue adding the correct permission to the manifest through #30
But, as mentioned in this thread https://twitter.com/benjamincodeYT/status/1384487878814801924, the problem is well much more weird.
This issue seems to occur only when the bounding box of the Chrome file browser is going out of the screen viewport
I think that one possible fix to solve this issue is to do not have the real input into the template of the Chrome Extension, but to place a "proxy" input inside the current tab DOM tree.
from youtube-thumbnail-tester-chrome-extension.
I see the idea of your fix. Still better the one that I had in mind...
As you describe it, the bug happens only when the system file upload goes outside of the screen.
If our popup is wide enough, the file system window will open in the middle of it without never going outside.
But esthetically it's fucking weird... And don't know if it can fix it. I you set the width of the project to 1000px, do you still have the problem or no?
from youtube-thumbnail-tester-chrome-extension.
Using a 1000px container size seems to fix the problem.
from youtube-thumbnail-tester-chrome-extension.
from youtube-thumbnail-tester-chrome-extension.
I would definitely go for the "in document" / "proxy input" solution. Not sure if it can fix the problem, but deserve a try.
from youtube-thumbnail-tester-chrome-extension.
from youtube-thumbnail-tester-chrome-extension.
@benjaminrobinet that a good idea of workaround. The thing i'm not to sure is if you can re open the popup programmatically if it unfocus it when you trigger the proxy click. I will give it a try out of curiosity :)
from youtube-thumbnail-tester-chrome-extension.
@Jorand I just did a little pen / test case here: https://codepen.io/benjaminrobinet/pen/RwKqwMa
It seems to have its chance no ? Well I am not sure to understand the possible issue using this workaround. Waiting for your feedback :)
from youtube-thumbnail-tester-chrome-extension.
@benjaminrobinet I tried the proxy input. It kinda works but as you can see the popup unfocus/disappear after the file selection. I didn't find a solution to keep it open.
https://www.loom.com/share/ed349220dd6c4614a8f71d307790ffe3
from youtube-thumbnail-tester-chrome-extension.
Ohhhh @Jorand well seen... I guess programmatically focus back inside the chrome extension won't work ?...
from youtube-thumbnail-tester-chrome-extension.
@benjaminrobinet Unfortunately not.. Open it back programmatically is not possible too i think.
The weird thing is when inspect the popup and the chrome dev tool is open it stays open 😐.
Last hope is to put the popup in the content script. I will try that and make a pull request so you can test it.
from youtube-thumbnail-tester-chrome-extension.
Yes, it is how Chrome extensions are working... There is no way to keep an extension open when leaving the focus, nothing exists to keep it persisting... So yes, maybe the best fix to solve that would be to have the app directly injected into the YouTube tab (like Loom, or Pixel Perfect etc...)...
from youtube-thumbnail-tester-chrome-extension.
Fix attempt -> #31
from youtube-thumbnail-tester-chrome-extension.
Related Issues (8)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from youtube-thumbnail-tester-chrome-extension.