浏览器插件入门案例：Hello World

参考

开发范例：从Hello World入门

v3翻译版本

Manifest文件

每一个扩展、可安装的WebApp、皮肤，都有一个JSON格式的manifest文件，叫manifest.json，里面提供了重要的信息 。

字段说明

下面的JSON示例了manifest支持的字段，每个字段都有连接指向专有的说明。必须的字段只有：name和version。

{
// 必须的字段
  "name": "My Extension",
  "version": "versionString",
  "manifest_version": 3,
  // 建议提供的字段
  "description": "A plain text description",
  "icons": { ... },
  "default_locale": "en",
  "action": {...},
  "theme": {...},
  "app": {...},
  // 根据需要提供
  "background": {...},
  "chrome_url_overrides": {...},
  "content_scripts": [...],
  "content_security_policy": "policyString",
  "file_browser_handlers": [...],
  "homepage_url": "http://path/to/homepage",
  "incognito": "spanning" or "split",
  "intents": {...}
  "key": "publicKey",
  "minimum_chrome_version": "versionString",
  "nacl_modules": [...],
  "offline_enabled": true,
  "omnibox": { "keyword": "aString" },
  "options_page": "aFile.html",
  "permissions": [...],
  "plugins": [...],
  "requirements": {...},
  "update_url": "http://path/to/updateInfo.xml",
  "web_accessible_resources": [...]
}  

name
扩展的名称

version
扩展的版本，扩展的版本用一个到四个的数字表示，中间用点隔开。跟大部分的版本要求一致
自动升级系统将比较版本来确定一个已经安装的扩展是否需要升级。如果一个发布的扩展有一个更新的版本字符串，比一个安装的扩展，这个扩展将自动升级。

manifest_version
用整数表示manifest文件自身格式的版本号。现在要求版本为3，版本2将在2023年废弃，新开发的插件已经不能使用2

"manifest_version": 3

description
扩展的描述

icons
个或者多个图标来表示扩展，app，和皮肤。你通常可以提供一个128x128的图标，这个图标将在webstore安装时候使用。扩展需要一个48x48的图标，扩展管理页面需要这个图标。同时，你还可以提供给一个16x16的图标作为扩页面的fa网页图标 。
图标要求是png格式，因为png格式是对透明支持最好的

"icons": 
  { 
    "16": "icon16.png",             
    "48": "icon48.png",            
    "128": "icon128.png" 
  }, 

default_locale

默认语言，中文应该是cn，英文是en

"default_locale": "en",

theme
扩展的主题，后面学习到了再说

permissions
扩展或app将使用到的权限。每个权限是一列已知字符串列表中的一个，例如：

"permissions": 
[    
	"tabs",    
	"bookmarks",    
	"http://www.blogger.com/",    
	"http://*.google.com/",    
	"unlimitedStorage"  
], 

权限	描述
match pattern	指定HOST权限。如果扩展希望与页面上运行的代码交互，则需要。许多扩展功能，如跨源XMLHttp请求、以编程方式注入的内容脚本和Cookie API，都需要主机权限。有关语法的详细信息，请参见匹配模式。
background	后台权限，只要浏览器运行，扩展也会运行
bookmarks	如果扩展使用chrome，则需要。书签模块。
“chrome://favicon/”	没太看懂翻译，具体内容见：权限
contextMenus	如果扩展使用chrome，则需要。上下文菜单模块。
cookies	如果扩展使用chrome，则需要。cookies模块。
experimental	如果扩展使用任何chrome，则需要。实验。*API。
geolocation	允许扩展使用建议的HTML5地理定位API，而无需提示用户许可。
history	如果扩展使用chrome，则需要。历史模块。
idle	如果扩展使用chrome，则需要。空闲模块。
management	如果扩展使用chrome，则需要。管理模块。
notifications	允许扩展使用建议的HTML5通知API，而无需调用权限方法（如检查权限）。有关详细信息，请参阅桌面通知。
tabs	如果扩展使用chrome，则需要。标签或windows模块。
unlimitedStorage	为存储HTML5客户端数据（如数据库和本地存储文件）提供无限配额。没有此权限，扩展限制为5 MB的本地存储。注意：此权限仅适用于Web SQL数据库和应用程序缓存

actions
这样的Google Chrome扩展可以适用于任何页面。图标往往位于浏览器地址栏外右侧。点击图标将弹出窗口。

"action": {
  //指定点击图标，打开的页面
  "default_popup": "hello.html",
  //指定显示的图标
  "default_icon": "hello_extensions.png"
}

现在 manifest_version 3版本只有 action 了，原来的 browser_action 和 page_action 已经废弃

其它属性暂时用不到，后面用到了，再具体学习。

Hello World 案例

参考：谷歌(Chrome)浏览器插件开发教程

• 创建一个目录，用来放扩展的代码和资源
• 创建manifest.json，内容如下

{
    "name": "Hello World",
    "description": "Hello world Extension",
    "version": "1.0",
    "manifest_version": 3,
    "action": {
        "default_popup": "hello.html",
        "default_icon": "hello_extensions.png"
    },
    "commands": {
        "_execute_browser_action": {
            "suggested_key": {
                "default": "Ctrl+Shift+F",
                "mac": "MacCtrl+Shift+F"
            },
            "description": "Opens hello.html"
        }
    }
}

• 在该目录下创建hello.html 和引入图标文件
• 在浏览器里加载，我这里用的是edge浏览器
  

打包

成功之后会生成下面两个文件

第一个就是我们熟悉的扩展文件，第二个文件打开看了一下应该是密钥之类的东西

打包后的扩展文件直接在浏览器的扩展界面拖进来即可加载