DEV Community

loading...
Cover image for Build dynamic wallpaper on chrome

Build dynamic wallpaper on chrome

Lakshmanan Arumugam
My passion is building an impressive and beautiful web application through carefully crafted code with user-centric design.
Originally published at lakshmananarumugam.com Updated on ・2 min read

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
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

4.Once done all steps. Go to the app home directory and run the below command.

$ yarn serve
Enter fullscreen mode Exit fullscreen mode

visit the serving URL like http://localhost:8080. we able to see the below screen.
App 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.🍻

Discussion (0)