Chrome扩展中chrome.action.setIcon失效及CSP报错求助

开发一款低电量警告Chrome扩展（暂未实现电量相关功能），尝试通过按钮切换扩展图标（后续用于实现闪烁警告效果），但功能无法正常运行，同时出现如下报错：

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". Either the 'unsafe-inline' keyword, a hash ('sha256-mqcqEU/uq+7l/09r6PQ1PMjli3dMmm7Zm0fA+SedCWI='), or a nonce ('nonce-...') is required to enable inline execution.

相关代码 #

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/scripts/main.css">
        <script src="scripts/main.js"></script>
    </head>
    <body>
        <button id="testRED" onclick="iconRED()">RED</button>
        <button id="testGREEN">GREEN</button>
    </body>
</html>

JS

function iconRED() {
    chrome.action.setIcon.setIcon({path: "icons/iconRED.png"});
}
function iconGREEN() {
    chrome.action.setIcon.setIcon({path: "icons/iconGREEN.png"});
}

Manifest

{
    "name": "Battery Warning",
    "description": "Battery Warning",
    "version": "1.0",
    "permissions": [
      "background",
      "storage"
    ],
    "background": {
      "service_worker": "scripts/background.js"
    },
    "browser_action": {
      "default_popup": "popup.html",
      "default_title": "Battery Warning",
      "default_icon": {
        "16": "/icons/icon.png",
        "32": "/icons/icon.png",
        "48": "/icons/icon.png",
        "128": "/icons/icon.png"
      }
    },
    "manifest_version": 2,
    "icons": {
      "16": "/icons/icon.png",
      "32": "/icons/icon.png",
      "48": "/icons/icon.png",
      "128": "/icons/icon.png"
    }
  }

解决方案 #

1. 修复CSP内联脚本错误

Chrome扩展默认禁止内联脚本，需移除HTML中的onclick属性，改用JS添加事件监听器：

<button id="testRED">RED</button>
<button id="testGREEN">GREEN</button>

2. 修正API调用错误

你当前使用Manifest V2，chrome.action是Manifest V3的API，需改用chrome.browserAction，同时修复重复调用的错误：

document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('testRED').addEventListener('click', iconRED);
    document.getElementById('testGREEN').addEventListener('click', iconGREEN);
});

function iconRED() {
    chrome.browserAction.setIcon({path: "icons/iconRED.png"});
}
function iconGREEN() {
    chrome.browserAction.setIcon({path: "icons/iconGREEN.png"});
}

3. 修正HTML脚本路径错误

原HTML中<script scr="scripts/main/js"></script>存在拼写错误，需改为src="scripts/main.js"（已在上述修改中修正）。

4. 可选：升级到Manifest V3

若打算适配最新扩展标准，可修改Manifest为V3版本：

{
    "name": "Battery Warning",
    "description": "Battery Warning",
    "version": "1.0",
    "permissions": ["storage"],
    "background": {
      "service_worker": "scripts/background.js"
    },
    "action": {
      "default_popup": "popup.html",
      "default_title": "Battery Warning",
      "default_icon": {
        "16": "/icons/icon.png",
        "32": "/icons/icon.png",
        "48": "/icons/icon.png",
        "128": "/icons/icon.png"
      }
    },
    "manifest_version": 3,
    "icons": {
      "16": "/icons/icon.png",
      "32": "/icons/icon.png",
      "48": "/icons/icon.png",
      "128": "/icons/icon.png"
    }
  }

此时JS中的API调用改为chrome.action.setIcon即可。

内容的提问来源于stack exchange，提问作者TheLPro Codes