JavaScript 或 chrome.action.setIcon 在 chrome 扩展中不起作用

Question

I was making this extension that makes a warning when the battery level is low (not added battery part yet).我正在制作这个扩展，当电池电量低时发出警告（尚未添加电池部分）。 Currently I am trying to make it so that buttons can change the icon of the extension so that later I can make it flash colors as a warning.目前我正在尝试使按钮可以更改扩展程序的图标，以便稍后我可以将其设置为 flash colors 作为警告。 I have no idea why this is not working, and it would be very nice if someone could help me.我不知道为什么这不起作用，如果有人可以帮助我，那就太好了。 I also get this error:我也收到此错误：

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: 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 scr="scripts/main/js"></script>
    </head>
    <body>
        <button id="testRED" onclick="iconRED()">RED</button>
        <button id="testGREEN">GREEN</button>
    </body>
</html>

JS: 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"
    }
  }

Answer 1

The following page on the Chrome documentation about Content-Security Policy gives a few hints about what's going on: https://developer.chrome.com/blog/csp/#inline-code-is-considered-harmful .有关内容安全策略的 Chrome 文档的以下页面提供了一些关于正在发生的事情的提示： https://developer.chrome.com/blog/csp/#inline-code-is-considered-harmful 。 Here's the relevant extract:这是相关的摘录：

This ban includes not only scripts embedded directly in script tags, but also inline event handlers and javascript: URLs.此禁令不仅包括直接嵌入在脚本标签中的脚本，还包括内联事件处理程序和 javascript: URL。 You'll need to move the content of script tags into an external file, and replace javascript: URLs and <a... onclick="[JAVASCRIPT]"> with appropriate addEventListener() calls.您需要将脚本标签的内容移动到外部文件中，并将 javascript: URLs 和 <a... onclick="[JAVASCRIPT]"> 替换为适当的 addEventListener() 调用。

You have indeed a onclick HTML attribute in the snippet you provided:您提供的代码段中确实有onclick HTML 属性：

<button id="testRED" onclick="iconRED()">RED</button>

So the alternative, would be to attach the click event listener in JavaScript instead, with something like this (when the DOM is ready):因此，另一种选择是在 JavaScript 中附加点击事件侦听器，例如（当 DOM 准备好时）：

const redButton = document.getElementById('testRED');
redButton.addEventListener('click', () => / *your logic */);

JavaScript 或 chrome.action.setIcon 在 chrome 扩展中不起作用

问题描述

1 个解决方案

解决方案1
0 2022-08-01 09:55:25

JavaScript 或 chrome.action.setIcon 在 chrome 扩展中不起作用

问题描述

1 个解决方案

解决方案1 0 2022-08-01 09:55:25

解决方案1
0 2022-08-01 09:55:25