谷歌浏览器插件从Manifest Version2更新到Manifest Version3

谷歌浏览器插件从Manifest Version2更新到Manifest Version3

自制的浏览器插件需要更新至V3时,要更新配置文件manifest.json。
浏览器插件的 manifest.json 文件是一个重要的配置文件,它定义了插件的名称、版本、描述、权限、图标以及其他设置。将插件从旧版本清单规范(Manifest Version 2)更新到新清单规范(Manifest Version 3)需要进行一些必要的更改和调整。
主要有三处需要改变。

manifest_version 字段

首先,您需要将清单文件的 manifest_version 从原本的2改为 3,以指定您正在使用新的清单规范。

{
  "manifest_version": 3,
}

事件页background.js

在 Manifest Version 3 中,事件页(background page)的概念有所不同。您可以使用 service_worker 字段来定义一个 Service Worker,用于处理事件和后台任务。
将旧版本的"scripts"改为"service_worker"。

{
  "background": {
    "service_worker": "background.js"
  },
}

使用 action 字段

Manifest Version 3 引入了 action 字段,用于定义扩展程序的用户界面和交互行为。这可以取代旧版本中的 browser_action 和 page_action 字段。

{
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
}

示例图

示例图

开发一个谷歌浏览器扩展(Chrome Extension)需要遵循一定的步骤和规则,特别是从"manifest_version": 2升级到"manifest_version": 3时,有一些重要的变化需要了解。以下是一个基本的指南,帮助你开始开发"manifest_version": 3谷歌浏览器扩展: ### 1. 创建项目目录 首先,创建一个新的目录来存放你的扩展文件。例如,创建一个名为`my-chrome-extension`的目录。 ### 2. 创建`manifest.json`文件 在项目目录中创建一个名为`manifest.json`的文件,并添加以下内容: ```json { "manifest_version": 3, "name": "My Chrome Extension", "version": "1.0", "description": "A simple Chrome extension example.", "permissions": [ "storage", "tabs" ], "action": { "default_popup": "popup.html", "default_icon": { "16": "images/icon16.png", "48": "images/icon48.png", "128": "images/icon128.png" } }, "background": { "service_worker": "background.js" }, "content_scripts": [ { "matches": ["https://*.google.com/*"], "js": ["contentScript.js"] } ] } ``` ### 3. 创建弹出页面 在项目目录中创建一个名为`popup.html`的文件,并添加一些简单的HTML代码: ```html <!DOCTYPE html> <html> <head> <title>My Chrome Extension</title> <style> body { font-family: Arial, sans-serif; } button { padding: 10px; font-size: 16px; } </style> </head> <body> <h1>Hello, Chrome!</h1> <button id="myButton">Click Me</button> <script src="popup.js"></script> </body> </html> ``` ### 4. 创建弹出页面脚本 在项目目录中创建一个名为`popup.js`的文件,并添加以下内容: ```javascript document.getElementById(&#39;myButton&#39;).addEventListener(&#39;click&#39;, () => { alert(&#39;Button clicked!&#39;); }); ``` ### 5. 创建后台脚本 在项目目录中创建一个名为`background.js`的文件,并添加以下内容: ```javascript chrome.runtime.onInstalled.addListener(() => { console.log(&#39;Extension installed!&#39;); }); ``` ### 6. 创建内容脚本 在项目目录中创建一个名为`contentScript.js`的文件,并添加以下内容: ```javascript console.log(&#39;Content script loaded!&#39;); ``` ### 7. 添加图标 在项目目录中创建一个名为`images`的文件夹,并在其中添加你的扩展图标文件(`icon16.png`, `icon48.png`, `icon128.png`)。 ### 8. 加载扩展 1. 打开谷歌浏览器2. 进入`chrome://extensions/`页面。 3. 打开“开发者模式”。 4. 点击“加载已解压的扩展程序”按钮。 5. 选择你的项目目录。 ### 9. 测试扩展 1. 点击浏览器工具栏中的扩展图标。 2. 你应该会看到一个弹出页面,显示“Hello, Chrome!”和一个按钮。 3. 点击按钮,应该会弹出一个提示框。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值