hello world of chrome extension

By 三好Daddy - April 12, 2017

chrome extension is a set of html+js+css and collect by a manifest file named manifest.json.

let's prepare hello world files.
it is too easy. all files are here
$ mkdir helloworld
$ cd helloworld
$ ls
background.js content.js icon.png manifest.json popup.html popup.js

$ cat manifest.json
{
"manifest_version":2,
"name":"Hello World",
"description":"This is a hello world chrome extension",
"version":"1.0",
"browser_action":{
    "default_icon":"icon.png",
    "default_popup":"popup.html"
},
"content_scripts":[{
    "matches":["http://*/*", "https://*/*"],
    "js":[
      "content.js"
    ]
}],
"background":{
    "scripts":[
      "background.js"
    ]
},
"permissions":[
    "activeTab"
]
}
$ cat content.js
console.log("content script of hello world extension is loaded");
$ cat background.js
console.log("this is from hello world extension background scripts");
$ cat content.js
console.log("content script of hello world extension is loaded");
$ cat popup.html
<!doctype html>
<html>
<head>
    <title>Hello World</title>
    <script src="popup.js"></script>
</head>
<body>
    <h1>Hello World, it is a chrome extension</h1>
</body>
</html>
$ cat popup.js
console.log("hello world, it is a chrome extension");

And one icon png file. you can prepare a simple one, it is 16x16 size.