如何使用 Chrome 扩展更改网站中的 "style" 图片

Question

我想弄清楚如何使用 chrome 扩展来更改网站的图像，而不仅仅是具有“src”属性的扩展。就我而言，我正在尝试更改 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。

使用您的徽标样式创建 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。

如何使用 Chrome 扩展更改网站中的 "style" 图片

How Do I Change a "style" Image in a Website Using a Chrome Extension

html

javascript

css

google-chrome-extension