Use Custom Phone Mock in xThunkabel Builder | Chrome Extension

:wave: Hello everyone,

Hope you all are well and safe in this pandemic,
Today i took a try to create a chrome extension, using which i can change default phone mock to iOS (iPhone 8) or Android (Samsung Galaxy Note 5) one a click of a button. I have made this as an experiment, i don’t even know if this is useful or not. But right after it’s done, i thought to share this with you guys. Here is the output


Click here to directly downoad the extension, Or visit my webiste (cttricks.com) where i have written a complete blog on how to download and install this extension. Please note that, i haven’t published this extension so you have to follow the manual method to use this extension.

Download and use this extension, Hit the :heart: button if you like this and feel free to write you feedback, suggestions & querys in the comment below.

Enjoy!!

6 Likes

awesome guide

i might try to add my own resolutions
can i know how u made these?
cant see output on live testing




i have another question that can i use another resulution… like redmi5
can i edit source code?

I’m very lazy to explain something in comments :sweat_smile: But it’s not that complex to understand, You can download and take a look at the soure code of this extension and customise it according to your need. I have put code on github so you can take a look and get codes from there too.

Basically this extension is adding few lines of CSS codes in the header, and rest modifying CSS of mock container using Javascript.

3 Likes

well i edited the code aand i added redmi 5 image link but it was total rip

any solution?

woah this actually works thanks for sharing

@cttricks the asset in your website does not exist so icant download the zip file please look into this. thanks

You can get files/extension from my GitHub repo

1 Like