在 Chrome 扩展的 manifest.json 里,action 字段的结构在 Manifest V3 中不能使用script
2025-05-03 01:13:49 186 分享链接 开发笔记
这样写在Manifest V3中是错误的,折腾我一晚上,做个记录!
{
"manifest_version": 3,
"name": "Doubao Image Downloader",
"version": "1.0",
"description": "批量下载网页上的图片",
"permissions": ["activeTab", "downloads", "scripting"],
"action": {
"default_title": "下载图片",
"script": ["popupClick.js"]
},
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["https://www.doubao.com/*"],
"js": ["content.js"],
"css": ["styles.css"]
}
]
}
在 Chrome 扩展的 manifest.json
里,action
字段的结构在 Manifest V3 中有特定的规范,而你使用的 action
里的 script
属性是不符合规范的,所以这样定义的脚本无法正常加载。
详细分析
在 Manifest V3 里,action
主要用于定义扩展图标(如浏览器工具栏上的图标)的相关属性,像图标、标题、弹出窗口等,但并没有 script
这个属性。下面是 action
字段在 Manifest V3 中的常见属性介绍:
default_icon
:指定扩展图标的图片文件。default_title
:鼠标悬停在扩展图标上时显示的提示信息。default_popup
:点击扩展图标时弹出的 HTML 文件。
正确加载脚本的方法
1. 使用 background.js
注入脚本
若你想在点击扩展图标时注入脚本,可以在 background.js
中编写相应的逻辑。
首先,确保 manifest.json
中有 background
字段,示例如下:
{
"manifest_version": 3,
"name": "Doubao Image Downloader",
"version": "1.0",
"description": "批量下载 www.doubao.com 网页上的图片",
"permissions": ["activeTab", "downloads", "scripting"],
"host_permissions": ["https://www.doubao.com/*"],
"background": {
"service_worker": "background.js"
},
"action": {
"default_title": "下载图片"
}
}
然后,在 background.js
中添加监听扩展图标点击事件的逻辑,并注入脚本:
// background.js
chrome.action.onClicked.addListener((tab) => {
chrome.scripting.executeScript({
target: { tabId: tab.id },
files: ["popupClick.js"]
}).then(() => {
console.log('脚本注入成功');
}).catch((error) => {
console.error('脚本注入失败:', error);
});
});
2. 使用弹出窗口加载脚本
如果你想在点击扩展图标时弹出一个窗口,并且在窗口中加载脚本,可以使用 default_popup
属性。
修改 manifest.json
如下:
{
"manifest_version": 3,
"name": "Doubao Image Downloader",
"version": "1.0",
"description": "批量下载 www.doubao.com 网页上的图片",
"permissions": ["activeTab", "downloads", "scripting"],
"host_permissions": ["https://www.doubao.com/*"],
"action": {
"default_title": "下载图片",
"default_popup": "popup.html"
}
}
创建 popup.html
文件,并在其中引入 popupClick.js
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Doubao Image Downloader</title>
</head>
<body>
<!-- 页面内容 -->
<script src="popupClick.js"></script>
</body>
</html>
这样,当点击扩展图标时,会弹出 popup.html
窗口,并且会加载 popupClick.js
脚本。
综上所述,你需要按照正确的方式来加载脚本,避免使用不符合规范的 action
属性。
最近更新
- 2025-07-13 16:32
- 使用OpenCV 给豆包生成的图片去除水印的命令
- 2025-07-13 15:57
- 使用FFmpeg 给豆包生成的图片去除水印的命令
- 2025-07-07 16:49
- FFmpeg 的 subtitles 滤镜 颜色编码解析
- 2025-07-07 16:41
- FFmpeg 添加黄色边框黑色自定义字体的命令说明
- 2025-07-07 15:35
- 剪映专业版的字体下载位置在哪里,剪映专业版的字体下载去哪里了?
- 2025-07-06 11:37
- 用 PYTHON 编写的一个分镜段落文本与SRT字幕合并匹配的函数实例
- 2025-07-04 18:20
- 详细列出 drawtext 滤镜在 ffmpeg7.1.1 支持的参数列表
- 2025-07-04 16:33
- windows cmd 中调用 FFmpeg 命令的注意事项
- 2025-07-04 16:18
- Windows 命令行解析复杂参数时的典型错误问题
- 2025-07-03 22:50
- 详细介绍 FFmpeg7.1.1 subtitles 滤镜 force_style 支持的参数