I am working on a google chrome extension. I am using Liquid slider to help me with the popup, when I am in brackets and do live preview, I get exactly the result I want.
https://gyazo.com/d2b5e7215ff8dfab59d677fd94637a25
But when I go into google chrome to test my extension this happens.
https://gyazo.com/48ea596645f0b16305915fb144d2aad8
It is not in the tab format anymore.
I could not find any support on this, if anyone has any idea why this does not work. Is it just because I can't use Liquid Slider in my chrome extension? I have no idea. Please tell me if you need more information.
Edit: If it is not possible to fix the error and bring back the tabs, we can also just use arrows, and figure out how to delete the tabs.
Chrome extensions have stricter security & sandboxing than regular web pages - for example, Content Security Policy is enabled by default. That may explain the difference.
To get more specifics about what's going wrong, you can debug your extension by right-clicking the icon and selecting Inspect Popup. This will open the familiar Chrome Dev Tools where you can check the console for errors, etc. Does that give you more specifics to go on?
Related
here is my problem :
What I want :
I'm wondering if it's possible to have access (to change them) to renderings settings from an extension in Chrome. I know some APIs exist like DevTools API but I cannot find a way to change any of these rendering settings from my extension.
Rendering tab in DevTools
What I want more specifically :
I made a Chrome extension and I want it to make a specific tab think it's focused, even if it's not.
I know I can do it manually by opening Chrome DevTools panel and enabling "Emulate a focused page" but I really want my extension to do it programmatically.
Why I want to do this :
Some websites don't behave the same when the page is not focused, so I want my extension to make their behavior consistent.
Do you think it is possible ? Thx :)
I've been searching online for a week now and I really can't find any solution to my problem...
I am wondering if there is any way I can open Chrome console when the webpage is firstly loaded and set the viewport to a specific device (iPhone X), through a JavaScript code.
I had to do a test where I should only work on iPhone X viewport so I thought was nice if they can already see the console opened with the interested viewport active so they are going to check straight away my work instead of clicking cmd+alt+j and then set toggle device toolbar
Thanks
I don't know this to be true, but I'm guessing that might not be possible because it would infringe on the sandboxing principles that Chrome tabs are based on. You are asking for system level control of the Chrome Browser UI, and there's a lot of effort put into not letting JS code do that because of malicious intent.
You could try using Electron to build an App that does this for you, however that may still have the sandbox boundary concern.
EDIT - You may also look into the Chrome extension architecture. It allows you to implement code outside of the sandbox boundaries. I'm not entirely hopeful that this would work, but it I do know that extensions allow you to control most of interface.
I want to write an extension which can be used on mobile chrome, but it seems google doesn't supply a way to do that. So I was thinking to add my extension to developer tools panels using the api chrome.devtools.panels.create. For web page, my new panel can show on the dev tools panel bar, but for mobile chrome using adb to do a remote debug, my new panel won't appear on the dev tools panel.
At first I think it is a dead end, but after that I found extension "page speed" can be seen when using adb to do a remote debug. I copy the manifest.json content ,and replace it with my own content, but it still can't work.
Does any one know how to write a extension/devtools panel to debug chorme mobile?
This doesn't directly answer your question, but if you're ultimately looking for a way to get devtools on mobile, it's now possible on the latest Chrome stable (and newer) channels.
http://www.html5rocks.com/en/tutorials/developertools/mobile/
No, you cannot build extensions for mobile chrome at this time. See the FAQ.
How can I see javascript error when loading chrome extensions? I've tried using developer tools but I don't see any errors there. Also if I use console.log, I don't see any output in the console.
Anyone have any ideas?
http://code.google.com/chrome/extensions/tut_debugging.html
Go to the Extensions page (chrome://extensions), and make sure Developer mode is still enabled. The Extensions page doesn't need to be open for the following to work. The browser remembers the setting, even when the page isn't shown.
Right-click the extension's icon and choose the Inspect popup menu item. The popup appears, and a Developer Tools window like the following should display the code for popup.html.
The above answer doesn't work anymore. Sadly the Inspect Popup menu item has been removed from Chrome.
But this answer works:
Debug popup.html of a Chrome Extension?
(More precisely: the second comment of the first answer on the above page helps).
I have a JavaScript issue where something doesn't work in Chrome but works in Firefox. Since this is part of a big Web Portal, I cannot easily isolate stuff.
I know that Chrome has a Javascript timeline, but does Firefox have something like that as well? Firebug only seems to set arbitrary breakpoints or "Break on Next", but no way to just see what JavaScript is executed.
Open firebug and click the arrow on the "net" tab. click enable. Lastly, reload the page.