1. Create the manifest.json
Only three fields is needed.
{
"name": "Getting Started Example",
"version": "1.0",
"manifest_version": 2,
"description": "xx"
}
2. Add instruction (background.js)
Create and register a background.js for manifest.json to reference.
{
"name": "Getting Started Example",
"version": "1.0",
"manifest_version": 2,
"description": "xx",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"permissions": ["storage"]
}
So, what the means of "persistent" set to false ?
The only occasion to keep a background script persistently active is if the extension uses chrome.webRequest API to block or modify network requests.
The webRequest API is incompatible with non-persistent background pages.
Most APIs, must be registered under the "permissions" field in the manifest for the extension to use them.
3. Introduce a User Interface (popup.html)
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 30px;
width: 30px;
outline: none;
}
</style>
</head>
<body>
<button id="changeColor"></button>
</body>
</html>
Like the background script, this file needs to be designated as a popup in the manifest under page_action.
Toolbar icon is in the default_icons under page_action.
Management page icon is in the icons.
{
"name": "Getting Started Example",
"version": "1.0",
"manifest_version": 2,
"description": "xx",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"permissions": ["storage"],
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
}
4. Logic layer (popup.js)
<!DOCTYPE html>
<html>
...
<body>
<button id="changeColor"></button>
<script src="popup.js"></script>
</body>
</html>
5. Give Users Options
Start by creating a file in the directory called options.html
Create a file called options.js in the extension directory with the logic.
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 30px;
width: 30px;
outline: none;
margin: 10px;
}
</style>
</head>
<body>
<div id="buttonDiv">
</div>
<div>
<p>Choose a different background color!</p>
</div>
</body>
<script src="options.js"></script>
</html>
Then register the options page in the manifest,
{
"name": "Getting Started Example",
...
"options_page": "options.html",
}
Ref：https://developer.chrome.com/extensions/getstarted
Link：https://www.cnblogs.com/farwish/p/12093314.html
原文地址：https://www.cnblogs.com/farwish/p/12093314.html