Chrome extension: How To

Translation of the Chromium site textbook, which contains the Chrome development version. The original document is licensed under Creative Common. This translation can be freely copied to paper. Do not post it on the site, but post a link on this page.

To begin with

Create a folder on your computer to hold the code. For simplicity, assume the folder is in c :\myextension, but it can be anywhere.

In this folder, create a text file named manifest.json and put the following code in it:

  { 
   "format_version": 1, 
   "id": "00123456789ABCDEF0123456789ABCDEF0123456", 
   "version": "1.0", 
   "name": "Ma Première Extension", 
   "description": "La première extension que j'ai faite." 
   } 

Here are some explanations of what these keys represent:

• Format_version (required): Specifies the version of the manifest format to use. At the moment, there is only one version, and this is version 1.
• ID (required) - Unique identifier of the extension. Currently, it can be any number of 40 hexadecimal digits, but in the future it will be the SHA-1 hash of the public key extension.
• Version (required) - extension version. You can use any number separated by dots as version numbers.
• Name (required) - the name read by the person for the extension.
• Description (optional) - Describes the extension .

Create a text file named hello_world.html in the folder:

    Bonjour, le Monde! 

Find the Chrome shortcut in the Windows interface (icon properties) and add the following options:

    chrome.exe - enable-extensions - load-extension = "c:\myextension" 

Launch Chrome and download this page:

chrome.exe --enable-extensions --load-extension="c:\myextension"

You should see the page you just created. Note that you can edit the page while Chrome is running, press reboot to see the changes.

Now download:

chrome-ui://extensions/

This page lists all installed extensions. It also shows all errors that have occurred in the extension system since it was started.

Notes

• --- extensions are only separated during system development and will be removed later .

Contained scenarios

Extensions can include "content scripts," which are JavaScript files executed in the context of web pages loaded by a browser. This is essentially similar to the Greasemonkey firefox extension.

To add text content, save it in the manifest as follows:

{
   "format_version": 1, 
   "id": "00123456789ABCDEF0123456789ABCDEF0123456", 
   "version": "1.0", 
   "name": "Ma Première Extension", 
   "description": "La première extension que j'ai faite." 
   "content_scripts": [ 
     { 
       "matches": "[* https://www.google.com/"], 
       "js": [ "foo.js"] 
     } 
   ] 
}

Then create a file in your directory called foo.js with the following code:

   document.images [0]. src = "http://bit.ly/1293Af"; 
   document.images [0]. height = ""; 

Run Chrome again with options and go to https://www.google.com. You should see your image instead of the Google logo.

Notes

• You can also access resources within the extension along their full path, for example, "chrome-extension ://00123456789ABCDEF0123456789ABCDEF0123456/foo.gif ."
• Content scripts run in an environment other than the web page environment. If a web page defines global variables, the script cannot "see" them by default. This is done specifically to avoid conflicts with the page. If the content script should interact with the global scope of the page, it can access it using the contentWindows global variable.
• The content script can be run at the beginning or end of the document. By default, this is at the end, but you can tell Chrome to start it at the beginning by adding the line: "run_at": "document-start" to enter the script .

Prohibited code

Starting with version 18 of Chrome, to stop vulnerabilities in extensions and knowing that a browser extension can be detected on a web page, some types of codes are prohibited:

• HTTP code as page load.
• Creating dynamic code.
• Frenetic, except for some of them where it matters. It needs to be replaced by JSON.parse .
• Nested <script> </script> code in the extension .
• Downloading files or plugins is limited.

You can detect the presence of an extension by malicious sites using manifest_version 2.

NPAPI Plugins

Chrome extensions can contain binary components in the form of NPAPI plugins. NPAPI plugins are difficult to make and explain how this is out of the subject of this document. If you have an NPAPI plugin that you want to include in the Chrome extension, create a folder in your extension (for example, "plugins"), and add this folder to your manifest like this:

   { 
   "format_version": 1, 
   "id": "00123456789ABCDEF0123456789ABCDEF0123456", 
   "version": "1.0", 
   "name": "Ma Première Extension", 
   "description": "La première extension que j'ai faite." 
   "plugins_dir": "plugins" 
  } 

Automatic installation

1. Chrome launch.
2. Click the tool menu represented by the button in the upper right corner. A drop-down menu opens.
3. Click this menu on the toolbar to open the second drop-down menu.
4. Click Extension.
5. Open Developer Mode by clicking the button on the right .
6. Click "Load unpacked extension" or "Load non packaged extension" and specify the directory containing your code.
7. The Pack extension command creates a package to add an extension to the gallery .