如何使用 Chrome 扩展程序更改网站中的“样式”图像

Question

我试图弄清楚如何使用不仅仅是具有“src”属性的chrome扩展来更改网站的图像。 就我而言，我正在尝试更改https://www.foxnews.com/上的徽标，当我检查并查看“样式”时，我可以看到它是“背景图像”属性。 问题是当我将它设置为我自己的图像时（使用以前在其他地方工作过的方法），什么也没有发生。 我可以更改“背景大小”和“背景颜色”，但图像不会让步。 有人可以提供解决方案吗？

到目前为止，这是我的代码： manifest.json：

{
    "name": "ChromeExtension",
    "description": "E",
    "version": "1.0",
    "manifest_version": 3,
    "web_accessible_resources": [
        {
            "resources": ["*.jpg","*.JPG"],
            "matches": ["<all_urls>"]
        }
    ],
    
    "permissions": ["storage","activeTab","scripting"],

    "content_scripts":[
        {
            "matches": ["https://www.foxnews.com/"],
            "js":["fNews.js"]
        }
    ]
}

和 fNews.js：

document.getElementsByClassName("logo")[0].style.backgroundColor = '#3aa757';
document.getElementsByClassName("logo")[0].setAttribute('href','https://www.cnn.com/');
document.getElementsByClassName("logo")[0].style.backgroundSize = '50%';
document.getElementsByClassName("logo")[0].style.backgroundImage = 'chrome-extension://igdebagnkjaemmchleldelgggjpbngkl/Duck.jpg';

Answer 1

您可以尝试将带有更改的 css 文件直接注入 css 本身，这将覆盖当前页面 css。

使用您的 styles 为徽标创建一个 css 文件：

.logo{
  background-image: url('...');
  background-color: #3aa757;
  background-size: 50%;
}

然后在您的 js 脚本中将其注入页面：

window.onload = async () => {
    let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    
    // inject css
    await chrome.scripting.insertCSS({
        target: {tabId: tab.id},
        files: ['logo.css'],
    });
}

并为 manifest.json 添加权限：

{
"name": "....",
...
"permissions": [
    "activeTab",
    "tabs" ,
    "scripting"
  ],
...
}

Answer 2

backgroundImage可能包含几种类型的内容，所以我们需要在这里使用url() ：

document.querySelector('.logo').style.backgroundImage =
  `url("${ chrome.runtime.getURL('Duck.jpg') }");`

我们使用chrome.runtime.getURL而不是硬编码扩展的 id。