albert's blog: [Chrome Extension] Hello World Example

2016/11/08

[Chrome Extension] Hello World Example

1. Create a manifest.json
In this manifest, I will declare a browser action, and the activeTab permission

{
  "manifest_version": 2,
  "name": "Hello World",
  "description": "My first Chrome extension",
  "version": "1.0",
  "permissions": [ "activeTab" ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "helloworld.html"
  }
}

2. Resources
Download a icon.png as an icon for this chrome extension

helloWorld.html will be rendered inside the popup window that's created in response to a user's click on the browser action.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello Page</title>
    </head>

    <body>
    Hello! It is my first Chrome extension!!!!
    </body>
</html>

3. Load the extension and test (remember to turn on developer mode)

If I would like to show a JavaScript alert message
1. Create a helloWorld.js

alert("Hello World! 測試測試");

2. Import helloWorld.js into helloWorld.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello Page</title>
        <script src="helloWorld.js"></script>
    </head>

    <body>
    Hello! It is my first Chrome extension!!!!
    </body>
</html>