How I developed Apple’s Screen time Chrome Extension

One of the features of iOS12 that I love is screen time. It gives me an idea of the apps I spend so much time on, and I can even set a time limit for the apps. I spend most of my time on my laptop and I sometimes find myself wandering away on twitter or getting carried away with youtube videos even when I have pending tasks to attend to. That motivated me to think of how I can track how much time I spend on popular social media sites and restrict access based on certain conditions in order to increase productivity.

Set up the project

I used vuejs to develop a chrome extension that helps me keep track of time spent on several sites on my browsers, and put some control measures in place.

The first step is to install the vue cli. The cli makes it easy to set up all the necessary files you need to start coding.

npm install -g @vue/cli
vue create screentime

After all the modules have been successfully installed, create a manifest.json file. All extensions must have this file. It informs chrome browser all the basic information it needs to know about your extension.

The key fields to focus on are browser_action, background and permissions. The browser_action specifies the html to load when the extension icon is clicked. The background script specifies the javascript file that will continuously run in the background as long as chrome is opened. The permissions field is to explicitly request for resources that the extension will be using. The tabs permission allows us to know the currently active tab and also know when tabs are being switched.

Background task

The background task will have to listen to every update happening on tabs so that we can know when a url is being visited. The first thing we need to do is add an event listener for tab updates.

chrome.tabs.onUpdated.addListener((tabId, changeDetails, tab) => {
  console.log(tab);
});

To test out what we’ve done so far (still quite little right 😄), let’s package our extension and test it out in chrome. We need to build the vue files. To do that, run npm run build command from your terminal. A dist folder should be created. Copy the manifest.json file into the dist folder and copy the background.js file into a js folder in dist (this will be automated later). Open chrome browser and open the extensions page (chrome://extensions) click on the Load unpacked menu at the top left (make sure developer mode is toggled on) and select the dist folder.

Click on the background page to view the console and then visit any site. Every time a response is received from the site, the details should be logged to the console.

Another thing we need to track is when tabs are being switched. If the tab is switched to a site we’re tracking then we need to mark the moment, and when a new tab is activated we need to mark that moment also in order to calculate how much time the user spent on the site that was switched away from. In order to achieve this, we need to add an onActivated event listener from the chrome tabs api. Add this snippet to the background.js file.

chrome.tabs.onActivated.addListener(() => {
// query the active tab
  chrome.tabs.query({
    active: true,
    currentWindow: true
  }, activeTab => {
    // details of the tab
    console.log(activeTab);
  });
});

Each time you switch tabs, the new active tab details are displayed on console.

Also, when the chrome browser is no longer in focus, we need to mark that moment and also know when it’s back in focus. The chrome.windows.onFocusChanged is the event we need to achieve that functionality.

chrome.windows.onFocusChanged.addListener(window => {
  console.log(window);
});

Each time the chrome browser loses focus, -1 is logged on the console. When it regains focus, the chrome browser window ID is logged.

Track time spent

It’s time to put all these events together and find a way to track the number of seconds spent on each site. To do that, we need to modify our background.js file and make it more robust.

The extension console should look like this each time you navigate through the four urls in background.js file.

Storage

The next thing that has to be done is to save how much time is spent on each site every day. The storage permission will have to be added to the manifest.json file.

Three new functions will be added to the background.js file. A function to retrieve data from chrome.storage.local, update the data and the third is to save.

Show the chart

The final step is to show the bar chart on chrome indicating how many seconds were used on each of the four sites. Ensure that the background.js and manifest.json files in your root directory are updated. The next thing is to install a vue js chart module so that we can better visualize the data.

npm install vue-chartjs chart.js --save

Create a chart.js file in the components directory.

The chart.js file reads from the chrome storage and constructs a horizontal bar chart. The chart.js file will now be imported in the HelloWorld.vue file essentially making the file this.

Build Extension

Let’s get the extension all fired up now. The build script in package.json file will have to be edited to support copying the manifest.json file and background.js file each time we build

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build && npm run move",
    "move": "cp manifest.json dist/manifest.json && cp background.js dist/js/background.js"
}

The move command may be slightly different for windows users

Run the build command and load the dist folder in chrome extension. Try visiting the four sites hardcoded in the background.js file and then click on the extension icon to see the chart indicating how much time you’ve used on each.

Full project can be found here https://github.com/femioladeji/screentime. The full extension offers a feature where you can set the maximum number of minutes you want to spend on a site daily. Once you’ve gotten to the time limit, you’ll not be able to access the site again till the next day. You can install the packaged extension here https://chrome.google.com/webstore/detail/screentime/ofmanejijbcohgebmdfacglmhemiifca