Chrome Extensions Interview Questions

Do not miss this exclusive book on Binary Tree Problems. Get it now for free.

In this article, we have presented Chrome Extensions Interview Questions along with detailed answers.

The receeding questions pertain to the manifest version 3 unless explicitly stated in the question.

What is a browser extension?
(a) A browser extenison is a plugin.
(b) A program geographically extending education resources.
(c) Programs that customize the browsing experience.

Ans: c
Explanation: Extensions are meant to enhance browsing experience, Forexample take a look at the password manager that prompts you to save your password.

What technologies are used to build Google Chrome extensions?
(a) Angular
(b) CSS
(c) HTML
(d) JS

Ans: b, c, d

What is the difference between an extension and a plugin?
(a) Extensions are developed with HTML, CSS and JS while plugins are developed with only Typescript.
(b) Extensions provide extra functionality and plugins modify core functionality.
(c) Extensions are open source and plugins are closed source.
(d) Extensions modify core functionality whereas plugins provide extra functionality.

Ans: d
Explanation: Extensions utilize the pre-existing browser APIs to provide features that donot ship with the browser by default.

Which scripting components of a Google Chrome extension best represents the extension runtime?
(a) Popup script
(b) Service workers
(c) Content Scripts
(d) Command Scripts

Ans: b
Explanation: Due to the event driven nature of extensions (Most components have associated events), Not every scripting component is able to capture all the events fired from input components and the extension itself, but service workers are the best representatives of extension runtime.

The following components can be used to recieve user input except....?
(a) Keyboard
(b) Onmibox
(c) action
(d) command

Ans: a
Explanation: The input components referred to here are the interfaces between the user and the extension.

Which of the fields are required in a manifest file?
(a) name
(b) action
(c) icons
(d) manifest_version

Ans: a, b, d
Explanation: The simplest manifest file only has to define those three fields.

{
     "manifest_version": 3,
     "name": "NoteSearch",
     "version": "1.0.0"
 }

content_scripts field supports all the following attributes except.....
(a) matches
(b) js
(c) css
(d) host
Ans: d
Explanation: Content Scripts Guide
The code snippets below were taken from a content script and a web page script respectively.
let x = 10;
let x = 20;
What would be the value of x in the web page script after injecting the content script in the web page?
(a) 10
(b) 30
(c) 20
(d) 5
Ans: c
Explanation: Content scripts execute in an isolated world.
Content scripts can access the following APIs except:
(a) i18n
(b) tabs
(c) storage
(d) runtime

Ans: b
Explanation: Besides the Standard Javascript API, content scripts can also access i18n, storage, runtime(though not fully).

// Content Script

// Can access the Standard Javascript API.
let button  = document.getElementByTagsName()[0];
button.addEventListener('click', function(e) {
    let indexPageUrl = getIndexPageUrl();
    redirectTo(url);
}); // End click

function getIndexPageUrl() {
    return chrome.runtime.getUrl('index.html');
}

function redirectTo(url) {
    document.location.href = url; 
}

function storeUrl(url) {
    let urlObj = {"url": url};
    // Can access the storage API
    chrome.storage.local.set(urlObj);
}

As of manifest version 3, the browserAction and PageAction APIs have been consolidated into ......?
(a) pageActions
(b) action
(c) browserAndPageActions

Ans: b
Explanation:

// Manifest version 2
{
      "manifest_version": 2,
      "name": "My extension",
      "version": "1.0.0"
      "browser_action": {
          "default_icon": {                // optional
              "16": "images/icon16.png",     // optional
              "24": "images/icon24.png",     // optional
              "32": "images/icon32.png"      // optional
          },
      }
}

// Manifest version 3
{
      "manifest_version": 3,
      "name": "My extension",
      "version": "1.0.0"
      "action": {
          "default_icon": {                // optional
              "16": "images/icon16.png",     // optional
              "24": "images/icon24.png",     // optional
              "32": "images/icon32.png"      // optional
          },
      }
}

Manifest version 3 permits execution of remote code?
(a) True
(b) False

Ans: b
Explanation: Execution of remote code has been scrapped away in manifest version 3.

// Manifest V2

// popup.html
...
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">


// Manifest V3

// popup.html
...
<script src="./react-dom.production.min.js"></script>
<link href="./bootstrap.min.css" rel="stylesheet">
...

