Chrome extension - Hello World

In the work, Google browser is often used, and its expansion is very rich. Due to the work needs, I tried to develop some small extensions to help improve the work efficiency. Here is a simple sharing of Google's extended knowledge, and write a Hello World!

Chrome extension can be divided into extension and application. The boundary between them is not very clear, mainly due to the differences in permissions.

The startup entry of Chrome extension can be in the browser's tool class and address bar. After the user clicks, the extension can be activated for the next operation, or it can run silently in the background without any icon at all. Next, let me write a Hello World. After clicking the extension icon, Hello World will pop up!

First, create a my first Chrome extension folder, and create a new file named manifest.json in the folder. The code is as follows:

{
    "manifest_version": 2,//Fixed value 2
    "name": "Hello World",
    "version": "1.0",
    "description": "My first Chrome extend",
    "icons": {
        "16": "images/icon16.png",
        "48": "images/icon48.png"
    },
    "browser_action": {//Tool functions
        "default_icon": {
            "19": "images/icon19.png",
            "38": "images/icon38.png"
        },
        "default_title": "My first Chrome extend",
        "default_popup": "popup.html"//The POP-up page when clicking, POP, is not a Tab opened by the browser
    }
}

Let me take a brief look at the properties in the above code. |Property | meaning | remarks| |---|---|---| |Name| extension name|| |Version| extended version|| |Description| extension description|| |icons| expand icon file resource location|| |Browser action specifies that the extended icon is placed in the toolbar||

Properties of browser action |Property | meaning | remarks| |---|---|---| |Default? Icon? Defines the location of the icon file|| |Default | Title | defines the prompt text when hovering over the icon|| |Defualt? Pop? Defines the page that pops up when you click an icon||

Next, let's look at the contents of pop.html

<html>
<head>
<style>
* {
    margin: 0;
    padding: 0;
}

body {
    width: 200px;
    height: 100px;
}

div {
    line-height: 100px;
    font-size: 42px;
    text-align: center;
}
</style>
</head>
<body>
<div id="content_div"></div>
<script src="js/hello_world.js"></script>
</body>
</html>

Note: js script cannot be written directly in the page, so it needs to be encapsulated and introduced by itself.

setInterval(() => {
    var content_div = document.getElementById('content_div');
    content_div.innerHTML = content_div.innerHTML + "<br/>" + "Hello World";

}, 1000);

The function of js is to add a line of Hello World to the div every second

So far, the contents of the folder are as follows:

Next, we will add the developed extension to Chrome. Click in the following order:

Open the extender interface (or enter directly chrome://extensions ), check the developer mode in the upper right corner, click load the decompressed extension program, select the folder where the extension is located, and you can see our extension in the browser tool class.

After clicking the extension icon, you can see the interface we wrote.

If there is a problem, we can open the console for code debugging as usual.

Chrome extension contains a file of manifest.json, which defines the extension information. Chrome reads this file to parse the extension. It is the entrance and indispensable part of the whole extension.

For document format, please refer to the official website: https://developer.chrome.com/extensions/manifest The JSON properties are as follows:

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

  // Recommended
  "default_locale": "en",
  "description": "A plain text description",
  "icons": {...},

  // Pick one (or none)
  "browser_action": {...},
  "page_action": {...},

  // Optional
  "action": ...,
  "author": ...,
  "automation": ...,
  "background": {
    // Recommended
    "persistent": false,
    // Optional
    "service_worker":
  },
  "chrome_settings_overrides": {...},
  "chrome_ui_overrides": {
    "bookmarks_ui": {
      "remove_bookmark_shortcut": true,
      "remove_button": true
    }
  },
  "chrome_url_overrides": {...},
  "commands": {...},
  "content_capabilities": ...,
  "content_scripts": [{...}],
  "content_security_policy": "policyString",
  "converted_from_user_script": ...,
  "current_locale": ...,
  "declarative_net_request": ...,
  "devtools_page": "devtools.html",
  "event_rules": [{...}],
  "externally_connectable": {
    "matches": ["*://*.example.com/*"]
  },
  "file_browser_handlers": [...],
  "file_system_provider_capabilities": {
    "configurable": true,
    "multiple_mounts": true,
    "source": "network"
  },
  "homepage_url": "http://path/to/homepage",
  "import": [{"id": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}],
  "incognito": "spanning, split, or not_allowed",
  "input_components": ...,
  "key": "publicKey",
  "minimum_chrome_version": "versionString",
  "nacl_modules": [...],
  "oauth2": ...,
  "offline_enabled": true,
  "omnibox": {
    "keyword": "aString"
  },
  "optional_permissions": ["tabs"],
  "options_page": "options.html",
  "options_ui": {
    "chrome_style": true,
    "page": "options.html"
  },
  "permissions": ["tabs"],
  "platforms": ...,
  "replacement_web_app": ...,
  "requirements": {...},
  "sandbox": [...],
  "short_name": "Short Name",
  "signature": ...,
  "spellcheck": ...,
  "storage": {
    "managed_schema": "schema.json"
  },
  "system_indicator": ...,
  "tts_engine": {...},
  "update_url": "http://path/to/updateInfo.xml",
  "version_name": "aString",
  "web_accessible_resources": [...]
}

At this point, the first extension is over. Next time will bring the use of extensions to manipulate browser content!

Welcome to my official account: Zhang Hengqiang's notes on his study.

Tags: Programming JSON Google network xml

Posted on Sat, 07 Mar 2020 06:06:32 -0500 by zeropaid