{"flag":true,"single":true,"pageTitle":"Basic Extension, Content Scripts,","post":{"id":263,"user_id":"1","slug":"basic-extension-ocr6","title":"Basic Extension, Content Scripts,","body":"

1. create a new file in directory called manifest.json<\/strong><\/p>\r\n

{\r\n  \"name\": \"Hello Extensions\",\r\n  \"description\": \"Base Level Extension\",\r\n  \"version\": \"1.0\",\r\n  \"manifest_version\": 3,\r\n  \"action\": {\r\n    \"default_popup\": \"hello.html\",\r\n    \"default_icon\": \"icon.png\"\r\n  }\r\n}<\/code><\/pre>\r\n
2. get icon.png<\/strong> from https:\/\/developer.chrome.com\/static\/docs\/extensions\/get-started\/tutorial\/hello-world\/image\/icon.png<\/a>
<\/strong><\/p>\r\n
3. create hello.html<\/strong> file in same directory<\/p>\r\n
<html>\r\n  <body>\r\n    <h1>Hello Extensions<\/h1>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\r\n
4. Load an unpacked extension <\/strong>
type chrome:\/\/extensions<\/a> in url and enable devloper option<\/p>\r\n
5.
Click the Load unpacked button and select the extension directory.

<\/p>\r\n
ICONS USAGE:<\/strong> Edit your manifest.json <\/p>\r\n
{\r\n  \"icons\": {\r\n    \"16\": \"images\/icon-16.png\",\r\n    \"32\": \"images\/icon-32.png\",\r\n    \"48\": \"images\/icon-48.png\",\r\n    \"128\": \"images\/icon-128.png\"\r\n  }\r\n}<\/code><\/pre>\r\n
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.<\/p>\r\n
 <\/p>\r\n
 <\/p>\r\n
Notes:<\/p>\r\n
    \r\n
  • There are many ways to structure<\/strong> an extension project; however, the only prerequisite is to place the manifest.json file in the extension's root directory<\/strong><\/li>\r\n
  • Any modification in manifest.json, Service worker, Content scripts <\/strong>files, you need to reload the extention else no need<\/li>\r\n
  • you can add any js code in html pages or design<\/li>\r\n
  • \"manifest_version\", \"name\", and \"version\"<\/strong> only required in manifest.json<\/li>\r\n<\/ul>\r\n
     <\/p>\r\n
    Run scripts on every page using Content Scripts<\/h1>\r\n<\/colgroup>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
    Feature    <\/strong><\/td>\r\nContent Scripts<\/strong><\/td>\r\nScripts in Popup<\/strong><\/td>\r\n<\/tr>\r\n
    Environment    <\/strong><\/td>\r\nWebpage context<\/td>\r\nPopup window (extension UI)<\/td>\r\n<\/tr>\r\n
    Access to DOM<\/strong><\/td>\r\nFull access to the webpage DOM<\/td>\r\nOnly the popup DOM<\/td>\r\n<\/tr>\r\n
    Access to Extension APIs  <\/strong><\/td>\r\nLimited (via message passing)<\/td>\r\nFull access directly<\/td>\r\n<\/tr>\r\n
    Primary Use<\/strong><\/td>\r\nInteracting with or modifying web pages<\/td>\r\nManaging extension UI and controls<\/td>\r\n<\/tr>\r\n
    Communication<\/strong><\/td>\r\nRequires messaging to background\/popup scripts<\/td>\r\nCan communicate with background\/content scripts<\/td>\r\n<\/tr>\r\n
    Trigger    <\/strong><\/td>\r\nRuns automatically based on manifest.json matches<\/td>\r\nRuns when the popup is opened by the user<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
    To use content Scripts<\/p>\r\n
    1. add scripts inside manifest.json<\/p>\r\n
    {\r\n  \"name\": \"Hello Extensions\",\r\n  \"version\": \"1.0\",\r\n  \"manifest_version\": 3,\r\n  \"content_scripts\": [\r\n    {\r\n      \"js\": [\"scripts\/content.js\"],\r\n      \"matches\": [\r\n        \"https:\/\/developer.chrome.com\/docs\/extensions\/*\",\r\n        \"https:\/\/developer.chrome.com\/docs\/webstore\/*\"\r\n      ]\r\n    }\r\n  ]\r\n}\r\n<\/code><\/pre>\r\n
    content.js will be executed on only above give matches <\/p>\r\n
    2. Add code inside content.js<\/p>\r\n
    const article = document.querySelector(\"article\");\r\n\r\nif (article) {\r\n  const text = article.textContent;\r\n  const wordMatchRegExp = \/[^\\s]+\/g; \/\/ Regular expression\r\n  const words = text.matchAll(wordMatchRegExp);\r\n  \/\/ matchAll returns an iterator, convert to array to get word count\r\n  const wordCount = [...words].length;\r\n  const readingTime = Math.round(wordCount \/ 200);\r\n  const badge = document.createElement(\"p\");\r\n  \/\/ Use the same styling as the publish information in an article's header\r\n  badge.classList.add(\"color-secondary-text\", \"type--caption\");\r\n  badge.textContent = `?????? ${readingTime} min read`;\r\n\r\n  \/\/ Support for API reference docs\r\n  const heading = article.querySelector(\"h1\");\r\n  \/\/ Support for article docs with date\r\n  const date = article.querySelector(\"time\")?.parentNode;\r\n\r\n  (date ?? heading).insertAdjacentElement(\"afterend\", badge);\r\n}<\/code><\/pre>\r\n
    https:\/\/developer.chrome.com\/docs\/extensions\/develop\/concepts\/content-scripts
           
         
            
            
       <\/p>\r\n
     <\/p>","category_id":"35","is_private":"0","created_at":"2025-01-01T12:55:14.000000Z","updated_at":"2025-01-01T13:48:45.000000Z","category":{"id":35,"user_id":"1","name":"ChromeExtention","slug":"chromeextention-b15c","parent_id":"12","created_at":"2025-01-01T12:42:04.000000Z","updated_at":"2025-01-01T12:42:04.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"1. create a new file in directory called manifest.json {   \"name\": \"Hello Extensions\",   \"description\": \"Base Level Extension\",   \"version\": - Basic Extension, Content Scripts, (Updated: January 1, 2025) - Read more about Basic Extension, Content Scripts, at my programming site [SITE]","categories":[]}