A content script that wants to bookmark a page has to....?
(a) Call functions in chrome.tabs API.
(b) Use the storage API to store bookmarks
(c) Communicate to the service worker through the messages API to handle the bookmarking.
(d) Declare bookmarks in the permissions array of the manifest file.

Ans: c, d
Explanation: The bookmarks permission has to be defined in permissions array in addition to the content script communication to the service worker to handle the page bookmarking.

Can popup components contain inline styles?
(a) Yes
(b) No

Ans: b
Explanation: CSS styles should only be kept in files and the linked in the popup with link tag.

<!-- popup.html -->
...

<!-- Allowed -->
<link rel="stylesheet" href="styles.css">

<!-- Forbidden -->
<style>
    h1 {
        font-size: 18px;
    }
</style>
...

<!-- Forbidden -->
<h1 style="font-size: 18px;">Popup</h1>

Manifest version 2 has persistent and non persisitent background scritps. Whcih of the following differentiates the two scripts?
(a) Persistent scripts are continously alive(running) whereas non persistent scripts can swtich between active and inactive states
(b) Persistent scripts define background.persistent = True while Non persistent scripts define background.persistent = False.
(c) Persistent scripts access more APIs than Non persistent scripts.

Ans: a, b
Explanation: You might have heard that persistent background scripts are resource intensive, well thats the reason(Always running)

// Non persistent background scripts
{
  "name": "My extension",
  ...
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  ...
}

// Persistent Scripts
{
  "name": "My extension",
  ...
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  ...
}

In accordance to manifest version 2, which of the following extensions would likely use a PageAction.
(a) Keepassxc
(b) CanvasBlocker
(c) GoogleTranslate
(d) Youtube Downloader

Ans: d
Explanation: It only downloads youtube videos (youtube.com), so it makes sense for such an extension to use a pageAction since its functionality doesnot apply to every host.

What is the local storage limit for an extension?
(a) 3mb
(b) 10mb
(c) 2mb
(d) 5mb

Ans: d

Would you use the local storage API to store usernames and passwords?
(a) Yes
(b) No

Ans: b
Explanation: This is a security risk and actually against Google's Extension best practices particulary the one pertaining to protecting user's privacy.

// From a password manager extension (I wont mention)
chrome.runtime.onInstalled.addListener(() => {
    chrome.storage.sync.set({ passwords: [] });
})

Source: storage API page

Which event fires when the HTML document has been loaded and parsed irrespective of the whether the stylesheets, images have finished loading?
(a) DOMContentLoaded
(b) Load
(c) Ready
(d) Done

Ans: a
Explanation: Read about the DOMContentLoaded event on Mozilla Web Docs

document.addEventListener('DOMContentLoaded', function(e) {
    // Can access DOM elements here because DOM has already been parsed.
});

It is advisable to remove pre existing rules before registering any rules with declarativeContent API, Why?
(a) Google says so in the documentation.
(b) Rules persist across browsing sessions.
(c) To have clean code.

Ans: b
Explanation: Due to the nature of the rules, defining another set of rules without prior clearing of pre installed might lead to undesirable actions running.

chrome.runtime.onInstalled.addListener(function(details) {
    chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
        chrome.declarativeContent.onPageChanged.addRules([rule1, rule2, ..., ruleN])
    });
});

Which of the following key combinations is allowed for use with the commands API?
(a) Ctrl + Shift + 9
(b) Ctrl + 9
(c) Alt + Shift
(d) A

Ans: b
Explanation: Suggested key combinations article states that a key should either include a Shift or Ctrl and Alt + Shift is forbidden because it compromises the AltGr key.

You could use the commands API with manifest version 1?
(a) Yes
(b) No

Ans: b
Explanation: commands API requires atleast manifest version 2.

By default, commmands have a .......... scope.
(a) Global
(b) Non global

Ans: b
Explanation: Non global commands call the respective actions only when the Google Chrome browser is focused. This is the default behaviour for the key combinations defined in the manifest file. Read more about it here.

Chrome OS is a Linux based operating system derived from the Open source Chromium OS. Can one use global commands in Chrome OS?
(a) Yes
(b) No

Ans: b
Explanation: Google explicitly states it here that Chrome OS doesnot support global commands.

Google has advised all extension developers to migrate to manifest version 3 and to further smoothen the transition, Google provided a migration guide.
How would you go about modifying the manifest files below to comply with manifest version 3.
a.

