Dev Tabs

Dev Tabs插件简介

Dev Tabs插件描述

Dev Tabs is a New Tab page  your ling page f Chrome. This extension was created mostly f Developers, Software Engineers,  similar. F the longest time I looked f a new tab replacement  only found ones that were generic, not suited towards development wk, full of ads, tracked me at every turn,  were just not my style. So I created Dev Tabs. I integrated space f regularly visited sites, development industry news, current weather conditions, GitHub,  I even put a small QR code generat in the extension. This has quickly become an imptant tool that I have come to rely on. 

BOOKMARKS:

Starting on the left side of the page, I put a column of Bookmarks. These are the sites that I regularly use. On a daily basis there are neumours sites that I visit throughout the day f wk  pleasure. Email client, GitHub, different documentaton websites, tutials,  much much me. Instead of hunting through all the folders of bookmarks I have saved in Chrome, I have a list of the regular sites displayed right on the page. You can add as many as you want  the column will scroll independently. These have nothing to do with the built in bookmarks  are entered separately. When you first visit the page, click on the settings cog in the middle of the page  you will be brought a few different selections. If you click on the Bookmarks setting you will be presented with an input box. This is where you will input the initial group of sites you want to show up in the bookmarks column. Using markdown fmat, [Name of Site](https://nameOfWebsite.com), [Name of Site](https://nameOfWebsite.com), separating each entry with a comma, enter all sites you want to be listed on the page. When you are done,  go back to the page, they will all be listed. Also, in the middle of the page under the settings cog, there is a + f adding single Bookmarks as you may come across something you want to add as you go without having to reinput all the others. If you click on the + an input will appear where you can enter the name  site url. Once you hit save, that entry will be appended to the end of the list. 

NEWS:

I used Dev.tos articles API to integrate industry new. This will automatically populate a column with the days articles from dev.tos front page. If there is an image accompanying the article it will be displayed  under that will be the title of the article which is also a clickable url to bring you directly to the selected article. Not only have I found many interesting articles on Dev.to, I have also found countless helpful howtos,  I also contribute from time to time, which is why I used them to display industry news. 

GITHUB:

GitHub integration was a given. I use their services everyday, multiple times a day. When I was doing the 100 days of code I made sure to commit something everyday to track my progress. Because of that, I have the GitHub contributions graph in the center of the page. When you first visit the page, go to settings  select the GitHub Calendar option. Fill in your GitHub username  whey you go back to the main page, it will populate the graph. Since I use GitHub so much I also integrated a list of GitHub repos. This ption of the page will display your top 10 repos. Setting it up is the same process, selecting GitHub Feed  filling in your username again. I left this as two separate settings since I personally have multiple GitHub accounts  thought someone may want to display the Graph from one username  the Repos from a different username. You can also just enter the same username f both settings  display the graph  list of top 10 from the same account. The graph is just f display but the list of repos is a clickable list. If you click on the repo name it will bring you directly to the selected page. 

WEATHER:

In the center of the page I displayed your current weather conditions. Navigate to the settings page  select the Weather option  click the button to locate yourself. I used the HTML Geolocation API to acquire your codinates when you click the button. On the first click it will ask permission to locate you. Once you click ok it will fetch you codinates  ste them in Chromes Local Stage. Any  all infmation this extension collects is sted in Chromes Local Stage on your machine. No infmation is collected  sent anywhere. Everything stays with you. With that being said, if you move locations  want your weather display updated, you will have to navigate back to settings  click the button again to get your new codinates, which will overwrite the ones previously sted. It will then display the crect weather. 

TIME & DATE:

The time  date is just a regular clock written in JavaScript. Getting the current time  date  simply displaying it in the center of the page. 

TWITTER:

Dev.to has its own Chrome extension f displaying an updated news feed  list of articles next to your Twitter feed when you visit the Twitter website. I went ahead  browed the imptant parts from this extension  included it in here. So when you visit Twitter, on the left side of your feed will be a small nonintrusive list of the top articles on dev.to at the moment. The list is interactive  I found it helpful f finding smart people in the industry to follow.  You can find their extension on their GitHub page at: https://github.com/thepracticaldev. 

QR CODE GENERATOR:

One of the last things I decided to put in this extension at this time, is a small QR code generat. I currently wk remotely,  many times during the day I have to get up from my wkstation  do something else. Everyday at 2:15pm, I have to pick the kids up from school. I have to wait on line f 30 mins with the car off. If I am in the middle of reading how to do something, now I can copy the URL of whatever site I am on, paste it in the QR code generat, get a QR code, then scan it with my phone. Now while I am waiting on line I can finish reading  doing whatever it was I was doing. This was the motivation f the QR feature. To use it, just click the icon f this extension  a small box will show up. In the box will be some simple infmation of the extension  at the bottom you will see the input. Just paste the URL  whatever  click to generate the QR code. Scan it with your phone  off you go. 

TRACKING & PERSONAL INFORMATION:

As I said in the begining, I was looking f an extension that was geared towards the wk I do  did not have ads  tracking. Since I could not find one I decided to make one. With that being said... This extension does not track you  get any kind of personally identifiable infmation. It does NOT have any ads  anything like that. I even left off Google Analytics. Any infmation needed f this extensions functionality is sted on YOUR computer in Chromes local stage. I specify that because, as a developer I am sure you know, there are two different local stage locations. One f the HTML API  the other f Chromes API. I found this out while developing this extension  in fact needed a special extension to examine Chrome Local Stage. Just doing an inspect element will not let you see it. I used  extension called: Stage Area Expler  https://github.com/jusio/stageareaexpler. This allowed me to see Chromes Local Stage. If you are curious. 

SUPPORT:

Please email me at: info@mattaz.com

Website: https://mattaz.com 

Infmation, upgrades,  further development can be tracked at: https://mattaz.com/devTabs

Code: https://github.com/CipherCoder/chromeExtension
                                

Dev Tabs插件离线安装方法

1.首先用户点击谷歌浏览器右上角的自定义及控制按钮，在下拉框中选择设置。

2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序或直接输入：chrome://extensions/

3.找到自己已经下载好的Chrome离线安装文件xxx.crx，然后将其从资源管理器中拖动到Chrome的扩展管理界面中，这时候用户会发现在扩展管理器的中央部分中会多出一个”拖动以安装“的插件按钮。

4.下载 Dev TabsChrome插件v0.4.0版本到本地。

5.勾选开发者模式，点击加载已解压的扩展程序，将文件夹选择即可安装插件。

注意：最新版本的chrome浏览器直接拖放安装时会出现“程序包无效CRX-HEADER-INVALID”的报错信息，参照这篇文章即可解决