Build dynamic wallpaper on chrome
Tags: showdev, webdev, beginners, tutorial
Published: 2021-06-15 18:07:04

##Introduction
  Most of the web user uses the chrome web browser for searching things on the internet. so, here I share the dynamic wallpaper using chrome browser. but, the same concept we able to do in other browsers also, like firefox, safari...etc.,

###Dynamic theme on chrome browser
  In chrome browser, the new tab screen will be the home screen. whenever we open it. it will show first. so, in this article, I will share `how to replace the new tab screen and add our own features`.

###How to replace the chrome new tab screen?
Answer: **Chrome extension**

###Let's start the development.
1.build a screen using front-end lightweight library.
I personally choose the Vue app for example. if you things any other light-weighted app. you will use it.

```json
# In your system not installed vue-cli. the below command to use and install it.
$ yarn global add @vue/cli
$ vue create hello-world #I chose vue 3
```

2.create a `manifest.json` and add the below lines. Then, put the file into the public folder inside the Vue app.

```json
{
  "name": "<App name>",
  "description": "<App description>",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": ["tabs"],
  "chrome_url_overrides": {    
    "newtab": "index.html"  ##Mention the file name. which is need to show in the new tab.
  },
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_icon": {
      "16": "/images/cool16.png",
      "32": "/images/cool32.png",
      "48": "/images/cool48.png",
      "128": "/images/cool128.png"
    }
  },
  "icons": {
    "16": "/images/cool16.png",
    "32": "/images/cool32.png",
    "48": "/images/cool48.png",
    "128": "/images/cool128.png"
  }
}
```

3.Replace the below code in `App.vue` file.
```javascript
<template>
  <div class="date-time-wrapper">
    <h1 class="time">{{time}}</h1>
    <h3 class="greet">{{greeting}}</h3>
  </div>
</template>

<script>
export default {
  name: 'App',
  setup() {
    const dateObject = new Date();
    const hour = dateObject.getHours();
    let greet = "Good";
    
    if(hour <= 11) {
      greet += " morning";
    }else if(hour <= 18) {
      greet += " afternoon";
    }else {
      greet += " evening";
    }
    return {
      greeting: greet,
      time: `${hour +":"+dateObject.getMinutes()}`
    }
  }
}
</script>

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .date-time-wrapper {
    text-align: center;
    margin: auto;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
  }
  .time {
    font-size: 8rem;
    font-weight: 600;
    margin-bottom: 4px;
  }
  .greet {
    font-size: 3.5rem;
    font-weight: 400;
  }
  body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    // This background will bring new dynamic wallper everytime its provided by unsplash
    background-image: url(https://source.unsplash.com/random);
    background-size: cover;
    background-color: auto;
  }
</style>
```
4.Once done all steps. Go to the app home directory and run the below command.
```
$ yarn serve
```
visit the serving URL like `http://localhost:8080`. we able to see the below screen.
![App screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qvj183ycdzi8njmjqg2l.png)

That's it *we build the dynamic wallpaper screen using the Vue app*.

**Next chapter** I will share how to test in chrome browser in local and publish the chrome extension and list it in the marketplace app.
______

Thanks for reading this post.🍻