Chrome 扩展：替换网站图标

Question

在我的 chrome 扩展程序中，我试图找到一个站点的图标，然后将其替换为不同的图标。我能够找到该站点的图标 url，但我仍然不知道如何实际替换它。

我尝试使用 chrome.tabs.query 并使用它的 favIconUrl 的属性但我无法让它工作，所以我使用了一种方法来获取网站的图标至 https://www.google.com/s2/favicons?domain=exampledomain.com。这确实得到了 favicon 的 url，但我对如何继续替换 favicon 感到困惑。

编辑：包含更多代码

background.js

chrome.commands.onCommand.addListener(colorTabs);

function colorTabs(command)
{
    var url = "https://www.google.com/s2/favicons?domain=";
    var addFaviconUrl;

    if ("left-key-toggle-feature" == command)
    {
        chrome.tabs.query({currentWindow: true, active: true}, function(tabs)
        {
            /* favicon url */
            addFaviconUrl = tabs[0].url;
            url += addFaviconUrl;


            chrome.tabs.sendMessage(tabs[0].id, {url: url}, function(response) {});

        })
    }
};

content.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{
    if (request.url)
    {
        var link = document.querySelector("link[rel*='shortcut icon']") || document.createElement("link");
        link.type = "image/x-icon";
        link.rel = "shortcut icon";
        link.href = chrome.runtime.getURL("img/red-circle-16.png");   // not working
        //link.href = "https://www.google.com/s2/favicons?domain=google.com";  // works!
        document.getElementsByTagName("head").appendChild(link);
    }
})

Answer 1

您需要使用消息传递方式将 url 从 background.js 传递到 contentscript.js background.js

chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
    chrome.tabs.sendMessage(tabs[0].id, {url: url}, function(response) {});  
});

在内容脚本中，您需要将 url 替换为

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.url)
      {
       var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = url;
    document.getElementsByTagName('head')[0].appendChild(link);
    }
  });

Chrome 扩展：替换网站图标

Chrome Extension: Replacing Favicons

javascript

favicon

google-chrome-extension

background.js

content.js