{ ... "background": { "scripts": [ "background.js" ], "persistent": false }, ... }

Ans:
{ ... "background": { "service_worker": "background.js" } ... }
Explantion: Background pages have been replaced with service workers

b.
{ ... "permissions": [ "tabs", "bookmarks", "http://www.blogger.com/", ], "optional_permissions": [ "unlimitedStorage", "*://*/*", ] ... }
Ans:
{ ... "permissions": [ "tabs", "bookmarks" ], "optional_permissions": [ "unlimitedStorage" ], "host_permissions": [ "http://www.blogger.com/", ], "optional_host_permissions": [ "*://*/*", ] ... }
Explanation: host_permmissions and optional_host_permissions should be defined sepately from the rest of the other permissions.

Manifest version 3 supports multiple background scripts?
(a) True
(b) False

Ans: b
Explanation: service_worker field takes a string not an array, so manifest version 3 doesnot support multiple background scripts but to use other scripts in the service worker, it has to be anotated as an ES6 module.

// Take note of the service_worker property, It takes a string value not an array.
{
    ...
    "manifest_version": 3,
    "background": {
        "service_worker": "background.js"
    },
    ...
}

The following code snippet was found in extension X, that is still using manifest version 2. Would you need to modify this code snippet if you were to migrate to manifest version 3.
function add(x, y) { return eval('x + y'); }

(a) Yes
(b) No

Ans: a
Explanation: Due to the security risk posed by the eval function, manifest version 3 considers strings of code passed to eval as remote code.
Further explanantion can be found in the Google Manifest Version 3 Migration Guide

How would you go about utilizing notifications in your extension?
(a) Nothing has to be done.
(b) Use a third party framework.
(c) By listing notificationsunder the extension's permissions in the manifest.
(d) The notifications API has been deprecated.

Ans: c
Explanation:

{
    ...
    permissions: [
        'notifications',
        ...
    ]
}

To add on to that, most APIs like (alarms, audio, downloads) require explicitly defined permissions in the manifest just like above.

The code snippet below is from a password manager hosted at Conaticus's Github account. What is the intention of code snippet?

chrome.webNavigation.onCompleted.addListener(({ tabId, frameId }) => {
    if (frameId !== 0) return;

    chrome.scripting.executeScript({
    target: { tabId },
    function: newPageLoad,
    });
});
...

(a) To initialize the extension
(b) To execute the newPageLoad function when the document and its resources have been completely loaded and initialized.
(c) To executes the newPageLoad script.

Ans: b
Explanation: The code snippet registers a handler function that will be called when the onCompleted event is fired and with in the handler function, newPageLoad function is called via the scripting API.

chrome.storage.local.get("realtimeBannedLinks", function (returnValue) {
let firebaseLinks = returnValue.realtimeBannedLinks;
let hostname = location.hostname;

// console.log(firebaseLinks);
// If the url is a porn site, PorNo!
if (isBannedFirebase(firebaseLinks)) {
  if (isHostnameInSafeList(hostname)) {
    return;
  } else {
    PorNo();
  }
}
...

function isBannedFirebase(linksFromFirebase) {
  // Header(s) removed so that we can find the correct period to substring to
  //  in order to collect only the domain name
  let url = window.location.href.toLowerCase();

  // fightthenewdrug was flagged...create a safeList checker method
  if (
    linksFromFirebase &&
    !url.includes("fightthenewdrug") &&
    !url.includes("github")
  ) {
    // O(n) worst case feels bad but whO(l)esome porn-checker feels good
    for (let i = 0; linksFromFirebase[i]; i++) {
      if (url.includes(linksFromFirebase[i].toLowerCase())) {
        return true; // gtfo
      }
    }
  }

  // Inconclusive
  return false;
}

Explain the logic used by the extension. Write it down somewhere before you check for the answer.
...

Ans:
Loads the banned links from local storage. Checks the current window location against the banned links and the function goes ahead to let requests for urls that have particular hostnames to pass through if they turn out to be blocked, otherwise block the request.

Conclusion

The intiricacies of Google Chrome Extensions revolve around the manifest file and the major prerequisite to developing Google Chrome extensions is HTML, CSS and JS.
Being updated about the changes in the APIs is also key to delivering better extensions. Keep yourself updated by reading Google Extension Docs