Build dynamic wallpaper on chrome

##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.

# 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.

{
  "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.

<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.

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.🍻