获取网址的favicon并显示它(firefox web-ext)

问题描述 投票:1回答:3

我正在开发一个Firefox web-ext。有没有办法让我可以获得当前网站/标签的图标。我提到了this,但我认为%c不再适用了。这是我的manifest.json(其中的一部分):

"permissions": [
  "storage",
  "<all_urls>",
  "tabs",
  "activeTab"
],

"browser_action": {
  "default_icon": "icons/love.ico",
  "default_title": "Show URL and Favicon",
  "default_popup": "popup/addsite.html"
}

addsite.js文件如下所示:

var addnewsite = document.querySelector('.addnewbutton');
var siteContainer = document.querySelector('.site-container');
addnewsite.addEventListener('click', addNEWsite);

function onError(error) {
  console.log('Error: ${error}');
}//generic error handler

function addNEWsite(){
    siteurl();
    function siteurl(){
        browser.tabs.query({ currentWindow: true, active: true }, function (tabs) {
            addurl(tabs[0].url);
        });
    }
    function addurl(link){
        var urltostore = link;
        var gettingItem = browser.storage.local.get(urltostore);
        gettingItem.then((result) => {
            var objTest = Object.keys(result);
            if(objTest.length < 1 && urltostore !== ''){
                storeurl(urltostore);
            }
        }, onError);
    }
}

function storeurl(link){
    var storingurl = browser.storage.local.set({link});
    storingurl.then(() => {
        displayurl(link);
    }, onError);
}

function displayurl(link) {
    var url = document.createElement('div');
    var urlDisplay = document.createElement('div');
    var urlPara = document.createElement('p');
    url.setAttribute('class','url');
    urlPara.textContent = link;
    urlDisplay.appendChild(urlPara);
    url.appendChild(urlDisplay);
    siteContainer.appendChild(url);
}

这是一个快照,当点击扩展名内的按钮时(picture)。你可以看到我可以使用当前代码获取网址。但是我也想在它的url旁边显示页面的favicon(favIconUrl显示图标的url,我可以从那里得到它!?,如果是的话,怎么样?)。有人可以帮我解决这个问题吗?

javascript firefox firefox-webextensions
3个回答
0
投票

网站的图标可以通过两种方式之一找到。在<head>部分,您可以找到:

<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />

href属性指向favicon的位置。如果缺少这个,那么它将始终是/favicon.ico,位于网站的根目录中。


0
投票

对于那些需要代码的人来说,这里是:

var favicon = document.createElement('img');
// get the url of favicon using favIconUrl function
favicon.src = "https://jsfiddle.net/favicon.ico";
document.body.appendChild(favicon);
// you can also append it to a container if you want to

查看fiddle

要获得favicon的网址,可以在最后添加/favicon.ico或从favIconUrl获取它。


0
投票

对于https://icons.better-idea.org/来说,这是一个很好的万岁,他们已经创建了一个解决方案,可以在域的根目录中存储更少和更少的图标。

它是免费的,它可以工作(在我的情况下到目前为止100%的时间)并且它很简单:

<img src='https://icons.better-idea.org/icon?url=github.com&size=80..120..200' />

如果您不想依赖可以随时停止的免费网络服务(正如他在网站上正确指出的那样),您可能想要为github回购添加书签https://github.com/mat/besticon

拍手拍手

© www.soinside.com 2019 - 2024. All rights reserved.