Aimee: Hello from my last week in Baltimore.
Charles: Joe Eames.
Joe: Hey everybody.
Charles: I’m Charles Max Wood from Devchat.tv, quick shoutout about React Remote Conf coming up soon. We have a special guest this week and that’s John Sonmez.
John: Hey, what’s up?
Charles: You’ve been on the show before but do you wanna give us a brief introduction anyway?
John: Sure. I finally have nailed down my elevator pitch of who I am, what do I do. I teach software developers how to be cool, that’s what I do. That’s it. Basically I do self development for software developers, personal development. I used to say life coaching but that just gives a bad rep. For those of you that know Tony Robbins, I tried to be like Tony Robbins for software developers, helping them with all the areas of their life that are not just writing code.
I did write code for 15 years and I did do a lot of technical training as well. I guess that’s what we’re talking about today is actually a technical topic. Oh my gosh. I’m so busy talking about so many other topics. It’s a shocker. That’s what I do. I run a website called Simple Programmer. The focus of it is really just helping software developers to live better lives and improve their lives, improve their careers, all of those things that sometimes get ignored when you really, really hone down on one skill set, like a technical skill set.
Charles: I was gonna try and make an inside joke but I think we’ll just get this some other time. John and I talk every week on another podcast called Entreprogrammers. It’s a mastermind group where we talk about our businesses and give each other advice and things like that.
John: Yep, shoulders to cry on.
Charles: That’s right. Oh boy, the last couple of weeks for me. Anyway, we brought you on today to talk about Chrome extensions. It was kind of funny because I didn’t know that you knew about this particular topic. Somebody requested it on our topic request form.
In particular they were saying, “Can you build Chrome extensions with Angular?” I thought about it for a minute and I was like, “I don’t know.” I started looking at how to build a Chrome extension and the first article was John’s.
John: Yeah. That’s been a pretty popular article. I think it’s How To Create A Chrome Extension in Ten Minutes.
Charles: Do you wanna give us a run down? I know that there are Chrome extensions or Chrome plugins and you mentioned before the show that there was a difference. Do you wanna start there with what they are and what the differences are?
John: Sure. Yes. The word plugin and extension gets confused but extension is the one that rafter because I don’t think many of us are gonna be writing Chrome plugins. In fact, I think Chrome doesn’t let you write plugins anymore. A plugin is basically like, the easiest way to describe it is like shockwave or flash. That’s a plug-in. That’s because it directly integrates into the internals of the browser using some APIs. It’s usually compiled code, read it, it’s a lot more in depth. It can do nasty things. In the old model of browsers, we had just plugins and everything was a plugin.
Charles: Just to give a couple of examples, I have a Chrome extension that adds features to Gmail. It makes the Gmail page acts differently. That’s an extension versus a plugin that does like I have a color picker, that acts like it’s actually part of the Chrome program that’s running on my computer. It doesn’t actually modify the behavior of the web page or add a widget to the web page. It’s actually a widget in Chrome itself.
John: Right. I’m not sure in the color picker. I would be surprised if that’s a plugin, that maybe an extension as well. Here’s a quick way to tell. This is probably useful. If you go in to Chrome and you type, “chrome::/plugin” then you’ll see a list of your plugins.
Charles: Oh, I got you.
John: Okay. You can see in there that it’s probably gonna be like Chrome PDF viewer native client Adobe Flash Player. If you do “chrome://extensions” now you’ll see your extensions. Extensions are the thing that’s making your whole computer slow. I think we would not need faster and faster computers every year. It used to be because of games but now it’s because of Chrome.
Charles: That is true.
Joe: Extensions are also the spyware my kids keep getting on their computer, right?
John: I’m not sure if there are some interesting ways to install extensions, they might do like one click install. Extensions can do some stuff. They can’t do stuff to your computer so much. There is a few things that they might building there. Extensions can intercept web pages, modify them. They can run a lot of stuff in the background. They can definitely be used for spyware, that’s definitely a possibility.
John: Well, there is a couple of different ways. I guess this is probably worth going the high level overview about how extensions work. One form of extension is called a Page Extensions. Extensions can have multiple parts but essentially if you have a page extension, what it does is it’ll show up as an icon at the top. If you clicked that icon, it’ll render some html page.
Joe: I feel like I know everything now.
John: There you go. Just download it all into your brain.
Joe: Alright. What kinds of extensions might a developer be interested in writing on their own?
John: That’s a good question. I think for the most part, I’ve saying in about this because could I do extensions and make some money making extensions and what would be useful. I think probably the biggest appeal of extensions is if you have an app already or you have some kind of service, maybe you have a SAAS app or something like that and you want to make something easier to do or add some capability to Chrome to use your existing app.
That’s probably the number one use case. If you think about it, if you look at your extensions, that make sense right because probably the extensions you have installed come from or a large part of it come from apps that are existing. As an app developer, you wanna be able to get where your user is.
For example Evernote would be good example. Evernote has a web clipping extension that allows you to clip web pages from inside Chrome. The other place I think that you could use extension is just some of whatever functionality is more like what we used to do in Firefox with Grease Monkey type of thing or where you would wanna modify pages or do automate some kind of process.
Anytime you have something where you wanna be able to modify the page and that function doesn’t exist, it’s so simple to do that. You could just do it for yourself. You didn’t have to sell it. If you just had something that you’re doing, some data that you’re parsing on a page or you need some functionality to automate, you could definitely create an extension and you don’t even have to put it in a story. You can just drop it on your local system and utilize it.
Aimee: What made you get into this? What was the use case that you were trying to account for when you started building something? Or did you just do it out of curiosity?
John: It was mostly out of curiosity, I would say. I had done it, a website course on Chrome developer tools and when I was playing around with that, I got interested and in what other Chrome stuff could I learn about. That’s where I got interested in extensions. Like I said, I was trying to create a tool for myself, I was like, “Woah, I wanna create something to be able to view the account of, of course for a website author in the top hundred.”
I realized, “Oh, wait a minute. This will work well for an extension. Instead of me having to drop this on there manually, what if I just have this extension in my browser all the time and it basically just inserted that.” I went down the path to see how hard would this be and I was surprised when I looked into Chrome extensions because it was so simple. It sounds daunting but it was so simple. I had it working like an hour and then I realized, “Okay, this is probably something that I could do a course on and teach people how easy this is.” That’s how I ended up going down that path.
If you’re just munging through the data on the page and then going, “Okay, there are so many of these.” That seems pretty simple but if you’re getting something more complicated, how do you manage all of the interactions with the original DOM?
John: I guess there’s definitely some ways to organize your extensions. An extension can be fairly complex. The concept is simple. You can create an extension in ten minutes. You can basically drop and manifest file, this JSON file, and you can have it say that it should load up this hello.html page. If you just put that in, like I said, ten minutes, five minutes, you could have that up and you can deploy it and drop it in the directory or load it up to Chrome. You’ll have a button that shows up and you can click the button and an HTML page will come up. It’s that fast.
Within your extension, you can send messages back and forth in order to be able to manipulate different parts of the page or interact with the user interface. In your extension, you could have options that you click in the user interface part and that could actually send messages back to the content script that executes on the page and modify the page in different ways.
You can get pretty complex with this and there’s a whole good resource to figure out what you can do, is if you just go the developer.chrome.com/extensions, there’s an API guide in there and it gives you all of the information for the Chrome platform APIs. There’s just a ton of stuff that you can accomplish. Simple in theory, right? Simple to get started, simple to create a very simple page but it can be as complex as you want.
Charles: I guess down to the actual question that was asked, can I use something like Angular or React as part of my extension?
Charles: Did they ever post updates to Chrome that will break certain extensions?
John: Not that I’ve seen so far. Possibly, there might have been some security things or permissions. I know that some of the extensions that I’ve had in my browser have had to re-request permissions because they’ve changed the permissions or they made it a lot more strict with default permissions are.
That’s the other thing in your manifest file, just like most apps today. You have to say what you’re gonna do. In fact this is just a good tip for anyone that’s doing extensions. This is a big tripping point is that, if something doesn’t work and you can’t figure out why, make sure that you’ve requested the permissions in the manifest file because you have to specify those.
That’s probably your most likely breaking point unless you’re doing something that crosses the line between extension and plug-in. Some of the extensions can actually go and do some native stuff but for the most part most extensions don’t do that. Usually, you’re not gonna have an issue.
Charles: What about testing your plugins? Is it just trial and error or do they actually have some way of plugging in the test framework or something on it?
There’s also a mode in the extension tab in Chrome, you can set the developer mode. That allows you to quickly reload extensions and update them and pack them up if you want. That’s typically how I’ve done it. If you have a more complicated extension, you might do something different. If you think about this way too, an extension is basically a web app.
Aimee: What about packaging it up for the Chrome’s web store?
You can load it into your browser from there. In fact, I think Chrome has a pack extension function. If you go into Chrome, the extension tab in Chrome and you turn on developer mode, you can see pack extension there and you can say where the re-directory is and you can put in that a private key if you’re signing the extension, if you’re gonna go to the app store. It’ll basically zip it up and sign it for you and then you can upload it to the app store.
Joe: What about for beginners? Are color senses the kind of thing that’s suitable for beginners, people that don’t have a lot of experience with web applications to play around with?
John: Yeah. I think it’s probably a decent thing to start out with if you are a beginner, simply because of how easy it is to create a simple extension. You’re basically kicking back, piggybacking off of the functionality of Chrome itself. It might be actually easier to extend an app or to add something rather than trying to create your own full app.
Aimee: You’ll have to excuse me if we already talked about this because I have a lot going out in my house right now. I’m getting ready for a move. Anyways, one thing that I’d be curious about, have we at all discussed like are there any specifics if you want to build out an extensions specifically for the DevTools or just an extension that potentially like any user of Chrome would be interested in.
Have you done anything like that and is there anything that would be important to know for people interested in doing something like that? For instance, I know the Redux DevTools are super helpful. I’m trying to think if there were any other specific DevTool add-ons that I’ve ever used but that one just comes to mind.
John: Yeah. That’s a good question. I haven’t done anything with the DevTools. I believe that when I was working on extensions, I haven’t been doing it lately or working on extensions but when I was, when I was putting out this material and working, there wasn’t an ability to extend the DevTools but now there is. Now, you could actually create extensions, if I understand correctly, that it could actually extend the DevTool themselves. I’m not exactly sure. I’ve never gone and done that myself but I would imagine it would work the same way. I would imagine it’s just additional APIs that are exposed.
Aimee: Yes. Kind of what I’m thinking. That sounds super fun. Maybe we can project.
Charles: When it runs into an error, Chris is that you?
Aimee: If you could somehow get it to cock to your Mac let’s say or something and have it read back stuff to you.
Charles: There you go. I have a pull up on John’s YouTube videos. It’s funny because when I scheduled this, I was thinking to myself and I skimmed the article and I was like, “There’s gotta be more to it than this.” But it seems like it is relatively simple. You just jump in and basically tell it what you want it to do.
Aimee: You have to say something really complicated and use some jargon to intimidate everyone.
You can browse to the APIs from the Chrome API. You can do things like open new tabs and get access in Omnibar and Chrome and get access to which tab to open and switch tabs and cookies and stuff like that. Chrome itself gives you quite a bit of stuff but the basic idea is just so, so simple which is good. So many things are complicated, this is elegantly designed. It’s simple enough that someone can get started and do it in ten minutes.
Charles: One other thing that I’ve run into is, I’m gonna use Privacy Badger as an example for this but I’ve had one plugin that basically made it hard for another plugin to operate because it blocks cookies and blocks other content. You actually have to whitelist stuff as you’re loading the page. It’s kind of frustrating, is there a way to avoid that or can you just not know that it’s gonna do that if it’s messing with cookies or other core functionality features of how the page works?
John: It’d be permissions. Remember that manifest files is what a permissions and extensions. When you’re installing extension, they’ll tell you permissions. Most of the time, most people just click okay but if you saw that it was going to utilize some cookies or block some cookies, you could know ahead of time. Aside from that, extensions can clobber each other.
Charles: Do you know of any good open source extensions that we could go look at for code examples? Maybe on GitHub or something?
John: I don’t know of any. I’m sure there are some. I think on the developer page, on the developer.chrome.com/extensions, there’s this Google mail checker extension example. They should have all the sample apps in there. Let me see. Of course it’s broken now. How nice. But it’s supposed to be in there. There may be some other way to access this.
You know what, I’m gonna drop a link in here and you can probably put it in the show notes but there is. It’s exactly what you said. It’s on GitHub, they have Chrome app samples. They got a lot of stuff in here of different sample apps. That’s pretty cool.
John: One quick way to create an extension too is just to take one of this sample apps that’s already got everything, got the manifest file, got all the structure and then start modifying it until it becomes what you want. Find something that’s close to what you want. I’ve done that a few times. It’s just taking some that’s pretty close to what I want and then change a little bit and then there you go.
Charles: Alright. I don’t know if I have any other questions. Do you Joe or Aimee?
Aimee: Oh, I do not.
Joe: I’m out.
Charles: Alright let’s go and do some picks then. Joe, do you wanna start us off with picks?
Joe: Oh sure. I can start us off with picks. I think I picked on a previous episode that Angel I’ve been watching a bunch of shows that I haven’t normally watched because I don’t watch hours typically but I’ve been recently going through and watching a few movies and I saw a movie yesterday, Django Unchained. I’m not normally a big fan of Quentin Tarantino. His stuff tends to be over the top but I really thought it was a powerful movie. Little bit of social commentary and a little bit of an interesting but yet extreme view of slavery. That was an interesting show. If you just an audio, then it was enjoyable for that perspective as well. That’s something worth watching if that’s a topic that interests you. I’m gonna pick the movie Django Unchained.
John: That was definitely an awesome movie. Lots of unleashed violence, but it gives message.
Joe: Yeah. Interesting. Very interesting. I thought it was enjoyable and socially interesting.
Charles: Alright. Aimee, what are your picks?
Aimee: I have two. The first one is going to be a course by Lukas Reubelki who I know is also on one of your podcast but it is new course using Angular 2.0 patterns and an Angular 1.x app. I thought that that course that he did was pretty good.
The other one I was going to pick, this actually came through on Facebook and I haven’t seen it on Twitter. It’s more of the picture that you want to see for anything but it’s on some girls’ blog katherineyoungcreative.com. Someone I guess on Facebook took a picture of Girls’ Life magazine and Boys’ Life magazine for September 2016 that covers of them. The various topics for instance like the Girls’ Life magazine says, “Fall fashion you’ll fall in love with.” And the Boys’ Life magazine talks about exploring your future.
This girl re-did the Girls’ Life cover and instead of fall fashion you’ll love, she has girls doing good. Instead of your dream hair, she has changed it to your dream career. Even though it’s a blog post that’s super short, it just gets the point across. If you have a teenage daughter or even if you’re older, I thought that was just some good things to ponder a little bit. I’ll put a link for both those things in the show notes and that’s it for me.
Charles: I’m really curious because I know that Boys’ Life is put out by the Boy Scouts of America.
Aimee: Okay. I don’t know.
Charles: I don’t know who puts out Girls’ Life. I think the value set and the aims of the organizations that put it out are probably very different.
Aimee: I hope so because I would like to think girl scouts would not be like your dream hair and like it says, one of the things on here is like, are you ready for a boyfriend. And then the different one that she changed is planning your life goals. It’s just sad that people seem to think that this is what girls are interested in. I would venture to say a lot of them are interested in it only because they don’t know any better or the people around them. They don’t just have like any examples of girls who are interested in other types of things so they feel like they have to be into doing their hair and stuff like that because that’s what everyone else around them is doing. Now that there’s anything wrong with that but it’s good to know that there are other options out there.
John: I’m pretty into doing my hair.
Charles: Me too. All of it.
Aimee: I don’t see anything wrong with that but it’s good. Personally, I speak from experience. Growing up, that’s what I was surrounded with. Just do a series of meeting different people, I realized there’s a lot more to what I can do with my life and stuff.
Charles: Okay. I have a couple of picks. The first one is something that I used for the first time today. It is Webinar Jam which is a webinar software. I’ve been using Crowdcast for the past couple of years. Ultimately, what made me switch was that I’ve been doing the online conferences, I’ve been getting ready to put together some webinars. I really, really wanted something that was more along the lines of both something that was well tested which Google is, I’ve had a few issues with Crowdcast. The other issue is that I want the high definition video. Crowdcats doesn’t provide that much use Google Hangouts and Webinar Jam is built around Google Hangouts. It all works out, has pretty much the same features.
It actually costs a little less over the course of the year. There are a lot of reasons why I was looking at switching. That’s it. Crowdcast is an awesome software and I really like it but just didn’t quite get what I needed. I’m really liking it. We used it for the Freelancers’ Show Q&A this morning. It worked great. I’m excited to see how things go. I’m using it for Angular Remote Conf this week.
For my five mistakes that are keeping you for getting hired webinar. You can actually go check out the webinar if you want. I’ll put a link to that in the show notes as well if you’re looking for a job. Really digging it so far. It has all kinds of analytics and stuff that also help you keep track of what’s going on with it. Those are my picks. John, what are your picks?
John: Okay. I’ve got three picks here. Is it alright if I pick one of my picks for something that I have?
John: Okay. I should probably pick a Chrome extension, that makes sense. At first there wasn’t one then I realized there’s this pretty awesome Chrome Extension that I’ve been using called Screencastify. It’s awesomely named and it’s awesome. You can find that at screencastify.com. It’s also in the Chrome extensions store. It’s a Chrome extension that’s a screen recorder inside of Chrome which is just awesome.
I’ve been using this to really just irritate customer service by instead of just setting an email when I have problem with things, I record a screencast because it’s so easy to do now. I get to record a screencast, it’ll save up to Google Drive automatically then I just drop them a link and like, “Watch this video.” We don’t have to have five emails going back and forth showing you what’s wrong with your website.
This is really cool for doing screencasting and showing people how you’re doing things in your browser, making training for employees, things like that. Really simple. Everyone says, “You should do screencast, write it in screencast.” It can be difficult to do. This is something that it’s right there in the Chrome browser, I find myself using it all the time.
My next pick is a book by Scott Adams, the creator of Dilbert. I was very surprised. I’ve actually read a couple of his books now. I’m really surprised by this guy but he is really awesome. It’s called How to Fail at Almost Everything and Still Win Big, Kind of the Story of My Life. It is a really, really good book. It actually has a lot of good systems in there.
He talks about systems thinking and coming up with processes for things. It’s just really, really good life advice honestly on how to be successful. It covers a ton of topics from failure and how to overcome failure and not being afraid of failure. Even some stuff on getting in shape. He’s just really, really a brilliant guy that has done a lot of things, a lot more than just creating the Dilbert cartoon. I definitely feel like this is a top book especially for tech people because they’ll probably relate to him quite a bit since that was his background and if you like Dilbert.
The last thing is my own thing. I am currently working on a book, a new book. I can’t believe I’m writing another book after writing Soft Skills but I am and it’s called The Complete Software Developer’s Career Guide, at least that’s a tentative title. You can sign up, I’m basically giving it away for free while I’m working on it at my blog. You guys just go to simpleprogrammer.com or if you go to simpleprogrammer.com/careerguide, you can sign up and get the chapters, basically the entire book for free while it’s being created, it’ll be emailed to you. Eventually, it’ll come out and I’m hoping to have a nice two volumes set form but you can get all the information for free. It basically covers from the beginning of your career to advanced state of your career and everything in between and from a soft skill type of perspective. All the things that you need to know in order to succeed. How to get a job and raise up in your career. How to work with your co-workers. All of that stuff. Those are my picks.
Charles: Alright. I know you have a lot going on. Are there any links besides the one that you just shared that you want people to go check out as far as simpleprogrammer.com or YouTube channel or anything like that?
John: Like I said, just check out the book. If you wanna sign up in simpleprogrammer.com, if you wanna find me and what I’m doing. You can find me in YouTube and everything else from there as well. I’m doing a lot of YouTube stuff now. I’m doing probably two to three videos a day.
Charles: Alright. We’ll go ahead and wrap this up. Thanks for coming John.
John: Yeah. Thanks for having me. Anytime.
Charles: Yup. One other thing I’ll just add is if you wanna hear John and I and two of our other friends talk about our businesses every week, check it out at entreprogrammers.com. With that, we’ll wrap it up, we’ll catch you all next week.