[FE] Chrome Extension 五步曲
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 script 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 field.
{ "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（options.html）
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", }
Chrome extension：https://developer.chrome.com/extensions/getstarted
Firefox extension：https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions
