chrome浏览器插件开发--如何在content_scripts的js中使用插件的本地图片

        在浏览器插件（如Chrome扩展、Firefox插件等）中，`content_scripts` 是一种强大的功能，它允许插件开发者向正在浏览的网页中注入JavaScript、CSS等文件。这些注入的脚本和样式表可以修改网页的DOM结构、样式、行为，或者与网页上的其他脚本进行交互。

"content_scripts": [
        {
            "matches": ["http://*/*", "https://*/*"],
            "js": ["pick.js"],
            "run_at": "document_idle"
        }
    ],

        比如我这里`content_scripts`配置的是pick.js，但是发现在pick.js无法直接访问到插件项目里的本地图片资源。

解决方案：

1、 首先，在 manifest.json中添加web_accessible_resources配置

"web_accessible_resources": [
        {
            "matches": ["http://*/*", "https://*/*"],
            "resources": ["images/02.png", "images/01.png"]
        }
    ],

2、在pick.js中使用 chrome.runtime.getURL() 获取到图片的url路径。（ MV3 废弃了chrome.extension.getURL接口，请使用chrome.runtime.getURL替代 ）

const pop_top_img_url = chrome.runtime.getURL("images/01.png");
pop_top.style.background = `url(${pop_top_img_url})`;

 这样就可以在页面创建的dom中设置本地图片的背景图了

踩坑记录：

刚开始 web_accessible_resources 配置项，我是这样写的，添加到扩展程序时会报以下错误

"web_accessible_resources": ["images/02.png", "images/01.png"],

Error at key 'web_accessible_resources'. Parsing array failed at index 0: expected dictionary, got string