Some extensions-like the Full Page Screen Capture-only rely on the toggle event to activate the extension, and some of them (like Browser EQ) actually need a multifaceted fully functional interface screens.
If latter, you have two options to toggle a UI screen on extension activation.
First one is, just including the path to the html file of what you want to show as the default popup on the manifest.
This way whenever the icon is clicked, the popup.
html is triggered and shownThe second, is removing the default popup option from the manifest and instead creating a new window when the extension icon is clicked by using the windows API.
I went with the default popup option for Browser EQ, but in case you want to have a separate dedicated window that is not “attached” to the browser bar as a popup, now you know that there is a way to do that.
A (Relatively) Painless Way To Style The UILast but not least, if you are making a somewhat complex UI for your extension, you probably also want to style it.
In which case, you will shortly realize that having to click on the extension icon every time you want to see the style changes you made on your code editor gets really old, really quick!One way around that if opening the popup.
html DevTools by right clicking on it when the popup is open and keeping it open while you are working on styling.
Now if you F5 while you are focused on the DevTools inspector, it will refresh the popup screen and will show you the latest changes without having to click on the extension icon.
Another, a more user friendly way is, directly opening your popup html file by going to chrome-extension://YOUR_EXTENSION_ID_HERE/popup.
html address in your browser.
By doing it this way you can directly refresh the page without even having to open the devtools (although you can open that up as well), beware that whenever you reload your extension by using the reload function on chrome://extensions, this page will disappear, so if you do a complete reload (which you don’t have to do for CSS changes to take effect) you will have to open this page again.
You Can Open Your Popup Screen Directly in the BrowserTIP: You can find your extension ID by going to chrome://extensionsWell, there it is, most (definitely not all) of what I have learned when making a Chrome Extension.
Please feel free to install and try the application for yourself and let me know what you think, and If you want to find out more about how to build Chrome Extensions or see a few examples, here are some of the many resources I have taken advantage of while building this.
ResourcesTutorials:Chrome’s Official Getting Started TutorialGoogle Developers — Google Chrome Extensions: How to Build an ExtensionThe Coding Train — Chrome Extensions (Video Tutorial Series)Sample Extensions:Chrome’s Official Sample ExtensionsThe Coding Train — Example ExtensionsChrome-Audio-CaptureUseful Links:Chrome tabCapture APIMDN Web Docs MediaStreamAudioSourceNodeHow to Save Extension Popup Window Content (SO)How to Communicate Between Popup.
js and Background.
js in a Chrome Extension (SO)Development Playlist:Louis Cole — F it up (Live Sesh)Vulfpeck — Dean Town (Live from Here)DJ Maseo (De La Soul) Boiler Room London DJ SetKAYTRANADA Boiler Room Montreal DJ SetJapanese Funk and Soul on VinylSama’ DJ Set | Boiler Room Palestine.. More details