Developer Snippet Diary

Basic Extension, Content Scripts,

ChromeExtention Updated: January 1, 2025 Author: R GONDAL Public

1. create a new file in directory called manifest.json

{
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  }
}

2. get icon.png from https://developer.chrome.com/static/docs/extensions/get-started/tutorial/hello-world/image/icon.png

3. create hello.html file in same directory

<html>
  <body>
    <h1>Hello Extensions</h1>
  </body>
</html>

4. Load an unpacked extension 
type chrome://extensions in url and enable devloper option

5.
Click the Load unpacked button and select the extension directory.

ICONS USAGE: Edit your manifest.json 

{
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  }
}

16x16    Favicon on the extension's pages and context menu.
32x32    Windows computers often require this size.
48x48    Displays on the Extensions page.
128x128    Displays on installation and in the Chrome Web Store.

 

 

Notes:

  • There are many ways to structure an extension project; however, the only prerequisite is to place the manifest.json file in the extension's root directory
  • Any modification in manifest.json, Service worker, Content scripts files, you need to reload the extention else no need
  • you can add any js code in html pages or design
  • "manifest_version", "name", and "version" only required in manifest.json

 

Run scripts on every page using Content Scripts

Feature     Content Scripts Scripts in Popup
Environment     Webpage context Popup window (extension UI)
Access to DOM Full access to the webpage DOM Only the popup DOM
Access to Extension APIs   Limited (via message passing) Full access directly
Primary Use Interacting with or modifying web pages Managing extension UI and controls
Communication Requires messaging to background/popup scripts Can communicate with background/content scripts
Trigger     Runs automatically based on manifest.json matches Runs when the popup is opened by the user

To use content Scripts

1. add scripts inside manifest.json

{
  "name": "Hello Extensions",
  "version": "1.0",
  "manifest_version": 3,
  "content_scripts": [
    {
      "js": ["scripts/content.js"],
      "matches": [
        "https://developer.chrome.com/docs/extensions/*",
        "https://developer.chrome.com/docs/webstore/*"
      ]
    }
  ]
}

content.js will be executed on only above give matches 

2. Add code inside content.js

const article = document.querySelector("article");

if (article) {
  const text = article.textContent;
  const wordMatchRegExp = /[^\s]+/g; // Regular expression
  const words = text.matchAll(wordMatchRegExp);
  // matchAll returns an iterator, convert to array to get word count
  const wordCount = [...words].length;
  const readingTime = Math.round(wordCount / 200);
  const badge = document.createElement("p");
  // Use the same styling as the publish information in an article's header
  badge.classList.add("color-secondary-text", "type--caption");
  badge.textContent = `?????? ${readingTime} min read`;

  // Support for API reference docs
  const heading = article.querySelector("h1");
  // Support for article docs with date
  const date = article.querySelector("time")?.parentNode;

  (date ?? heading).insertAdjacentElement("afterend", badge);
}

https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts
       
     
        
        
   

 

Posted by: R GONDAL
Email: rizikmw@gmail.com