[FE] Chrome Extension 五步曲
Posted farwish
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[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 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
以上是关于[FE] Chrome Extension 五步曲的主要内容，如果未能解决你的问题，请参考以下文章
为啥 Chrome 本身允许网站访问 chrome-extension://*？