在浏览器插件(如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