在 Chrome 扩展的 manifest.json 里，action 字段的结构在 Manifest V3 中不能使用script

2025-05-03 01:13:49 521 分享链接开发笔记

这样写在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 属性。

在 Chrome 扩展的 manifest.json 里，action 字段的结构在 Manifest V3 中不能使用script

上一篇：记录main.py调用另一个python文件的直接引用函数方法

下一篇：Chrome 扩展 API 不同组件之间进行消息通信的监听与发送

在 Chrome 扩展的 manifest.json 里，action 字段的结构在 Manifest V3 中不能使用script

这样写在Manifest V3中是错误的，折腾我一晚上，做个记录！

详细分析

正确加载脚本的方法

1. 使用 background.js 注入脚本

2. 使用弹出窗口加载脚本

最近更新

1. 使用 `background.js` 注入脚本