Google Chrome-extension: Developing chrome extension from scratch and the different types of scripts available that helps in developing extensions.

Hello There!

This article is for developers who wish to start with the development of chrome extension and understand the different types of scripts that are available for developing extensions.

manifest.json: For any Chrome extension, that has been created the first thing that is necessary is manifest.json. This is the file that has all the configuration, properties and information about the chrome extension.

{
  // Required
  "manifest_version": 2,
  "name": "My Extension",
  "version": "versionString",
}

1. background scripts
2. pop-up scripts
3. content scripts

1. background scripts: The background script loads when chrome is launched and it is listening for events associated with the activity of using the Chrome browser as a piece of software itself. It listens to the browser actions, context menu actions. The following configuration needs to be added in manifest.json

"background": {
     "scripts": [
        "background.js"
     ]
},
     "permissions": [
         "contextMenus"
]

2. pop-up scripts: A pop-up is a page that you can launch that is essentially like an overlay of what’s in the browser at a certain moment and can launch it using a browser action by clicking the button. The following configuration need to be added in manifest.json

“browser_action”: {
    “default_popup”: “index.html”,
    “default_title”: “Lookup a meaning!!”
}

3. content scripts: The content script is the javascript code when executes when the page loads. Once the page is loaded and finished, DOM can be manipualted. The following configuration needs to be added in manifest.json

 "content_scripts": [{
    "matches": [
       "<all_urls>"
],
  "js": ["content.js"]
}
]

matches: If you want to run your chrome extension on the specified URLs. In this case it will run on all urls.

The scope for all the above mentioned scripts are separate from each other. And hence to send the data from content script to background script listener need to be added.

//content.js
function wordHighlighted() {
let highlightedWord = window.getSelection().toString();
console.log("highlightedWord ", highlightedWord);
if (highlightedWord && highlightedWord.length > 0) {
chrome.runtime.sendMessage({ word: highlightedWord })
}
}
window.addEventListener('mouseup', wordHighlighted);
//background.js
function receiver(request, sender, sendResponse) {
console.log(request);
}
chrome.runtime.onMessage.addListener(receiver);

To add chrome extension to chrome browser:

1. Open chrome://extensions/
2. Enable Developer Mode
3. Load unpacked the folder where you have kept all the files.
4. If no error is there you can see the extension added, along with the option to a=inspect background script.

Below is the git hub link to the chrome extension, whose job is to display the meaning for the word selected on the web page by clicking on the extension.
https://github.com/Hakunamatata007/Chrome--extension