hello world of chrome extension
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.
Let's run it on chrome browser now.
1. Open chrome extensions page.
2. Enable Developer mode.
3. Click "Load unpacked extension..." button.
4. Select "helloworld" directory.
Ok. helloworld extension is enabled now.
You can see a ui icon on the right-top corner, once you click it,
a popup page is show like:
5. Click "Pack extension" button, then we can pack helloword extension.
Now a simple helloworld extension of chrome is done.
You can drag helloworld.crx to any chrome browser in chrome://extensions page.
All sources can be found in my github repo.
https://github.com/lengerrong/helloworld
❤️ Support This Blog
If this post helped you, you can support my writing with a small donation. Thank you for reading.
Comments
Post a Comment