ChromeExtension - Yash-777/SeleniumDriverAutomation GitHub Wiki

Chrome Extension Framework

A browser extension is a plug-in that extends the functionality of a web browser with additional features, modify web pages, and integrate your browser with the other services you use. They are built on web technologies such as HTML, JavaScript, and CSS.

Each extension has the following files:

A manifest file
One or more HTML files (unless the extension is a theme)
Optional: One or more JavaScript files
Optional: Any other files your extension needs—for example, image files

Webstore Hosting and Updating
All extensions are distributed to users as a special ZIP file with a .crx suffix. Extensions hosted in the Chrome Web Store are uploaded through the Developer Dashboard as .zip files. The publishing process automatically converts the .zip into a .crx file.

User interfaces should be minimal and have intent.
They can range from a simple icon, such as the Google Mail Checker extension.

Image Icons Sample CDNS:

CHROME « Extension files are zipped into a single .crx package that the user downloads and installs. This means extensions do not depend on content from the web, unlike ordinary web apps.

Manifest File Format Every extension has a JSON-formatted manifest file, named manifest.json, that provides important information.

{
  "name" : "My Extension with Table of data",
  "short_name": "__MSG_app_shotname__",

  // Get the data from folder `_locales/en/messages.json`
  "default_locale": "en",
  "description": "__MSG_application_description__",

  // Invalid value for homepage url: '[]'.
  "homepage_url": "http://www.webclipdrop.io",

  // which is used in the extensions management page (chrome://extensions).
  // You can also specify a 16x16 icon to be used as the favicon for an extension's pages.
  // Icons should generally be in PNG format, because PNG has the best support for transparency.
  "icons": {
    "16": "images/github_16.png",
    "20": "images/github_20.png"
  },
  "version": "1.0",
  "manifest_version": 2,
  "minimum_chrome_version": "57",
    "update_url": "https://clients2.google.com/service/update2/crx"
  // Could not load extension icon 'images/github_20.ico'.
  "browser_action": {
    "default_icon": {
      "16": "images/github_16.png",
      "20": "images/github_20.png"
    },
    "default_title": "Toggle Text for chrome Extension",
    "default_popup" : "src/mypopup.html"
  },
  // Must specify one of background.page or background.scripts to use background.persistent.
  // The background.page and background.scripts properties cannot be used at the same time.
  // The 'webRequest' API cannot be used with event pages. "persistent": false,
  "background": {
    // "page": "html/background.html",
    "persistent": false,
    "scripts": ["background.js"]
  },
  "options_page": "html/options.html",
  "permissions": [
    "storage", "unlimitedStorage",
    "webRequest", "webRequestBlocking",
    "contextMenus", "tabs", "tts", "activeTab",
    "identity",
    "notifications",
    "downloads", "\u003Call_urls>",
    "<all_urls>", "http://*/", "https://*/"
  ],
  // web_accessible_resources: Resources inside of packages using manifest_version 2 or above are blocked by default, 
  // and must be 'whitelisted' for use via this property. When an extension uses the 'webRequest' or 'declarativeWebRequest' 
  // APIs to redirect a public resource request to a resource that is not web accessible, such request is also blocked.
  "web_accessible_resources": [
    "src/*",
    "bower_components/*",
    "images/*"
  ],
  // Content scripts are files that run in the context of web pages. By using the standard Document Object Model (DOM),
  // they are able to read details of the web pages the browser visits, make changes to them and pass information to their parent extension.

  // Invalid value for 'content_scripts[0].run_at'. Use any one form "document_start" (or) "document_end"
  // Could not load javascript 'scripts/lib/jquery.min.js' for content script. Make Sure all are available
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*", "\u003Call_urls>"],
      "js": [ "src/jquery.js", "src/popup.js", "lib/utils.js", "lib/xpath.js" ],
      "css": ["src/popup.css"],
      "run_at": "document_start"
    }
  ],
  // "content_security_policy": "script-src 'self'; object-src 'self'",
  "content_security_policy":
    "script-src 'self' http://localhost:9000 https://maps-staging.webclipdrop.io/ 'unsafe-eval'; object-src 'self' http://localhost:9000 https://staging.webclipdrop.io",
  "incognito": "spanning"
}

Main Extension Folder/_locales/en/messages.json locale messages as description message which is used in the extensions management page (chrome://extensions).

{
   "application_description": {
      "message": "chrome://extensions/: You can view this descriptor text over manage extension."
   },
   "app_shortname": {
      "message": "Chrome Web Store Payments"
   }
}

mypopup.html « PopUP HTML Dimensions « 800px wide x 600px high.

<!doctype html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Sample Extension</title>
      <!-- <link href="https://assets-cdn.github.com/favicon.ico" type="image/x-icon" rel="shortcut icon"> -->
      <link href="popup.css" rel="stylesheet" type="text/css" media="all">
   </head>
   <body>
    <!-- ... -->
      <script type="text/javascript" src="popup.js"></script>
   </body>
</html>

popup.js

(function loadJSFileTest() { console.log("File Loaded Successfully."); })();

popup.css if you use this css file name in content_scripts. Below CSS will affect the Web-Application you are loading to avoid this remove this file from content_scripts « "css": ["src/popup.css"]

@CHARSET "ISO-8859-1";
body {
	height : 250px;
	width : 500px;
	background: #fff;
}

Web APIs
In addition to the chrome.* APIs, extensions can use all the APIs that the browser provides to web pages and apps. If the browser doesn't support an API you want to use, you can bundle additional API libraries into your extension.

Here's a sampling of the APIs that extensions can use:
Standard JavaScript APIs « Chrome provides extensions with many special-purpose APIs like chrome.runtime and chrome.alarms to use with permissions key.
XMLHttpRequest « Use XMLHttpRequest to request data from one or more servers. The permissions field of the manifest specifies which hosts the extension can send requests to. < br /> V8 APIs, such as JSON « Because JSON is in V8, you don't need to include a JSON library to use JSON functions.
APIs in bundled libraries « If you want to use a library that the browser doesn't provide (for example, jQuery), you can bundle that library's JavaScript files with your extension. Bundled libraries work in extensions just as they do in other web pages.
HTML5 and other emerging APIs « Google Chrome supports HTML5 features, along with other emerging APIs. Here are some of the APIs you can use:

audio, application cache, canvas, geolocation, local storage ..,

A content script is a part of your extension that runs in the context of a particular web page (as opposed to background scripts which are part of the extension, or scripts which are part of the web site itself, such as those loaded using the <script> element).

Background scripts can access all the WebExtension JavaScript APIs, but they can't directly access the content of web pages. So if your extension needs to do that, you need content scripts.

Chrome Extension background scripts aren't being loaded First you can't view the background page like a regular html page. The only way is to view its contents with the Chrome Developer Tools. just click on generated_background_page.html in the extensions section of your browser.

Second use the `console.log()` statement to log messages.

chrome-extension://<Extension ID>
"background": {
 "persistent": true,
 "scripts": ["background.js", "background_scripts/script_files.js"]
}

[Background Console]_generated_background_page.html

"browser_action": {
 "default_icon": {
   "16": "images/github_16.png",
   "20": "images/github_20.png"
 },
 "default_title": "table",
 "default_popup" : "src/mypopup.html"
}

[Extension PopUP Console]src/mypopup.html
[Appliocation]Console

extensions::extension:106 Uncaught Error: sendRequest and onRequest are obsolete. Please use sendMessage and onMessage instead.
at Event.extension.onRequest.addListener (extensions::extension:106)
at background.js:14

chrome-extension:// to see list of used extension by the user.
C:\Users\{user}\AppData\Local\Google\Chrome\User Data\Default\Extensions
c:\Program Files (x86)\Google\Chrome\Application\<VERSION>\Extensions\
chrome://version/ to get browser proile.

Referenced Extensions: Selenium IDE

Faced Issues:

Uncaught TypeError: Cannot read property 'onClicked' of undefined However, content scripts have some limitations. They cannot:
« Use chrome.* APIs (except for parts of chrome.extension)
« Use variables or functions defined by their extension's pages
« Use variables or functions defined by web pages or by other content scripts

Solution « Put it on the background page instead. Manage Events with Background Scripts

There were warnings when trying to install this extension:
« Ignored insecure CSP value "object-src" in directive 'script-src'.
« CSP directive 'object-src' must be specified (either explicitly, or implicitly via 'default-src') and must whitelist only secure resources.

Solution « The HTTP Content-Security-Policy (CSP) connect-src directive restricts the URLs which can be loaded using script interfaces. The APIs that are restricted are:
ping, Fetch, XMLHttpRequest, WebSocket, and EventSource.

In Chrome extension js file if you are using to communicate with you site then White list those URL's in CSP.

  "content_security_policy": "script-src 'self' https://yash.test.com:8443 'unsafe-eval'; object-src 'self' https://yash.test.com:8443"

ChromeExtension - Yash-777/SeleniumDriverAutomation GitHub Wiki

Chrome Extension Framework

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️